Înălțimea și lățimea elementului sunt valori calculate. Fiecare element al unei pagini web formează o zonă dreptunghiulară, care la rândul său constă din mai multe zone - zona de conținut (conținut), zone de căptușire, zone cadruși zone de câmp element.
Între conținutul elementului și marginea acestuia sunt indentare umplutură, în afara marginii elementului - câmpuri marjă. Fiecare element are o zonă de conținut, alte zone sunt opționale.
Orez. 1. Model de bloc al unui element 1. Înălțimea elementului
Proprietatea înălțime setează înălțimea conținutului elementului bloc și nu are niciun efect asupra afișării 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: 100 px;)
2. Lățimea elementului
Proprietatea de lățime setează lățimea conținutului elementului bloc și nu are niciun efect asupra afișării elementelor inline: inline; ... Elementele în linie au aceeași lățime ca și conținutul lor. Valorile negative nu sunt permise. Proprietatea nu este moștenită.
Sintaxă
P (lățime: 100 px;)
3. Înălțimea și lățimea unui element absolut poziționat
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 decalajul elementului. Dacă sunt specificate margini și margini pentru un element, acestea reduc dimensiunea zonei de conținut cu valorile corespunzătoare.
Div (fundal: # 6A7690; poziție: absolut; sus: 0; jos: 0; stânga: 50%; dreapta: 0;) / * în acest caz, înălțimea elementului este 100%, lățimea este 50% din blocul părinte * / 
Orez. 2. Înălțimea și lățimea unui element absolut poziționat
4. Liniile elementelor
Folosind proprietatea de umplere, puteți seta umplerea pentru mai multe fețe ale unui element în același timp, în următoarea ordine :. Dacă elementul are un fundal, se va extinde și la umplutură. Valorile negative nu sunt permise. Proprietatea nu este moștenită.
Dacă sunt date trei valori, de exemplu, div (umplutură: 10px 20px 30px;), atunci acestea vor fi distribuite în următoarea ordine: prima valoare este umplerea de sus, a doua este umplerea dreaptă și stânga, iar al treilea este căptușeala inferioară.
Dacă sunt date două valori, de exemplu div (padding: 10px 20px;), atunci prima va seta umplerea de sus și de jos, a doua va seta dreapta și stânga.
O singură valoare precum div (padding: 10px;) va seta aceeași padding pe toate părțile elementului.
Sintaxă
P (umplutură: 5px 10px 15px 10px;)
4.1. Indentarea unei laturi a unui element
Pentru a seta umplerea numai pe o parte a unui element, trebuie să utilizați una dintre proprietățile de umplere-sus, umplere-dreapta, umplere-jos, umplere-stânga, de exemplu:
P (umplere-stânga: 10 px;)
5. Câmpurile elementelor
Majoritatea elementelor sunt separate unele de altele de margini. Proprietatea marginii este un formular de scurtare pentru scrierea marginilor unui element în următoarea ordine: sus, dreapta, jos, stânga... Se folosește atunci când trebuie să specificați margini din mai multe laturi, dar nu neapărat din patru laturi. Marginile adiacente vertical ale elementelor de bloc sunt prăbușite, 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 (marjă: 10px 20px 30px;), atunci acestea vor fi distribuite în următoarea ordine: prima valoare este marja superioară, a doua este marja dreaptă și stânga, iar a treia este marja de jos.
Dacă sunt date două valori, de exemplu, div (margine: 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 (margin: 10px;) va seta aceleași margini pe toate laturile elementului.
(margin: 0 auto;) va funcționa numai dacă lățimea elementului este setată explicit.
Orez. 3. margine: auto; pentru element absolut poziționat Sintaxă
Div (marjă: 5px 10px 2px 5px;)
5.1. Margini pe o parte a elementului
Proprietățile marginii-sus, marginea-dreapta, marginea-jos, marginea-stânga controlează marginile corespunzătoare de pe fiecare parte a elementului, de exemplu:
P (margine-stânga: 10 px;)
6. Limitarea lățimii și înălțimii
CSS acceptă, de asemenea, câteva alte proprietăți legate de setarea înălțimii și lățimii elementelor paginii web: min-înălțime, min-lățime, max-înălțime și max-lățime. Aceste proprietăți vă permit să setați valorile minime și maxime pentru lățimea sau înălțimea unui element, oferind elementului posibilitatea de a umple spațiul disponibil. Proprietățile sunt adesea folosite pentru proiectarea de pagini web receptive. Se aplică tuturor elementelor, cu excepția elementelor în linie și a tabelului. Ele respectă întotdeauna regula principală, adică după ce a dat elementului o înălțime sau o lățime. Nu moștenit.
Puteți specifica dimensiuni regulate folosind unele unități de măsură și restricții de dimensiune folosind alte unități, de exemplu:
Div (lățime: 400 px; lățime maximă: 50%;)
Elementul va avea o lățime de 400 px numai dacă această valoare nu depășește 50% din lățimea blocului containerului, altfel lățimea acestuia va fi redusă.
În acest articol, vom arunca o privire la modul în care puteți seta înălțimea unui bloc ca procent din lățimea acestuia în CSS. Să ne uităm la aplicația acestei tehnologii folosind exemplul de creare a unui carusel (glisor) Bootstrap din imagini de diferite dimensiuni.
Crearea unui bloc cu o înălțime care are un anumit procent din lățimea sa
- Creați structură HTML din 2 blocuri:
Primul bloc are 2 clase. Folosind clasa receptivă la articole, vom seta poziționarea relativă a blocului. Acest lucru trebuie făcut astfel încât blocul 2 (care va avea poziționare absolută) să fie situat relativ la acesta. În plus, această clasă este utilizată și pentru a adăuga pseudo-elementul: before înainte de conținutul elementelor corespunzătoare (item-responsive). Acest element va seta înălțimea dorită a casetei în raport cu lățimea acesteia folosind proprietatea CSS de umplutură. Trucul acestei metode este că, dacă proprietatea de umplere este setată la nu în pixeli, ci în procente, atunci va fi calculat de browser în raport cu lățimea acestuia... Astfel, este posibil să se obțină un bloc cu înălțimea necesară. Următorul pas este de a da blocului 2 poziționarea absolută și de a-l alinia cu primul bloc.
- Adăugați următorul CSS pe pagină: .item-responsive (poziție: relativă; / * poziționare relativă * /) .item-responsive: before (afișare: bloc; / * redați elementul ca bloc * / conținut: ""; / * conținut pseudo-element * / lățime: 100%; / * lățimea elementului * /) .item-16by9 (padding-top: 56,25%; / * (9:16) * 100% * /). element-receptiv> .content (poziție: absolută; / * poziția absolută a elementului * / / * poziția elementului * / sus: 0; stânga: 0; dreapta: 0; jos: 0;) / * Dacă este necesar (pentru blocuri cu acestea clase) * / .item -4by3 (padding-top: 75%; / * (3: 4) * 100% * /). item-2by1 (padding-top: 50%; / * (1: 2) * 100 % * /) .item -1by1 (padding-top: 100%; / * (1: 1) * 100% * /)
Aplicarea tehnologiei de mai sus pentru a crea un carusel Bootstrap
Dacă nu sunteți familiarizat cu Bootstrap și doriți să știți ce este, puteți consulta Introducerea noastră în Bootstrap.
Să vedem un exemplu în care structura HTML de mai sus și codul CSS vor fi utilizate pentru a afișa diapozitivele caruselului Bootstrap.
Vom folosi următoarele imagini ca imagini:
- carusel_1.jpg (lățime = 736px, înălțime = 552px, raport de aspect (înălțime la lățime) = 1,33);
- carusel_2.jpg (lățime = 1155px, înălțime = 1280px, raport de aspect (înălțime la lățime) = 0,9);
- carusel_3.jpg (lățime = 1846px, înălțime = 1028px, raport de aspect (înălțime la lățime) = 1,8);
- carusel_4.jpg (lățime = 1140px, înălțime = 550px, raport de aspect (înălțime la lățime) = 2,07);
- carusel_5.jpg (lățime = 800px, înălțime = 600px, raport de aspect (înălțime la lățime) = 1,33);
Vom seta imaginile ca fundal. Acest lucru va permite utilizarea imaginilor cu diferite raporturi de aspect în caruselul Bootstrap 3.
Marcare HTML a caruselului:
Cod CSS carusel:
Element care răspunde (poziție: relativă; / * poziționare relativă * /). %; / * element width * /) .item-16by9 (padding-top: 56,25%; / * (9:16) * 100% * /). item-responsive> .content (poziție: absolută; / * poziție absolută a elementului * / / * poziția elementului * / sus: 0; stânga: 0; dreapta: 0; jos: 0; fundal-dimensiune: copertă! important;)
În mod implicit, lățimea automată este utilizată pentru elementele de bloc. Aceasta înseamnă că elementul va fi întins orizontal exact cu cât există spațiu liber. Înălțimea implicită a elementelor de bloc este setată automat, adică browserul întinde zona de conținut pe verticală pentru a afișa tot conținutul. Pentru a seta dimensiuni personalizate pentru zona de conținut a unui element, puteți utiliza proprietățile de lățime și înălțime.
Proprietatea lățime CSS vă permite să setați lățimea zonei de conținut a unui element, iar proprietatea înălțime vă permite să setați înălțimea zonei de conținut:
Rețineți că proprietățile de lățime și înălțime determină doar dimensiunea zonei de conținut; pentru a calcula lățimea totală a unui element de bloc, adăugați lățimea zonei de conținut, umplutura stânga și dreapta și lățimea marginii stânga și dreapta. Același lucru este valabil și pentru înălțimea totală a elementului, doar toate valorile sunt calculate vertical:
Pentru acest paragraf, vom seta doar lățimea și înălțimea.
Acest paragraf conține, pe lângă lățime și înălțime, căptușeala, bordura și căptușeala.
Încerca "Exemplul arată clar că al doilea element ocupă mai mult spațiu decât primul. Dacă calculați conform formulei noastre, atunci dimensiunile primului paragraf sunt 150x100 pixeli, iar dimensiunile celui de-al doilea paragraf sunt:
| Inălțime totală: | 5px | + | 10px | + | 100 px | + | 10px | + | 5px | = 130px |
| superior cadru | superior indentare | înălţime | inferior indentare | partea de jos cadru |
adică 180x130 pixeli.
Debord de elemente
După ce ați definit lățimea și înălțimea elementului, merită să acordați atenție unui punct important - conținutul situat în interiorul elementului poate depăși dimensiunea blocului specificată. În acest caz, o parte din conținut va depăși limitele elementului, pentru a evita acest moment neplăcut, puteți utiliza proprietatea CSS overflow. Proprietatea de depășire îi spune browserului ce trebuie să facă dacă conținutul blocului depășește dimensiunea sa. Această proprietate poate lua una din cele patru valori:
- vizibilă este valoarea implicită utilizată de browser. Setarea acestei valori va avea același efect ca și setarea proprietății de revărsare.
- scroll - adaugă bare de derulare verticale și orizontale la element.
- auto - adaugă bare de defilare după cum este necesar.
- ascuns - ascunde o parte din conținutul care depășește limitele elementului bloc.
Descriere
Setează înălțimea blocului sau a elementelor înlocuibile (de exemplu, eticheta ). Înălțimea nu include grosimea marginilor din jurul elementului, umplutura și marginile.
Dacă conținutul blocului depășește înălțimea specificată, atunci înălțimea elementului va rămâne neschimbată și conținutul va fi afișat deasupra acestuia. Această caracteristică poate face ca conținutul elementelor să se suprapună atunci când elementele din codul HTML sunt secvențiale. Pentru a preveni acest lucru, adăugați overflow: auto la stilul elementului.
Sintaxă
înălțime: valoare | interes | auto | moşteni
Valorile
Orice unități de lungime acceptate în CSS sunt acceptate ca valori - de exemplu, pixeli (px), inci (in), puncte (pt) etc. Atunci când se utilizează notația procentuală, înălțimea unui element este calculată în funcție de înălțimea elementul părinte. Dacă părintele nu este specificat în mod explicit, atunci fereastra browserului este utilizată ca părinte. auto setează înălțimea pe baza conținutului elementului
HTML5 CSS2.1 IE Cr Op Sa Fx
Rezultatul acestui exemplu este prezentat în Fig. 1.
Orez. 1. Aplicarea proprietății înălțime
Model de obiect
document.getElementById ("elementID") .style.height
Browsere
Internet Explorer 6 definește incorect înălțimea ca înălțime minimă.
În modul quirk, Internet Explorer până la versiunea 8.0 inclusiv include calcularea incorectă a înălțimii unui element fără a adăuga valori de umplere, marjă și chenar.
Internet Explorer până la versiunea 7.0 inclusă nu acceptă valoarea de moștenire.
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. Cu toate acestea, dacă mărimea casetei este setată la chenar, aceasta determină în schimb înălțimea zonei de chenar.
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 înălțimii minime și maxime înlocuiesc înălțimea.
Sintaxă
/ * Valoare cuvânt cheie * / înălțime: auto; / *Valori
Tipul de date CSS reprezintă o valoare a distanței. Lungimile pot fi utilizate în numeroase proprietăți CSS, cum ar fi lățimea, înălțimea, marginea, umplutura, lățimea chenarului, dimensiunea fontului și umbra textului. ">Sintaxa formală
Exemplu
HTML
CSS
div (lățime: 250 px; margine-jos: 5 px; margine: 2 px albastru solid;) #taller (înălțime: 50 px;) # mai scurt (înălțime: 25 px;) # părinte (înălțime: 100 px;) # copil (înălțime: 50% ; lățime: 75%;)Rezultat
Probleme de accesibilitate
Asigurați-vă că elementele setate cu o înălțime nu sunt trunchiate și / sau nu ascund alt conținut atunci când pagina este mărită pentru a mări dimensiunea textului.
Specificații
| Specificație | stare | cometariu |
|---|---|---|
| CSS Modul de dimensionare intrinsecă și extrinsecă Nivelul 4 |
Proiectul editorului | |
| CSS Modul de dimensionare intrinsecă și extrinsecă Nivelul 3 Definiția „înălțimii” din specificația respectivă. |
Proiect de lucru | S-au adăugat cuvintele cheie cu conținut maxim, conținut minim, conținut adecvat. |
| 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 (Revizuirea 1) Definiția „înălțimii” din specificația respectivă. |
Recomandare | Adaugă suport pentru tipul de date CSS reprezintă o valoare la distanță. Lungimile pot fi utilizate în numeroase proprietăți CSS, cum ar fi lățimea, înălțimea, marginea, umplutura, lățimea chenarului, dimensiunea fontului și umbra textului. "> |
| CSS Nivelul 1 Definiția „înălțimii” din specificația respectivă. |
Recomandare | Definiția inițială. |
| Valoarea initiala | auto |
|---|---|
| Se aplică la | toate elementele, cu excepția elementelor în linie, coloanele tabelelor și grupurile de coloane, care nu sunt înlocuite |
| Mostenit | Nu |
| Procente | Procentul este calculat în funcție de înălțimea blocului care conține caseta generată. 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 absolut, valoarea se 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 |
| Valoare calculată | un procent sau automat sau lungimea absolută |
| Tipul de animație | un tip de date CSS sunt interpolate ca numere reale cu virgulă mobilă. "> lungime, tipul de date CSS sunt interpolate ca numere reale cu virgulă mobilă."> procent sau calc (); |
| Ordinea canonică | ordinea neambiguă unică definită de gramatica formală |
Compatibilitate browser
Tabelul de compatibilitate de pe această pagină este generat din date structurate. Dacă doriți să contribuiți la date, consultați https://github.com/mdn/browser-compat-data și trimiteți-ne 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 | Chrome Suport complet 1 | Suport Edge complet 12 | Suport complet Firefox 1 | IE Suport complet 4 | Opera Suport complet 7 | Suport complet Safari 1 | WebView Android Suport complet 1 | Chrome Android Suport complet 18 | Suport complet pentru Firefox Android 4 | Opera Android Suport complet 10.1 | Suport complet Safari iOS 1 | Samsung Internet Android Suport complet 1.0 |
| fit-content | Chrome Suport complet 46 | Edge Fără suport Nu | Firefox Fără suport Nu | IE Fără suport Nu | Opera Suport complet 33 | Safari Suport complet 11 Suport complet 11 Suport complet 9 Prefixat Prefixat | Opera Android? | Safari iOS Suport complet 11 Suport complet 11 Suport complet 9 Prefixat Prefixat Implementat cu prefixul furnizorului: -webkit- | ||||
| conținut maxim | Chrome Suport complet 46 | Edge Fără suport Nu | Prefixat Prefixat | IE Fără suport Nu | Opera Suport complet 44 | Safari Suport complet 11 | WebView Android Suport complet 46 | Chrome Android Suport complet 46 | Prefixat Prefixat Implementat cu prefixul furnizorului: -moz- | Samsung Internet Android Suport complet 5.0 | ||
| min-content | Chrome Suport complet 46 | Edge Fără suport Nu | Firefox Suport complet 66 Suport complet 66 Suport complet 3 Prefixat Prefixat Implementat cu prefixul furnizorului: -moz- | IE Fără suport Nu | 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 furnizorului: -moz- | Opera Android Suport complet 43 | Suport complet Safari iOS 11 | Samsung Internet Android Suport complet 5.0 |
| întinde | Chrome Suport complet 28 Webkit-fill-available"> Nume alternativ Suport complet 28Webkit-fill-available"> Nume alternativ Webkit-fill-available"> Nume alternativ | Edge Fără suport Nu | Firefox Fără suport Nu | IE Fără suport Nu | Opera Suport complet 15 Webkit-fill-available"> Nume alternativ Suport complet 15Webkit-fill-available"> Nume alternativ Webkit-fill-available"> Nume alternativ Folosește numele non-standard: -webkit-fill-available | Suport complet Safari 9 Webkit-fill-available"> Nume alternativ Suport complet 9Webkit-fill-available"> Nume alternativ Webkit-fill-available"> Nume alternativ Folosește numele non-standard: -webkit-fill-available | WebView Android Suport complet 4.4 Webkit-fill-available"> Nume alternativ Suport complet 4.4Webkit-fill-available"> Nume alternativ Webkit-fill-available"> Nume alternativ Folosește numele non-standard: -webkit-fill-available | Chrome Android Suport complet 28 Webkit-fill-available"> Nume alternativ Suport complet 28Webkit-fill-available"> Nume alternativ Webkit-fill-available"> Nume alternativ Folosește numele non-standard: -webkit-fill-available | Firefox Android Fără suport Nu | Opera Android? | Suport complet Safari iOS 9 Webkit-fill-available"> Nume alternativ Suport complet 9Webkit-fill-available"> Nume alternativ Webkit-fill-available"> Nume alternativ Folosește numele non-standard: -webkit-fill-available | Samsung Internet Android Suport complet 5.0 Webkit-fill-available"> Nume alternativ Suport complet 5.0Webkit-fill-available"> Nume alternativ Webkit-fill-available"> Nume alternativ Folosește numele non-standard: -webkit-fill-available |
