Pri navrhovaní webových stránok je veľmi dôležitá presná indikácia veľkosti položiek. Ak výpočet zlyhá, celé usporiadanie sa môže "zlomiť" a poškodiť vzhľad stránky. Aby nedošlo k chybám, je dôležité pochopiť, ako prehliadačoch vypočíta metrické jednotky a ako zvládnuť tento algoritmus, ktorý používa vlastnosti CSS box-sizing.
Blok Model CSS
Všetky súčasti dokumentu s displejom typu blok popísaný blok model. Podľa toho, sú štruktúrne prvky sú spojené priemysel, alebo krabice, vnorené:
, obsahu-box, ktorá zahŕňa skutočný obsah blok - textové a podriadené uzly;
výplň-box, ktorý zaberá celý priestor vo vnútri rámu s vnútornými ustúpi alebo paddynhamy;
hraničná políčka obsahuje aj samotnú hranicu.
Okrem toho, pre blok môže definovať okraje, alebo marhynы oddelenie od susedných buniek alebo limity rodičia. Ktorékoľvek z uvedených políčok môže byť neprítomné alebo prázdne.
Toto je základný koncept CSS, bez ktorého je takmer nemožné vytvoriť krásne komplexné usporiadanie.
Definícia skutočného vyhotovenia veľkosti
Hlavnou náplňou je prehliadač-box, pretože je zmysluplné súčasťou každého bloku. Preto keď inštalátor určuje metriky pomocou vlastností šírky a výšky, vzťahujú sa presne na obsah. Okrem toho sa vnútorné a vonkajšie odrážky a šírka rámu pridávajú do určitých vnútorných rozmerov krabice.
Napriek skutočnosti, že prvok bloku je nastavený na šírku 200 pixelov, skutočne zaberie 230 pixelov na stránke, berúc do úvahy rám a bočné polstrovanie. Podobne sa vykoná výpočet výšky: namiesto očakávaných 100 pixelov jednotka bude trvať až 150 vertikálne.
