A CSS dobozméret tulajdonsággal bármely elem méretét beállíthatjuk vagy szabályozhatjuk, amely elfogad egy width
vagy height
. Meghatározza, hogyan kell kiszámítani az össz width
és height
az elem elemét.
Ebben a cikkben elmagyarázom, hogyan használható a CSS box-sizing
tulajdonság az elemek méretének szabályozására.
Előfeltételek
- Alapvető CSS ismeretek.
- Kódszerkesztő.
- Böngésző.
A CSS doboz-méretezési tulajdonság nélkül
Ha megnézi az alábbi kódrészletet, észreveszi, hogy két olyan div
elem van, amelyek azonosak width
és height
- de az első div
nagyobbnak tűnik, mint a második div
.
Ez elég furcsa, igaz? Mert miért rendelne bárki két div
elemhez ugyanazt a szélességet és magasságot, hacsak nem ideális esetben szeretné, ha ezek az elemek azonosak lennének?
Olvassa tovább, hogy megtudja, miért div
különbözik a két elem ?? ??? ?.
Alapértelmezés szerint a CSS dobozmodell kiszámít minden olyan elemet, amely szélességet vagy magasságot fogad el ebben a formátumban:
- szélesség + kitöltés + szegély = az elem dobozának renderelt vagy megjelenített szélessége.
- magasság + párnázás + szegély = az elem dobozának renderelt vagy megjelenített magassága.
Ez azt jelenti, hogy amikor hozzáad egy elemet padding
vagy hozzáad border
egy elemet, az elem mérete nagyobb lesz, mint az eredetileg hozzá rendelt méret. Ennek az az oka, hogy az elem tartalma tartalmazza a width
és height
tulajdonságokat, de nem tartalmazza az padding
vagy border
tulajdonságokat.
Még mindig nem érted? Nézze meg az alábbi kódrészletet a tényleges számítás megtekintéséhez.
.first-box { width: 200px; height: 100px; border: 8px solid blue; padding: 20px; background: yellow; /* Total width: 200px + (2 * 20px) + (2 * 8px) = 256px Total height: 100px + (2 * 20px) + (2 * 8px) = 156px */ } .second-box { width: 200px; height: 100px; border: 8px solid blue; background: yellow; /* Total width: 200px + (2 * 8px) = 216px Total height: 100px + (2 * 8px) = 116px */ }
Amint az a kódrészletben látható, a CSS hozzáadja a padding
és border
a karaktereket a width
és height
már megadottakhoz. A teljes értéket megjeleníti az elem méreteként, figyelmen kívül hagyva a tényleges méretet, amelyet az elemhez rendelt div
.
A CSS doboz-méretezési tulajdonsággal
A box-sizing
tulajdonsággal a fent ismertetett alapértelmezett viselkedés megváltoztatható.
Ugyanazon kód használatával adjuk hozzá a box-sizing
tulajdonságot, állítsuk be border-box
és nézzük meg, hogy valóban tudjuk-e szabályozni a méretet.
Bizonyára észrevette, hogy a két div
elem most azonos méretű.
Szintaxis
box-sizing:content-box; box-sizing:border-box;
tartalom-doboz
Ez a doboz méretezés tulajdonság alapértelmezett viselkedése. content-box
nem veszi figyelembe az elemre megadott width
és height
megadott értéket.
Azaz, ha meg egy elem width
a 200 pixel , majd állítsa be a határ 8 pixel , és a padding 20 pixel , a mérete a border
és padding
hozzá kell adni az utolsó tette szélességét. Ezzel az elem 200 pixelnél szélesebb lesz .
div{ box-sizing:content-box; width: 200px; border: 8px solid blue; padding: 20px; background: yellow; /* Total width: 200px + (2 * 20px) + (2 * 8px) = 256px*/ }
Amint a fenti kódrészletből látható, ennek az div
elemnek a mérete automatikusan 256 képpontosra nőtt, még akkor is, ha eredetileg 200 képpontra volt állítva.
határdoboz
Amikor a box-sizing
tulajdonságot a következőre állítja: a border-box
böngésző megmondja, hogy vegye figyelembe az elemeket border
és padding
rendelje hozzá az elem szélességét és magasságát.
Ez azt jelenti, hogy ha egy elem értékét 200 pixelre állítja be, akkor width
a 200 pixel tartalmazza az Ön által felvett szegélyeket vagy betéteket, és a tartalom mező összezsugorodik, hogy elnyelje az extra szélességet.
div{ box-sizing:border-box; width: 200px; border: 8px solid blue; padding: 20px; background: yellow; /* Total width: 200px - (2 * 20px) - (2 * 8px) = 144px*/ }
Amint az a fenti kódrészletből kiderül, ennek az div
elemnek a mérete automatikusan 144 képpontra csökkent, még akkor is, ha eredetileg 200 képpontra lett állítva.
Nézzük egyesíti mind kódrészletek és hogy pontosan miként a doboz fog kinézni content-box
, és border-box
.
Következtetés
A CSS box-sizeing tulajdonsággal megadhatja, hogy hogyan számolja ki a kód elemeinek méretét.
Az MDN szerint gyakran hasznos beállítani box-sizing
, border-box
amikor elemeket helyez el. Ez sokkal könnyebbé teszi az elemek méretének kezelését, és általában kiküszöböli azokat a buktatókat, amelyekbe belebotlhat a tartalom elrendezése közben.
Másrészt, a position: relative
vagy position: absolute
használatakor box-sizing: content-box
a pozicionálási értékek arányosak lehetnek a tartalommal és függetlenek a szegély és a kitöltési méret változásától. Néha erre vágyhat.
Ez van, srácok! Remélem, ez hasznos volt. Ha igen, kérjük, ossza meg ezt a cikket, és kövessen a Twitteren.