Înseamnă înălțime. CSS - Înălțimea casetei în raport cu lățimea acesteia. Caracteristici de calcul a lățimii și înălțimii

The înălţime Proprietatea CSS specifică înălțimea unui element. În mod implicit, proprietatea definește înălțimea zonei de conținut. Dacă box-sizing este setat la border-box, totuși, acesta determină înălțimea zonei de frontieră.

Sursa pentru acest exemplu interactiv este stocată într-un depozit GitHub. Dacă „doriți să contribuiți la proiectul de exemple interactive, vă rugăm să clonați https://github.com/mdn/interactive-examples și să ne trimiteți o cerere de extragere.

Proprietățile de înălțime minimă și înălțime maximă depășesc înălțimea.

Sintaxă

/ * Valoarea cuvântului cheie * / înălțime: auto; / * valori* / înălțime: 120px; inaltime: 10em; / * Valoare * / inaltime: 75%; / * Valori globale * / înălțime: moștenire; inaltime: initiala; inaltime: neasezat;

Valori

Tipul de date CSS reprezintă o valoare de distanță. Lungimile pot fi utilizate în numeroase proprietăți CSS, cum ar fi lățime, înălțime, margine, umplutură, lățime chenar, dimensiune font și umbră text. "> Definește înălțimea ca valoare absolută. Tipul de date CSS reprezintă o valoare procentuală. Este adesea folosit pentru a defini o dimensiune ca fiind relativă la obiectul părinte al unui element. Numeroase proprietăți pot folosi procente, cum ar fi completarea marginii lățimii, înălțimea și dimensiunea fontului.> Definește înălțimea ca procent din înălțimea blocului care îl conține. Auto Browserul va calcula și selecta o înălțime pentru elementul specificat. Max-content Înălțimea preferată intrinsecă. Min-content Înălțimea minimă intrinsecă. Fit-content (date CSS tipul reprezintă o valoare care poate fi fie a sau a ."> ) Utilizează formula de potrivire-conținut cu spațiul disponibil înlocuit cu argumentul specificat, adică min (max-conținut, max (min-conținut,)).

Sintaxă formală

Tipul de date CSS reprezintă o valoare procentuală. Este adesea folosit pentru a defini o dimensiune ca fiind relativă la obiectul părinte al unui element. Numeroase proprietăți pot folosi procente, cum ar fi completarea marginii lățimii, înălțimea și dimensiunea fontului.> border-box content-box disponibil min-content max-content fit-content automat

Exemplu

HTML

Am 50 de pixeli înălțime.

Am 25 de pixeli înălțime.

Am jumătate din înălțimea părintelui meu.

CSS

div (lățime: 250px; margine-jos: 5px; chenar: 2px albastru solid;) #mai înalt (înălțime: 50px;) #mai scurt (înălțime: 25px;) #părinte (înălțime: 100px;) #copil (înălțime: 50% ; latime: 75%;)

Rezultat

Probleme de accesibilitate

Asigurați-vă că elementele setate cu o înălțime nu sunt trunchiate și/sau nu ascunde alt conținut atunci când pagina este mărită pentru a mări dimensiunea textului.

Specificații

Specificație	stare	cometariu
Modulul de dimensionare intrinsecă și extrinsecă CSS nivelul 4	Schița redactorului
Modulul de dimensionare intrinsecă și extrinsecă CSS nivelul 3 Definiția „înălțimii” din specificația respectivă.	Proiect de lucru	S-au adăugat cuvintele cheie pentru conținut maxim, conținut minim, conținut potrivit.
Tranziții CSS Definiția „înălțimii” din specificația respectivă.	Proiect de lucru	Listează înălțimea ca fiind animabilă.
CSS Nivelul 2 (Reviziunea 1) Definiția „înălțimii” din specificația respectivă.	Recomandare	Adaugă suport pentru tipul de date CSS reprezintă o valoare de distanță. Lungimile pot fi utilizate în numeroase proprietăți CSS, cum ar fi lățime, înălțime, margine, umplutură, lățime chenar, dimensiune font și umbră text. "> valorile și precizează asupra cărui element se aplică.
CSS Nivelul 1 Definiția „înălțimii” din specificația respectivă.	Recomandare	Definiție inițială.

Valoarea initiala	auto
Se aplică la	toate elementele, cu excepția elementelor inline neînlocuite, coloane de tabel și grupuri de coloane
Mostenit	Nu
Procente	Procentul este calculat în raport cu înălțimea blocului care conține casetele generate. Dacă înălțimea blocului care conține nu este specificată în mod explicit (adică, depinde de înălțimea conținutului), iar acest element nu este poziționat în mod absolut, valoarea calculează la auto.O înălțime procentuală pe elementul rădăcină este relativă la blocul care conține inițial.
Mass-media	vizual
Valoarea calculată	un procent sau auto sau lungimea absolută
Tip de animație	un tip de date CSS sunt interpolate ca numere reale, în virgulă mobilă "> lungime, tipul de date CSS sunt interpolate ca numere reale, în virgulă mobilă."> procent sau calc ();
Ordine canonică	ordinea unică neambiguă definită de gramatica formală

Compatibilitate browser

Tabelul de compatibilitate de pe această pagină este generat din date structurate. Dacă „doriți să contribui la date, vă rugăm să consultați https://github.com/mdn/browser-compat-data și să ne trimiteți o cerere de extragere.

Actualizați datele de compatibilitate pe GitHub

	Desktop						Mobil
	Crom	Margine	Firefox	Internet Explorer	Operă	Safari	Vizualizare web Android	Chrome pentru Android	Firefox pentru Android	Opera pentru Android	Safari pe iOS	Samsung Internet
înălţime	Suport complet Chrome 1	Edge Suport complet 12	Suport complet pentru Firefox 1	IE Suport complet 4	Opera Suport complet 7	Suport complet Safari 1	WebView Android Suport complet 1	Chrome Android Suport complet 18	Firefox Android Suport complet 4	Opera Android Suport complet 10.1	Safari iOS Suport complet 1	Samsung Internet Android Suport complet 1.0
potrivire-conținut	Suport complet Chrome 46	Edge Fără suport Nr	Firefox Fără suport Nr	IE Fără suport Nr	Opera Suport complet 33	Safari Asistență deplină 11 Asistență deplină 11 Asistență deplină 9 Prefixat Prefixat				Opera Android?	Safari iOS Asistență deplină 11 Asistență deplină 11 Asistență deplină 9 Prefixat Prefixat Implementat cu prefixul de furnizor: -webkit-
max-conținut	Suport complet Chrome 46	Edge Fără suport Nr	Prefixat Prefixat	IE Fără suport Nr	Opera Suport complet 44	Safari Suport complet 11	WebView Android Suport complet 46	Chrome Android Suport complet 46	Prefixat Prefixat Implementat cu prefixul de furnizor: -moz-			Samsung Internet Android Suport complet 5.0
min-conținut	Suport complet Chrome 46	Edge Fără suport Nr	Firefox Asistență deplină 66 Asistență deplină 66 Asistență deplină 3 Prefixat Prefixat Implementat cu prefixul de furnizor: -moz-	IE Fără suport Nr	Opera Suport complet 44	Safari Suport complet 11	WebView Android Suport complet 46	Chrome Android Suport complet 46	Firefox Android Suport complet 66 Suport complet 66 Suport complet 4 Prefixat Prefixat Implementat cu prefixul de furnizor: -moz-	Opera Android Suport complet 43	Safari iOS Suport complet 11	Samsung Internet Android Suport complet 5.0
întinde	Suport complet Chrome 28 Webkit-fill-disponibil„> Nume alternativ Suport total 28 Webkit-fill-disponibil„> Nume alternativ Webkit-fill-disponibil„> Nume alternativ	Edge Fără suport Nr	Firefox Fără suport Nr	IE Fără suport Nr	Opera Suport complet 15 Webkit-fill-disponibil„> Nume alternativ Sprijin deplin 15 Webkit-fill-disponibil„> Nume alternativ Webkit-fill-disponibil„> Nume alternativ Utilizează numele non-standard: -webkit-fill-available	Suport complet Safari 9 Webkit-fill-disponibil„> Nume alternativ Sprijin deplin 9 Webkit-fill-disponibil„> Nume alternativ Webkit-fill-disponibil„> Nume alternativ Utilizează numele non-standard: -webkit-fill-available	WebView Android Suport complet 4.4 Webkit-fill-disponibil„> Nume alternativ Suport complet 4.4 Webkit-fill-disponibil„> Nume alternativ Webkit-fill-disponibil„> Nume alternativ Utilizează numele non-standard: -webkit-fill-available	Chrome Android Suport complet 28 Webkit-fill-disponibil„> Nume alternativ Suport total 28 Webkit-fill-disponibil„> Nume alternativ Webkit-fill-disponibil„> Nume alternativ Utilizează numele non-standard: -webkit-fill-available	Firefox Android Fără suport Nr	Opera Android?	Safari iOS Suport complet 9 Webkit-fill-disponibil„> Nume alternativ Sprijin deplin 9 Webkit-fill-disponibil„> Nume alternativ Webkit-fill-disponibil„> Nume alternativ Utilizează numele non-standard: -webkit-fill-available	Samsung Internet Android Suport complet 5.0 Webkit-fill-disponibil„> Nume alternativ Suport complet 5.0 Webkit-fill-disponibil„> Nume alternativ Webkit-fill-disponibil„> Nume alternativ Utilizează numele non-standard: -webkit-fill-available

Legendă

Sprijin deplin Sprijin deplin Fără suport Fără suport Compatibilitate necunoscută Compatibilitate necunoscută Utilizează un nume non-standard. Folosește un nume non-standard. Necesită un prefix de furnizor sau un nume diferit pentru utilizare. Necesită un prefix de furnizor sau un nume diferit pentru utilizare.

Proprietățile lățimii css sunt responsabile pentru valoarea lățimii zonei de conținut a elementului.

Latime: valoare | interes | auto | moşteni

Proprietățile de înălțime css sunt responsabile pentru valoarea înălțimii zonei cu conținutul elementului.

Înălțime: valoare | interes | auto | moşteni

Nu sunt permise valori negative pentru înălțime și lățime.

S-ar părea că totul este simplu și clar cu aceste proprietăți CSS, dar, de fapt, totul se dovedește a nu fi chiar atât de simplu.

Setarea unui element pe o pagină web la o lățime de 500 px nu înseamnă că lățimea totală a acelui element va fi de 500 px sau mai puțin.

Cel mai important lucru de înțeles este că proprietățile de lățime și înălțime stabilesc lățimea și înălțimea zonei de conținut.

Proprietățile de lățime și înălțime sunt doar una dintre componentele din care vor fi calculate lățimea și înălțimea totală a elementului. Acestea indică lățimea și înălțimea zonei de conținut, care pot fi văzute în imaginea următoare. De asemenea, proprietăți precum umplutura, marginea și chenarul sunt implicate în formarea lățimii și înălțimii totale.

Acest lucru poate fi ușor de văzut acum.

Să luăm, de exemplu, două blocuri cu aceeași lățime, dar unul dintre ele va seta suplimentar proprietatea de umplutură.

lățime: 100px

lățime: 100px + umplutură

În mod implicit, paginile web au comportamentul că valoarea de umplutură pentru partea corespunzătoare este adăugată la valorile înălțimii și lățimii.

Acestea. lățimea totală a elementului va consta din valoarea proprietății lățime a elementului, plus valoarea padding-left și padding-right.

Pentru diferite tipuri de elemente care pot fi găsite pe pagină, lățimea și înălțimea totală a elementelor se calculează folosind formule speciale.

Pentru diferite tipuri de elemente care pot fi găsite pe paginile web, valorile lățimii și înălțimii pot avea comportamente și valori diferite.

O situație similară va fi cu proprietatea înălțime.

înălțime: 100px

înălțime: 100px + umplutură

CSS are un algoritm special care calculează valorile de lățime și înălțime pentru diferite elemente dintr-o pagină web. Nu mă voi opri acum asupra acestui algoritm, pentru că este oarecum complicat.

Acum, principalul lucru pe care trebuie să-l înțelegem este că proprietățile de lățime și înălțime ne permit să lucrăm cu lățimea și înălțimea zonei cu conținutul elementului, și nu cu lățimea și înălțimea totală a elementului.

Înălțimea și lățimea elementului sunt valori calculate. Fiecare element al unei pagini web formează o zonă dreptunghiulară, care, la rândul ei, constă din mai multe zone - zona de conținut (conținut), zone de umplutură, zonele de cadruși zonele de câmp element.

Între conținutul elementului și chenarul acestuia sunt indentare umplutură, în afara graniței elementului - câmpuri marginea. Fiecare element are o zonă de conținut, celelalte zone sunt opționale.

Orez. 1. Modelul bloc al unui element

1. Înălțimea elementului

Proprietatea înălțime stabilește înălțimea conținutului elementului bloc și nu are niciun efect asupra afișajului elementelor inline: inline; ... Înălțimea elementelor în linie este egală cu înălțimea conținutului lor. Valorile negative nu sunt permise. Proprietatea nu este moștenită.

Sintaxă

P (înălțime: 100px;)

2. Lățimea articolului

Proprietatea width stabilește lățimea conținutului elementului bloc și nu are efect asupra afișajului elementelor inline: inline; ... Elementele inline au aceeași lățime ca și conținutul lor. Valorile negative nu sunt permise. Proprietatea nu este moștenită.

Sintaxă

P (lățime: 100px;)

3. Înălțimea și lățimea unui element poziționat absolut

Setați lățimea și înălțimea unei poziții a elementului poziționat absolut: absolut; nu întotdeauna este necesar, deoarece în acest caz înălțimea și lățimea sunt implicit determinate de offset-ul elementului. Dacă pentru un element sunt specificate marginile și marginile, acestea reduc dimensiunea zonei de conținut cu valorile corespunzătoare.

Div (fond: # 6A7690; poziție: absolut; sus: 0; jos: 0; stânga: 50%; dreapta: 0;) / * în acest caz, înălțimea elementului este de 100%, lățimea este de 50% din blocul părinte * /
Orez. 2. Înălțimea și lățimea unui element poziționat absolut

4. Indentări ale elementelor

Folosind proprietatea padding, puteți seta umplutura pentru mai multe laturi ale unui element în același timp, în următoarea ordine:. Dacă elementul are un fundal, acesta se va extinde și la umplutură. Valorile negative nu sunt permise. Proprietatea nu este moștenită.

Dacă sunt date trei valori, de exemplu div (padding: 10px 20px 30px;), atunci acestea vor fi distribuite în următoarea ordine: prima valoare este padding-ul de sus, a doua este padding-ul din dreapta și din stânga, iar a treia este căptușeala inferioară.
Dacă sunt date două valori, de exemplu, div (padding: 10px 20px;), atunci prima va seta umplutura de sus și de jos, a doua va seta dreapta și stânga.
O singură valoare precum div (padding: 10px;) va seta aceeași umplutură pe toate părțile elementului.

Sintaxă

P (căptușeală: 5px 10px 15px 10px;)

4.1. Indentarea unei laturi a unui element

Pentru a seta umplutura pe o singură parte a unui element, trebuie să utilizați una dintre proprietățile padding-top, padding-right, padding-bottom, padding-left, de exemplu:

P (padding-stânga: 10px;)

5. Câmpuri de elemente

Majoritatea elementelor sunt separate unele de altele prin margini. Proprietatea margine este o formă scurtă pentru scrierea marjelor unui element în următoarea ordine: sus, dreapta, jos, stânga... Este folosit atunci când trebuie să specificați margini din mai multe părți, dar nu neapărat din patru părți. Marginile adiacente vertical ale elementelor bloc sunt restrânse, iar marginile de sus și de jos nu au niciun efect asupra elementelor în linie. Sunt permise valori negative. Proprietatea nu este moștenită.

Dacă sunt date trei valori, de exemplu div (marja: 10px 20px 30px;), atunci acestea vor fi distribuite în următoarea ordine: prima valoare este marginea de sus, a doua este marginea din dreapta și din stânga și a treia. este marginea de jos.
Dacă sunt date două valori, de exemplu div (marja: 10px 20px;), atunci prima va seta marginile de sus și de jos, a doua va seta dreapta și stânga.
O singură valoare precum div (marja: 10px;) va seta aceleași marje pe toate părțile elementului.

(marja: 0 auto;) va funcționa numai dacă lățimea elementului este setată în mod explicit.

Orez. 3. margine: auto; pentru element poziționat absolut

Sintaxă

Div (marja: 5px 10px 2px 5px;)

5.1. Margini pe o parte a elementului

Proprietățile margine-sus, margine-dreapta, margine-jos, margine-stânga controlează marjele corespunzătoare de fiecare parte a elementului, de exemplu:

P (marja-stânga: 10px;)

6. Limitarea lățimii și înălțimii

CSS acceptă și alte câteva proprietăți legate de setarea înălțimii și lățimii elementelor paginii web: min-height, min-width, max-height și max-width. Aceste proprietăți vă permit să setați valorile minime și maxime pentru lățimea sau înălțimea unui element, oferind elementului capacitatea de a umple spațiul disponibil. Proprietățile sunt adesea folosite pentru designul de pagini web receptiv. Se aplică tuturor elementelor, cu excepția elementelor inline și de tabel. Ei urmează întotdeauna regula principală, adică. după ce a dat elementului o înălțime sau o lățime. Nu moștenit.

Puteți specifica dimensiuni obișnuite folosind unele unități de măsură și restricții de dimensiune folosind alte unități, de exemplu:

Div (lățime: 400px; lățime maximă: 50%;)

Elementul va avea o lățime de 400px doar dacă această valoare nu depășește 50% din lățimea blocului container, în caz contrar lățimea acestuia va fi redusă.

Ultima actualizare: 21.04.2016

Dimensiunile elementelor sunt stabilite folosind proprietățile de lățime și înălțime.

Valoarea implicită pentru aceste proprietăți este auto, ceea ce înseamnă că browserul însuși determină lățimea și înălțimea elementului. De asemenea, puteți seta în mod explicit dimensiunile folosind unități (pixeli, em) sau folosind procente:

Latime: 150px; latime: 75%; inaltime: 15em;

Pixelii definesc lățimea și înălțimea exactă. Unitatea em depinde de înălțimea fontului din element. Dacă dimensiunea fontului unui element, de exemplu, este de 16 pixeli, atunci 1 em pentru acel element ar fi de 16 pixeli. Adică, dacă lățimea elementului este setată la 15em, atunci va fi de fapt 15 * 16 = 230 pixeli. Dacă elementul nu are o dimensiune specificată a fontului, atunci va fi preluat din parametrii moșteniți sau valorile implicite.

Procentele pentru proprietatea width sunt calculate pe baza lățimii elementului container. Dacă, de exemplu, elementul body dintr-o pagină web are o lățime de 1000 de pixeli și elementul său imbricat este

are o lățime de 75%, atunci lățimea reală a acestui bloc este

este 1000 * 0,75 = 750 pixeli. Dacă utilizatorul redimensionează fereastra browserului, atunci lățimea elementului body și, în consecință, lățimea blocului div imbricat se va modifica.

Valorile procentuale pentru proprietatea înălțime funcționează similar cu proprietatea lățime, cu excepția faptului că înălțimea este acum calculată din înălțimea elementului container.

De exemplu:

Dimensiuni în CSS3

Cu toate acestea, dimensiunile reale ale elementului pot fi diferite de cele stabilite în proprietățile de lățime și înălțime. De exemplu:

Dimensiuni în CSS3

După cum puteți vedea în captură de ecran, în realitate, valoarea proprietății lățime - 200px - determină doar lățimea conținutului interior al elementului, iar sub blocul elementului în sine va fi alocat un spațiu, a cărui lățime este egală cu lățimea conținutului interior (proprietatea lățime) + padding (proprietatea padding) + lățimea marginii (proprietatea border-width) + padding (proprietatea margine). Adică elementul va avea o lățime de 230 de pixeli, iar lățimea casetei elementului, ținând cont de margini, va fi de 250 de pixeli.

Astfel de calcule trebuie luate în considerare la dimensionarea elementelor.

Folosind un set suplimentar de proprietăți, puteți seta dimensiunile minime și maxime:

min-width: lățime minimă

max-width: lățime maximă

min-height: inaltime minima

max-height: înălțime maximă

lățime minimă: 200px; latime: 50%; lățime maximă: 300px;

În acest caz, lățimea elementului este de 50% din lățimea elementului container, dar nu poate fi mai mică de 200 de pixeli sau mai mare de 300 de pixeli.

Depășirea lățimii blocului

Proprietatea box-sizing vă permite să suprascrieți dimensionarea articolelor. Poate lua una dintre următoarele valori:

content-box: valoarea implicită a proprietății pe care browserul o adaugă lățimea marginii și umplutura la valorile proprietăților lățime și înălțime pentru a determina lățimea și înălțimea reală a elementelor

padding-box: Spune browserului web că lățimea și înălțimea elementului ar trebui să includă umplutură ca parte a valorii lor. De exemplu, să presupunem că avem următorul stil:

Latime: 200px; înălțime: 100px; marja: 10px; umplutură: 10px; chenar: 5px solid #ccc; culoare de fundal: #eee; cutie-dimensionare: padding-box;

Aici lățimea reală a conținutului interior al blocului va fi 200px (lățime) - 10px (padding-stânga) - 10px (padding-right) = 180px.

Trebuie remarcat faptul că majoritatea browserelor moderne nu acceptă această proprietate.

border-box: Spune browserului web că lățimea și înălțimea elementului ar trebui să includă umplutură și chenar ca parte a valorii lor. De exemplu, să presupunem că avem următorul stil:

Latime: 200px; înălțime: 100px; marja: 10px; umplutură: 10px; chenar: 5px solid #ccc; culoare de fundal: #eee; dimensionare cutie: chenar-cutie;

Aici lățimea reală a conținutului interior al blocului va fi 200px (lățime) - 10px (padding-stânga) - 10px (padding-right) - 5px (border-left-width) - 5px (border-right-width) = 170px.

De exemplu, să definim două casete care diferă doar prin valoarea proprietății box-sizing:

Dimensiuni în CSS3

Determinarea dimensiunii reale în CSS 3

În primul caz, la dimensionarea unui bloc, proprietățile de lățime și înălțime vor fi adăugate la grosimea chenarului, precum și căptușeala și umplutura, astfel că primul bloc va fi mare.