Curs css

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