CSS box model - CSS box model

Krabicový model
Modul CSS Box Model úrovně 3
Boxmodell-detail.png
Model krabice CSS
Nativní jméno
Modul CSS Box Model úrovně 3
Postavení Snímek doporučení kandidáta W3C
Nejnovější verze Úroveň 3
22. prosince 2020 ( 2020-12-22 )
Organizace World Wide Web Consortium
Výbor Pracovní skupina CSS
Redaktoři
Základní standardy CSS
Doména CSS
webová stránka www .w3 .org / TR / css-box-3 /
Kaskádové styly
Koncepty
Filozofie
Nástroje
Srovnání

Ve vývoji webu se model pole CSS týká toho, jak se prvky HTML modelují v motorech prohlížeče a jak se rozměry těchto prvků HTML odvozují z vlastností CSS . Jedná se o základní koncept pro složení webových stránek HTML . Pokyny modelu pole jsou popsány webovými standardy World Wide Web Consortium (W3C), konkrétně pracovní skupinou CSS. Po většinu 90. let a počátkem roku 2000 existovaly v běžných prohlížečích nestandardní implementace modelu krabice v souladu s normami. S příchodem CSS2 v roce 1998, který tuto box-sizingvlastnost představil , byl problém většinou vyřešen.

Specifika

Specifikace kaskádových stylů (CSS) popisuje, jak se prvky webových stránek zobrazují v grafických prohlížečích. Část 4 specifikace CSS1 definuje „model formátování“, který poskytuje prvkům na úrovni bloku - například pa blockquote- šířku a výšku a tři úrovně rámečků, které jej obklopují: výplň, ohraničení a okraje. I když specifikace nikdy výslovně nepoužívá termín „box model“, tento pojem se stal široce používaným vývojáři webových stránek a prodejci webových prohlížečů.

Všechny prvky HTML lze považovat za „krabice“, to zahrnuje divznačku, pznačku nebo aznačku. Každá z těchto krabic má pět upravitelných rozměrů:

  • heighta widthpopsat rozměry skutečného obsahu pole (text, obrázky, ...)
  • paddingpopisuje prostor mezi tímto obsahem a na hranici vápna
  • borderje jakýkoliv druh vedení (pevné látky, tečkovaná, čárkovaná ...) obklopující pole, pokud je přítomen
  • marginje prostor kolem hranice

Podle specifikace CSS1, vydané W3C v roce 1996 a revidované v roce 1999, když je šířka nebo výška výslovně specifikována pro jakýkoli prvek na úrovni bloku, měla by určit pouze šířku nebo výšku viditelného prvku s polstrováním, ohraničením, a marže aplikované později. Před CSS3 byl tento krabicový model známý jako krabicový model W3C , v CSS3 je známý jako content-box.

Celková šířka krabice je tedy left-margin+ left-border+ left-padding+ width+ right-padding+ right-border+ right-margin. Podobně se celková výška pole rovná top-margin+ top-border+ top-padding+ height+ bottom-padding+ bottom-border+ bottom-margin.

Například následující kód CSS 

.myClass {
  width: 200px;
  height: 100px;
  padding: 10px;
  border: solid 10px black;
  margin: 10px;
}

by určilo rozměry pole každého bloku patřícího do „myClass“. Kromě toho bude mít každé takové pole celkovou výšku 160 px a šířku 260px.

CSS3 představil krabicový model aplikace Internet Explorer na standard, známý jako border-box.

Dějiny

Image
Rozdíl v tom, jak je šířka interpretována mezi modely boxů W3C a Internet Explorer

Před HTML 4 a CSS podporovalo velmi málo prvků HTML ohraničení i odsazení, takže definice šířky a výšky prvku nebyla příliš sporná. Liší se však v závislosti na prvku. Atribut HTML width tabulky definoval šířku tabulky včetně jejího ohraničení. Na druhou stranu atribut šířky HTML obrázku definoval šířku samotného obrázku (uvnitř libovolného ohraničení). Jediným prvkem, který podporoval výplň v těchto počátcích, byla buňka stolu. Šířka pro buňku byla definována jako „navrhovaná šířka pro obsah buňky v pixelech bez polstrování buňky.“

V roce 1996 CSS zavedlo okraj, ohraničení a výplň pro mnoho dalších prvků. Přijala definiční šířku ve vztahu k obsahu, ohraničení, okraji a odsazení podobnou té pro buňku tabulky. Od té doby se stal známým jako krabicový model W3C .

V té době jen velmi málo prodejců prohlížečů implementovalo model W3C box do písmene. V té době dva hlavní prohlížeče, Netscape 4.0 a Internet Explorer 4.0, definovaly šířku a výšku jako vzdálenost od hranice k hranici. Toto se označuje jako tradiční nebo krabicový model aplikace Internet Explorer .

Internet Explorer v „ vtipném režimu “ zahrnuje obsah, polstrování a ohraničení v rámci zadané šířky nebo výšky; to má za následek užší nebo kratší vykreslení rámečku, než jaké by následovalo po standardním chování.

Box model Internet Explorer chování bylo často považováno za chybu, kvůli způsobu, jakým starší verze Internet Exploreru zvládnout box model či velikost prvků na webové stránce, která se liší od standardním způsobem dle doporučení W3C pro kaskádové styly Jazyk tabulek . Od verze Internet Explorer 6 podporuje prohlížeč alternativní režim vykreslování (nazývaný „režim vyhovující standardům“), který tuto nesrovnalost řeší. Z důvodu zpětné kompatibility se však všechny verze ve výchozím nastavení chovají obvyklým, nestandardním způsobem (viz režim vtípky ). Internet Explorer pro Mac není tímto nestandardním chováním ovlivněn.

Řešení

Internet Explorer verze 6 a novější nejsou touto chybou ovlivněny, pokud stránka obsahuje určité deklarace typu dokumentu HTML . Tyto verze udržují chování buggy v režimu quirks z důvodu zpětné kompatibility. Například se spustí režim vtípků:

  • Když prohlášení o typu dokumentu chybí nebo je neúplné;
  • Když narazíte na dokument HTML 3 nebo starší;
  • Když se použije přechodná deklarace typu dokumentu HTML 4.0 nebo rámcová sada a není k dispozici identifikátor systému (URI);
  • Když se před deklarací typu dokumentu objeví komentář SGML nebo jiný nerozpoznaný obsah
  • Internet Explorer 6 také používá režim vtípky, pokud před deklarací typu dokumentu existuje deklarace XML .

Byla navržena různá řešení, která přinutí prohlížeč Internet Explorer verze 5 a starší k zobrazování webových stránek pomocí modelu pole W3C. Tato řešení obecně využívají nesouvisející chyby při zpracování selektoru CSS aplikace Internet Explorer, aby skryla určitá pravidla v prohlížeči. Nejznámějším z těchto řešení je „hackování boxového modelu“, které vytvořil Tantek Çelik , bývalý zaměstnanec Microsoftu, který tuto myšlenku vyvinul při práci na Internet Exploreru pro Macintosh. Zahrnuje zadání deklarace šířky pro Internet Explorer pro Windows a její přepsání jinou deklarací šířky pro prohlížeče kompatibilní s CSS. Toto druhé prohlášení je v aplikaci Internet Explorer pro Windows skryto tím, že využívá další chyby způsobem, který analyzuje pravidla CSS. Implementaci těchto „hacků“ CSS dále zkomplikovalo veřejné vydání aplikace Internet Explorer 7, která opravila některé problémy, jiné však ne, což způsobilo nežádoucí výsledky na stránkách využívajících tyto hacky.

Hacky modelu Box se ukázaly jako nespolehlivé, protože se spoléhají na chyby v podpoře CSS prohlížečů, které mohou být opraveny v pozdějších verzích. Z tohoto důvodu někteří vývojáři webu místo toho doporučili buď vyhnout se specifikaci šířky a výplně pro stejný prvek, nebo použít filtry podmíněného komentáře nebo CSS k obcházení chyby modelu pole ve starších verzích aplikace Internet Explorer.

Podpora modelu pole aplikace Internet Explorer

Webový designér Doug Bowman uvedl, že původní model pole aplikace Internet Explorer představuje lepší a logičtější přístup. Peter-Paul Koch uvádí příklad fyzického boxu, jehož rozměry vždy odkazují na samotný box, včetně případného polstrování, ale nikdy ne jeho obsahu. Říká, že tento model pole je užitečnější pro grafické designéry, kteří vytvářejí návrhy na základě viditelné šířky rámečků spíše než šířky jejich obsahu. Bernie Zimmermann říká, že krabicový model aplikace Internet Explorer je blíže definici rozměrů buňky a výplně použité v modelu tabulky HTML.

W3C zahrnoval vlastnost "box-sizing" v CSS3. Když box-sizing: border-box;je pro prvek zadán, jakékoli polstrování nebo ohraničení prvku je nakresleno uvnitř zadané šířky a výšky, „jak je běžně implementováno staršími agenty uživatelů HTML“. Internet Explorer 8 , prohlížeče WebKit, jako je Apple Safari 5.1+ a Google Chrome , prohlížeče založené na Gecko, jako je Mozilla Firefox 29.0 a novější, Opera 7.0 a novější, a Konqueror 3.3.2 a novější podporují vlastnost CSS3 box-sizing. Prohlížeče Gecko starší než 29.0 podporují stejnou funkci pomocí -moz-box-sizingvlastnosti specifické pro prohlížeč . border-boxje výchozí model pole používaný v rámci Bootstrap .

Reference

externí odkazy