Velikost pole v CSS: výpočet velikosti bloku

Při vytváření webových stránek je velmi důležité specifikovat rozměry prvků. Pokud dojde k chybě, může se celé rozložení "zlomit" a poškozovat vzhled stránky. Abyste se vyhnuli chybám, je důležité přesně porozumět tomu, jak prohlížeče vypočítají metriky bloků a jak tento algoritmus spravovat pomocí vlastnosti CSS box-size.

CSS blokový model

Všechny uzly dokumentu, které mají blokový typ mapování, jsou popsány blokovým modelem. Podle toho jsou v konstrukci prvku přiděleny následující oblasti nebo krabice, které jsou vloženy do sebe:

• obsah-box, který obsahuje skutečný obsah bloku - text a podřízené uzly;
• polštářová kazeta, která zabírá celý prostor uvnitř rámu spolu s vnitřními zářezy nebo výplněmi;
• hraniční rámeček, který zahrnuje i samotný okraj.

Navíc pro blok můžete definovat vnější zarážky nebo okraje, které je oddělují od sousedních prvků nebo hranic nadřazeného objektu.

Všechna uvedená pole mohou být chybějící nebo prázdné.

To je základní pojetí CSS, bez pochopení, které vytváří krásné komplexní uspořádání je téměř nemožné.

Určení skutečných rozměrů prvku

Nejdůležitější pro prohlížeč je obsah-box, protože je to sémantická část libovolného bloku. Proto když layouter určuje metriky pomocí vlastností šířky a výšky, použijí se na oblast obsahu.

Dále, ke specifickým rozměrům vnitřní krabice, jsou přidány vnitřní a vnější zarážky a šířka rámu.

.blok {šířka: 200px; výška: 100 pixelů; padding-top: 20 pixelů; padding-bottom: 20 pixelů; padding-vlevo: 10px; padding-right: 10px; border: 5px na pevné}

Přes skutečnost, že blokový prvek má šířku 200 pixelů, ve skutečnosti bude na stránce zaujímat 230 pixelů, přičemž se vezme v úvahu rám a boční výplně. Podobně se vypočítá výška: namísto předpokládaných 100 pixelů bude blok zabírat vertikální hodnotu 150.

Základní algoritmus pro výpočet metriky vychází především z významu obsahu. Na skutečných webových stránkách však prvky často vykonávají dekorativní funkci a neobsahují obsah. Kromě toho je poměrně únavné a plné chyb, které neustále počítá součet všech zářezů, aby se zjistila konečná velikost.

K dispozici je vlastnost CSS pro dimenzování boxů, která umožňuje zadat konečné metriky a nemusíte se obávat, že se blok rozloží mimo stanovené hranice kvůli interní odsazení.

Řízení výpočtového algoritmu

Návrhář rozvržení může řečníkovi říct, který blok bloku by měl brát jako základ pro výpočet rozměrů. Na tuto oblast budou použity vlastnosti šířky a výšky.

Pro CSS box-size vlastnost je výchozí předvídatelný obsah-box. Existuje však ještě jedna volba pro výběr.

.blok {velikost-velikost rámečku: šířka rámečku: 100px; okraj: 5px; polstrování: 10px;}

Hodnota velikosti schránky: rámeček v CSS instruuje prohlížeč, aby začínal od rozměrů prvku jako celku, spolu s okrajem a vnitřními zarážkami do oblasti obsahu. Skutečná velikost elementu bloku bude přesně 100 pixelů, ale obsah boxu bude muset být horší na 70 pixelů vodorovně.

Bylo by logické předpokládat, že vlastnost velikosti CSS boxu má hodnotu polštářku, ale není. Mělo to být specifikace, ale v tuto chvíli není implementována prohlížečem. Nicméně dva dostupné výpočtové algoritmy stačí.

block1 {šířka: 500px; border: 5px; padding: 30PX; skříňového velikosti: border-skříňovými} block2 {šířka: 500px; border: 5px; padding: 30PX; skříňového dimenzování: obsah, se skříňovými}

Poznámka k rozměru v krabičce: rámeček umožňuje nastavit pevné velikosti, které nebudou záviset na odsazení a tloušťce rámečku.

// Skutečná velikost bloku je 300 pikseley.block {šířka: 300 pixelů; skříňového velikosti: border-box-padding: 10px;} // velikost vycpávky se změnilo, ale velikost bloku byly prezhnimi.block {šířka: 300 pixelů, box-sizing: okrajová polstrování: 15px;}

Pokud se konstruktér rozvržení rozhodne experimentovat s hodnotou paddings, nemusí každou změnu přepočítat celkovou šířku elementu, protože se nezmění. To je velmi výhodné pro dlouhodobé rozvržení sledování.