Velikost v CSS: izračunavanje velikosti blokov

Ko izdelujete spletne strani, je zelo pomembno, da določite dimenzije elementov. Če se bo napaka povzpela, se lahko celotna postavitev "zlomi", ki pokvari videz spletnega mesta. Da bi se izognili napakam, je pomembno natančno razumeti, kako brskalniki izračunajo meritve bloka in kako upravljati ta algoritem z uporabo CSS-ja velikosti.

Model CSS bloka

Vsa vozlišča dokumentov, ki imajo blokovno vrsto kartiranja, so opisana z modelom blokov. V skladu s tem se v strukturi elementa dodelijo naslednja področja ali polja, ki so vgrajeni drug v drugega:

• vsebinsko polje, ki vključuje dejansko vsebino besedila blokov in otroških vozlišč;
• polnilna škatla, ki zavzame celoten prostor v notranjosti okvirja skupaj z notranjimi vdolbinami ali blazinicami;
• border-box, ki vključuje tudi mejo.

Poleg tega lahko za blok določite zunanje podlage ali robove, ki jih ločujejo od sosednjih elementov ali meja staršev.

Katera koli polja so morda manjka ali prazna.

To je osnovni koncept CSS, ne da bi razumeli, kaj je za ustvarjanje čudovitih kompleksnih postavitev skoraj nemogoče.

Določitev dejanskih dimenzij elementa

Glavna stvar brskalnika je vsebina, saj je to semantični del katerega koli bloka. Torej, kadar podaja določa meritve, ki uporabljajo lastnosti širine in višine, se uporabljajo za območje vsebine.

Nadalje, glede na specifične dimenzije notranje škatle, se doda notranja in zunanja alinea ter širina okvirja.

.Blok {širina: 200px; višina: 100px; oblazinjenje polji: 20px; oblazinjenje spodaj: 20px; oblazinjenje levo: 10px; oblazinjenje desnem: 10px; meja: 5px solid-}

Kljub dejstvu, da ima blokovni element širino 200 pik, bo dejansko zasedel 230 pik na strani, ob upoštevanju okvirja in stranskih paddings. Podobno se izračuna višina: namesto domnevnih 100 slikovnih točk, bo blok zajemal navpično 150.

Osnovni algoritem za izračun meritev je predvsem pomembnost vsebine. Vendar pa na dejanskih spletnih straneh elementi pogosto opravljajo dekorativno funkcijo in ne vsebujejo vsebine. Poleg tega je precej dolgočasen in napolnjen z napakami, da neprestano šteje vsoto vseh vdolbinic, da bi vedel končno velikost.

Obstaja CSS premična lastnost, ki vam omogoča, da določite končne meritve in ne skrbite, da se bo blago razširilo izven uveljavljenih meja zaradi notranjega odlaganja.

Upravljanje algoritma za izračun

Oblikovalec postavitve lahko obvesti brskalnik, katera blokirana škatla naj bi bila osnova za izračun dimenzij. Na to območje se bodo uporabljale lastnosti širine in višine.

Za CSS lastnosti velikosti polja je privzeta predvidljiva vsebinska polja. Vendar pa je za izbiro na voljo še ena vrednost.

.blok {box-sizing: border-box-width: 100px; border: 5px; padding: 10px;}

Vrednost oblikovanja velikosti: border-box v CSS ukazuje brskalniku, da se začne z dimenzijami elementa kot celote, skupaj z robom in notranjimi zasloni na vsebino. Dejanska velikost elementa bloka bo natanko 100 pikslov, vendar mora biti njegovo polje z vsebinami horrifirano na 70 pik vodoravno.

Logično bi bilo, da domneva, da ima CSS velikost prostora velikosti polnila, vendar ni. To naj bi bila specifikacija, vendar se trenutno ne izvajajo v brskalnikih. Vendar sta oba razpoložljiva algoritma za izračun dovolj.

block1 {širina: 500px; meja: 5px; podloga: 30px; škatlasto dimenzioniranje: meja-box-} block2 {širina: 500px; meja: 5px; podloga: 30px; škatlasto velikosti: Vsebnost-box-}

Opomba za označevanje velikosti: border-box vam omogoča, da nastavite fiksne velikosti, ki ne bodo odvisne od odreza in debeline okvira.

// Dejanska širina bloka 300 pikseley.block {širina: 300px; škatlasto dimenzioniranje: meja-box-oblazinjenje: 10px;} // velikost oblazinjenje je spremenil, toda velikost bloka so prezhnimi.block {širina: 300px; skrinjici velikosti: border-box-padding: 15px;}

Če se oblikovalec postavitve odloči preskusiti vrednost paddings, pri vsaki spremembi ne bo treba preračunati celotne širine elementa, ker se ne bo spremenil. To je zelo priročno za dolgoročno sledenje.