Cursul CSS. Lecția 40. Lățimea maximă și minimă a site-ului.
Cursul CSS. Lecția 40. Lățimea maximă și minimă a site-ului. Maxi și lățimea minimă. Anterior, am examinat proprietatea de aliniere a blocurilor în funcție de lățime (de exemplu, lățimea: 200px, etc.). În plus față de proprietatea lățimii, proprietățile mai flexibile, max-lățimea (lățimea elementului maxim) și min-lățimea (lățimea minimă a elementului) sunt, de asemenea, utilizate pe scară largă în practică. Adesea, aceste proprietăți sunt utilizate împreună atunci când designerul dorește să ofere o imagine de pagină satisfăcătoare la orice rezoluție a ecranului utilizatorului și în oricare dintre acțiunile sale pentru a reduce lățimea ferestrei.
Cursul CSS. Lecția 40.
Lățimea maximă și minimă a site-ului.
Scurt memento:
În lecția 19, am examinat proprietatea de aliniere a blocurilor în funcție de lățime (de exemplu, lățimea: 200 pixeli etc.).
În plus față de proprietatea lățimii, proprietățile mai flexibile, max-lățimea (lățimea elementului maxim) și min-lățimea (lățimea minimă a elementului) sunt, de asemenea, utilizate pe scară largă în practică.
Adesea, aceste proprietăți sunt utilizate împreună atunci când designerul dorește să ofere o imagine de pagină satisfăcătoare la orice rezoluție a ecranului utilizatorului și în oricare dintre acțiunile sale pentru a reduce lățimea ferestrei.
Să luăm în considerare funcționarea proprietăților max-lățime și min-lățime pentru un exemplu.
În acest bloc nu există proprietăți pentru a determina lățimea lățimii, max-lățimea, min-lățimea.
Lățimea blocului este determinată automat și depinde în întregime de rezoluția ecranului și de lățimea elementului părinte.
În acest bloc, sunt date proprietățile pentru determinarea lățimii:
max-lățime: 650px;
min-lățime: 600px;
Lățimea blocului nu poate depăși limitele valorilor indicate.
Încercați să modificați manual lățimea ferestrei browserului. Primul bloc va schimba lățimea sa în funcție de lățimea blocului părinte și cel de-al doilea bloc în intervalul de 600-650 pixeli.
Rețineți că proprietățile max-lățime și min-lățime nu includ valorile de umplutură, margini și margini.
Acum, să trecem la teorie.
Proprietatea max-lățime poate avea următoarele valori:- max-width: nici unul; - Lățimea maximă nu este specificată deloc. Aceasta este valoarea implicită. (Fără lățime maximă. Aceasta este implicită.)
- max-lățime: lungime; - definește lățimea maximă în pixeli (px), în cm, etc. Exemplu: max-width: 650px; (Definește lățimea maximă în px, cm etc.)
- max-width:% - Specifică lățimea maximă în procente la blocul care conține. Exemplu: max-lățime: 50%; (Definește lățimea maximă în procente a blocului care conține)
- max-width: moștenire - Specifică faptul că valoarea proprietății de lățime maximă trebuie moștenită de la elementul părinte. (Specifică faptul că valoarea proprietății de lățime maximă trebuie moștenită de la elementul părinte)
Proprietatea min-lățime poate avea următoarele valori:
- min-lățime: lungime; - definește lățimea minimă în pixeli (px), în cm, etc. Valoarea implicită este 0. Exemplu: min-width: 600px; (Definește lățimea minimă în px, cm, etc. Valoarea implicită: 0.)
- min-width:% - Specifică lățimea minimă în procente blocului care conține. Exemplu: min-lățime: 50%; (Definește lățimea minimă în procente a blocului care conține)
- min-width: moștenire - Specifică faptul că valoarea proprietății min-width trebuie moștenită de la elementul părinte. (Specifică faptul că valoarea proprietății min-width trebuie moștenită de la elementul părinte)
Următoarele reguli pentru stiluri au fost utilizate în exemplu:
Exemplul a folosit următorul cod HTML (puncte cheie):
De asemenea, vom folosi noile clase în foaia de stil CSS și codul HTML în următorul nostru test.
css_040_001.html ← faceți clic pentru a vedea cum arată exemplul pe acest site.
css_040_001.zip ← descărcați mostra pe care să o instalați pe site-ul dvs.
***** Machine-funcțional pentru deplasarea prin paginile de pagini CSS *****
Căutare. Primul Eveniment Anterior Urmatorul Ultimul. Nu /
Articole similare
Trimiteți-le prietenilor: