Kutija u CSS-u: izračunavanje veličina bloka

Kada napravite web stranice, vrlo je važno odrediti dimenzije elemenata. Ako se pogreška pokaže, cijeli izgled može "prekinuti", kvarenje izgleda web mjesta. Da biste izbjegli pogreške, važno je točno razumjeti način na koji preglednici izračunavaju mjerne podatke o blokovima i kako upravljati algoritmom pomoću entiteta CSS veličine okvira.

CSS blok model

Svi čvorovi dokumenata koji imaju blok vrstu kartiranja opisani su pomoću blok modela. Prema njemu, u strukturi elementa dodjeljuju se sljedeća područja ili kutije međusobno ugniježđene:

• okvir za sadržaj, koji uključuje stvarni sadržaj blok-teksta i dječjih čvorova;
• kutija za ispune, koja zaokuplja cijeli prostor unutar okvira zajedno s unutarnjim uvlačenjem ili paddings;
• granični okvir, koji također uključuje i granicu.

Osim toga, za blok možete definirati vanjske uvlake ili margine koje ga odvajaju od susjednih elemenata ili granica roditelja.

Bilo koja od navedenih okvira možda nedostaje ili je prazna.

To je osnovni koncept CSS-a, bez razumijevanja za stvaranje prekrasnih složenih izgleda gotovo je nemoguće.

Određivanje stvarnih dimenzija elementa

Glavna stvar za preglednik je sadržajna kutija, jer je to semantički dio svakog bloka. Stoga, kada uređivač navodi mjerne podatke koji koriste svojstva širine i visine, primjenjuju se na područje sadržaja.

Nadalje, na specifične dimenzije unutarnje kutije dodaju se unutarnja i vanjska udubljenja i širina okvira.

.blok {širina: 200px; visina: 100piks; padding-top: 20px; padding-bottom: 20px; padding lijevom: 10px; padding-desno: 10px; granica: 5px pomoću čvrste}

Unatoč činjenici da blok elementu daje širinu od 200 piksela, zapravo će zauzimati 230 piksela na stranici, uzimajući u obzir okvir i bočne podloge. Slično tome izračunava se visina: umjesto pretpostavljenih 100 piksela, blok će zauzimati vertikalnu vrijednost od 150.

Osnovni algoritam za izračun mjernih podataka dolazi prvenstveno od važnosti sadržaja. Međutim, na stvarnim web stranicama, elementi često obavljaju dekorativnu funkciju i ne sadrže sadržaj. Osim toga, prilično je dosadan i pun pogrešaka za stalno brojanje zbroja svih utiskivanja kako bi se znalo konačnu veličinu.

Postoji CSS veličina okvira za dimenziju koja vam omogućuje određivanje konačnih mjernih podataka i ne brinite se da će se blok proširiti izvan utvrđenih granica zbog unutarnjeg uvlačenja.

Upravljanje računskim algoritmom

Dizajner izgleda može reći pregledniku koji blok okvir za blokiranje trebao bi uzeti kao osnovu za izračunavanje dimenzija. Svojstva širine i visine primijenit će se na ovo područje.

Za CSS box-dimenzioniranje svojstvo, zadano je predvidljivi sadržajni okvir. No, postoji još jedna vrijednost koja je dostupna za odabir.

.blok {box-size: width-box-width: 100px; granica: 5px; padding: 10px;}

Vrijednost veličine okvira: granična okvira u CSS upućuje preglednik da započne s dimenzijama elementa kao cjeline, zajedno s granicom i unutarnjim uvlačenjem u područje sadržaja. Stvarna veličina blok elementa bit će točno 100 piksela, ali njegov sadržajni okvir mora biti zaprepašten do 70 piksela vodoravno.

Bilo bi logično pretpostaviti da imovina CSS box-size ima vrijednost padding box-a, ali to nije. To je trebalo biti specifikacija, ali trenutačno ga ne provode preglednici. Međutim, dva dostupna algoritma za izračun su dovoljna.

block1 {širina: 500px; granica: 5px; padding: 30px; kutije dimenzioniranje: granica-Box} block2 {širina: 500px; granica: 5px; padding: 30px; kutije veličine: sadržaj-Box}

Napomena za veličinu okvira: granični okvir omogućuje postavljanje nepomičnih veličina koje ne ovise o uvlačenju i debljini okvira.

// Stvarna širina bloka 300 pikseley.block {širina: 300; kutije dimenzioniranje: granica-box-padding: 10px;} // Veličina obloge je promijenjen, ali su veličine bloka prezhnimi.block {širina: 300, veličine kutije: granični kutija za ispune: 15px;}

Ako dizajner izgleda odlučuje eksperimentirati s vrijednošću paddings, on ne mora ponovo izračunati ukupnu širinu elementa sa svakom promjenom, jer se neće promijeniti. Ovo je vrlo pogodno za dugoročno praćenje izgleda.