A CSS dobozméret tulajdonsággal bármely elem méretét beállíthatjuk vagy szabályozhatjuk, amely elfogad egy widthvagy height. Meghatározza, hogyan kell kiszámítani az össz widthés heightaz elem elemét.
Ebben a cikkben elmagyarázom, hogyan használható a CSS box-sizingtulajdonsá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 divelem van, amelyek azonosak widthés height- de az első divnagyobbnak tűnik, mint a második div.
Ez elég furcsa, igaz? Mert miért rendelne bárki két divelemhez 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 divkü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 paddingvagy hozzáad borderegy 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 heighttulajdonságokat, de nem tartalmazza az paddingvagy bordertulajdonsá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 bordera karaktereket a widthés heightmá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-sizingtulajdonsággal a fent ismertetett alapértelmezett viselkedés megváltoztatható.
Ugyanazon kód használatával adjuk hozzá a box-sizingtulajdonsá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 divelem 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-boxnem veszi figyelembe az elemre megadott widthés heightmegadott értéket.
Azaz, ha meg egy elem widtha 200 pixel , majd állítsa be a határ 8 pixel , és a padding 20 pixel , a mérete a borderés paddinghozzá 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 divelemnek 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-sizingtulajdonságot a következőre állítja: a border-boxböngésző megmondja, hogy vegye figyelembe az elemeket borderés paddingrendelje 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 widtha 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 divelemnek 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-boxamikor 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: relativevagy position: absolutehasználatakor box-sizing: content-boxa 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.