Cuantificare în CSS: calculul dimensiunilor blocurilor

Când faceți pagini web, este foarte important să specificați dimensiunile elementelor. Dacă eroarea se va strecura, întregul aspect poate "sparge", răsturnând aspectul site-ului. Pentru a evita erorile, este important să înțelegeți exact modul în care browserele calculează valorile blocurilor și modul de gestionare a acestui algoritm utilizând proprietatea de dimensionare a casetelor CSS.

Modelul blocului CSS

Toate nodurile de documente care au un tip bloc de cartografiere sunt descrise de un model de bloc. Potrivit acesteia, în structura elementului se alocă următoarele zone sau cutii, îmbinate unul în celălalt:

• conținutul-casetă, care include conținutul real al blocului - text și noduri copil;
• cutie de umplutură, care ocupă întregul spațiu în interiorul cadrului, împreună cu crestături interioare sau garnituri;
• care include și granița însăși.

În plus, pentru bloc, puteți defini liniuțe sau margini exterioare care o separă de elementele vecine sau limitele părintelui.

Orice dintre casetele listate poate fi lipsă sau goală.

Acesta este conceptul de bază al CSS, fără a înțelege ceea ce să creeze aspecte complexe frumoase este aproape imposibil.

Determinarea dimensiunilor reale ale unui element

Principalul lucru pentru browser este caseta de conținut, deoarece aceasta este partea semantică a oricărui bloc. Prin urmare, atunci când un layouter specifică valorile utilizând proprietățile de lățime și înălțime, acestea sunt aplicate în zona de conținut.

Mai mult, la dimensiunile specifice ale cutiei interioare, se adaugă liniuțele interioare și exterioare și lățimea cadrului.

.bloc {width: 200px; height: 100px; padding-top: 20px; padding-bottom: 20px; padding-left: 10px; padding-dreapta: 10px; frontieră: 5px} solid-

În ciuda faptului că elementul de blocare are o lățime de 200 de pixeli, va ocupa de fapt 230 de pixeli pe pagină, ținând cont de ghilimele și blaturile laterale. În mod similar, se calculează înălțimea: în loc de presupușii 100 de pixeli, blocul va ocupa o verticală de 150.

Algoritmul de bază pentru calcularea măsurătorilor vine în primul rând din importanța conținutului. Totuși, pe paginile web reale, elementele îndeplinesc adesea o funcție decorativă și dispun de conținut. În plus, este destul de obositor și plin de erori pentru a număra în mod constant suma tuturor indentărilor pentru a cunoaște dimensiunea finală.

Există o proprietate cu dimensiunea căsuței CSS care vă permite să specificați valorile finale și nu vă faceți griji că blocul se va răspândi dincolo de limitele stabilite datorită indentării interne.

Managementul algoritmului de calcul

Designer-ul de planificare poate spune browserului care casetă de blocuri ar trebui să ia ca bază pentru calcularea dimensiunilor. Proprietățile de lățime și înălțime vor fi aplicate în această zonă.

Pentru proprietatea cu dimensiune CSS box, implicit este caseta de conținut predictibilă. Dar există o valoare mai mare pentru selecție.

.bloc {dimensiunea cutiei: limita-lățimea căsuței: 100px; granița: 5px; umplutura: 10px;}

Valoarea dimensiunii în cutie: caseta de frontieră din CSS instruiește browserul să pornească de la dimensiunile elementului în ansamblu, împreună cu marginile și crestăturile interioare în zona de conținut. Dimensiunea reală a elementului bloc va fi exact 100 de pixeli, dar caseta de conținut va trebui să fie îngrozită la 70 de pixeli pe orizontală.

Ar fi logic să presupunem că proprietatea cu dimensiunea căsuței CSS are o valoare a căsuței de umplutură, dar nu este. Trebuia să fie o specificație, dar în prezent nu este implementată de browsere. Cu toate acestea, cei doi algoritmi de calcul disponibili sunt suficienți.

block1 {width: 500px; frontieră: 5px; padding: 30px; box-dimensionare: border-} block2 {cutie width: 500px; frontieră: 5px; padding: 30px;-box dimensionare: conținut} cutie

Notă pentru dimensionarea în cutie: caseta de margine vă permite să setați dimensiuni fixe care nu depind de indentarea și grosimea cadrului.

// Lățimea efectivă a blocului este de 300 pikseley.block {width: 300px; box-dimensionare: border-box-padding: 10px;} // dimensiune umplutură sa schimbat, dar dimensiunea blocului au fost prezhnimi.block {width: 300px; box-dimensionare: căptușeală de box: 15px;}

În cazul în care programatorul decide să experimenteze cu valoarea de umplutură, nu trebuie să recalculeze de fiecare dată când modificați lățimea totală a elementului, deoarece nu se schimba. Acest lucru este foarte convenabil pentru aspectul de urmărire pe termen lung.