Vezérlő doboz modellt css
Alkotó boksz vagy sem, és milyen típusú a doboz függ jelölőnyelv. CSS célja egy eljárás formázó HTML-dokumentumokat, így a modell CSS vizuális megjelenítés nagyrészt gyökerezik a különbség blokk és inlaynovymi elemek HTML-ben. Alapértelmezésben az elemek p és listájában létre egy blokk szintű dobozok és címkéket a tartománynál és em létre inlaynovye dobozok. SVG nem használja a blokk modell, így a legtöbb CSS tulajdonságok a bábu nem működik SVG.
blokk szintű dobozok új tartalom létrehozására blokkok, amint azt a 4.1 ábra. Blokk dobozok függőleges renderelési az eredeti sorrendben, és tele van (kivéve asztalok) teljes szélességében a tartályba. Ez a szokásos blokk-leképezési értékek, lista-elem, asztalra vagy más asztal- * értékeket (például táblázat-sejt).
Ábra 4.1. blokk szintű doboz tag h1, p, ul és az asztal a tartály (szürke terület)
inlaynovogo szintű dobozok nem képezik az új blokkok tartalmát. Ezek a dobozok hozzon létre egy sort egy blokkon belül dobozban. Ezek jelennek meg vízszintesen és töltse ki a szélessége a doboz tartály, beugrott új vonalak szükség, amint azt a 4.2 ábra. By inlaynovogo szinten dobozok ingatlan értékének megjelenítésére inline, inline-block, inline-table és rubin.
4.2 ábra. Példa inlaynovogo doboz margin: 1em és padding: 5px
De hogyan kerül kiszámításra a méret boksz? Ez az, ahol a dolgok érdekessé. 4.3 ábra mutatja, hogy áll doboz méretű tartalmi terület padding'a és szélessége, valamint a szélessége a keret meghatározott CSS2. Szélesség margin'a létrehoz egy elem margin-boksz és befolyásolja a többi elem a dokumentumban, de nem befolyásolja a méret a doboz is.
4.3 ábra. blokk modell CSS 2.1
Például p címke szélesség: 300px, padding: 20px és határ: 10px lesz számított szélessége 360px. A szélessége az összeg a szélessége a rész, a bal és a jobb párnázottak, és a bal és jobb border-width. Ahhoz, hogy a teljes szélesség az elem volt 300px, miközben 20px Betét 10 pixel és keretek, beállításához szükséges szélesség: 240px. A legtöbb böngésző szélességének számításához ezen a módon. De ez nem vonatkozik a IE 5.5.
IE 5.5 használja a width tulajdonság, mint a végső érték a mérete a boksz, arra kényszerítve a párnázat és a keret a doboz belsejében, amint azt a 4.4 ábra. Mindkét értékeket kivonjuk a szélessége, csökkenti a méretét a tartalom területen. Sok programozó úgy vélik, hogy ez lenne ésszerűbb, annak ellenére, hogy ez nem működik a leírás.
4.4 ábra A blokk modell CSS 2.1 és a blokk modell a régi IE 5.5
A CSS munkacsoport bemutatott ingatlan box-méretezés, például egy részleges módozatai a konkurens modellek. Ez lehetővé teszi, hogy válasszon a végrehajtását a blokk modell, és nagyban megkönnyíti a számítást, ha dolgozik, adaptív kialakítású.
Kiválasztása a blokk modell segítségével az ingatlan doboz méretezése
box-méretezés tulajdonság határozza meg a CSS Basic User Interface Module Level 3 leírás, és úgy két lehetséges érték: content-box és a határ-box.
Az alapértelmezett érték tartalom-box. Ezzel értéke szélessége és magassága tulajdonságait befolyásolja a méret a tartalom területen, amely egybeesik az ismertetett viselkedés a CSS 2.1 specifikáció. Ez az alapértelmezett viselkedés a modern böngészők (amint azt a 4.4 ábra).
Az érték a határ-box ad egy kis varázslat. A szélesség és magasság kezdik alkalmazni, hogy a külső határát a keret, és nem a tartalom területet. A keret és a padding elemet készítik a dobozban, amely egybeesik a régi viselkedés IE 5.5. Nézzünk egy példát, amelyben a szélessége százalékban kombinált px és padding a keret:
Ahhoz, hogy meg kell jelölni és a cikk félre alkalmazott CSS-kód alatti, ami számunkra az elrendezés ábrán látható 4.5, ha az első elem szélessége 60%, míg a második - 40%:
Ábra 4.5. elemek egy doboz méretezés: content-box
Alapértelmezett cikk félre, és állítsa doboz méretezése ingatlan értékének tartalom-box. Értékek border-width, és padding adunk a szélessége 40 képpont elemek, amely megváltoztatja az arány 60% / 40%. Nézzük hozzá a trágár cikket, és félre ingatlan box-méretezés: border-box:
Változások ábrán láthatók 4.6: a szélessége a elemek megmarad, hanem azért, mert a doboz-méretezési: határ-box szélessége most is áll, egy keret és a kitöltés. Szélesség épp most kezdik alkalmazni a külső oldalán a keret, és nem a tartalom terület, így a tételek szorosan egymáshoz szorítva, és nem mozdult egy új sort.
Ábra 4.6 A elemei egy doboz-méretezés: border-box
Azt javasoljuk, hogy használja a doboz méretezése ingatlan: border-box. Ez könnyebbé teszi az életet, akkor nem kell számítani a szélesség, fit szélesség béléssel és határon.
A legjobb, ha alkalmazza a box-méretezés: border-box kisülési előírásoknak. Az alábbi példa veszünk egy cikket Chris Koyera CSS-trükkök «öröklés box-méretezés, talán még a legjobb gyakorlatok":
A fenti kód használja a határ-box minden alapértelmezett címkéket megváltoztatása nélkül viselkedését doboz méretezése a meglévő részei a projekt. Ha pontosan tudja, hogy mit nem kell harmadik fél, vagy a régi elemek támaszkodnak tartalom-box, ezeket a szabályokat egyszerűsíteni lehet:
4.1 táblázat mutatja, a jelenlegi böngészők támogatják ingatlan doboz mérete: border-box
blokkolják irányítási modellbe - ez csak az egyik összetevője a megértése, hogy az összetett elrendezés. A következő részben fogjuk elemezni a réteges elemeket.
Felülvizsgálat: Team webformyself.
A legtöbb IT hírek és webfejlesztés A csatorna-távirat