Egy pillantás a CSS3 dobozba
Nem is olyan régen, amikor létrehoztunk egy doboz egy weboldalon, mondjuk a div, megadjuk 100px mind a szélességre, mind a magasságra, majd ezt követi párnázás mert 10px és a határok 10px is.
div szélesség: 100px; magasság: 100px; párnázás: 10px; határ: 10px szilárd #eaeaea;
A böngészők a doboz méretét 140px-ra bővítik, ahol a teljes szélesség / magasság 140px-os mennyisége a hozzáadott értékből áll. párnázás és a határok alábbiak szerint; 100px [szélesség / magasság] + (2 x 10px [padding]) + (2 x 10px [határ]).
Néha azonban ez az eredmény nem az, amit elvárunk. Néha szükségünk van a dobozra, hogy mindig legyen 100px függetlenül a párnázottságtól vagy a hozzáadott határoktól.
Ahhoz, hogy egy ilyen ismétlődő problémát leküzdjünk a weblap elrendezésének létrehozásakor, használhatjuk a CSS3-at box-méretezése tulajdonsága annak ellenőrzésére, hogy a CSS doboz modell kell működnie a böngészőkben.
A doboz méretezése
A box-méretezése A tulajdonság két érték opcióval rendelkezik, először a content-box; amely az alapértelmezett érték, ha ezt az értéket használjuk, akkor a dobozmodell úgy viselkedik, ahogyan azt a fentiekben leírtuk.
A második pedig border-box, ahol a doboz mérete kerül kiszámításra a megadott tartalom méretének csökkentésével a párnával és a határokkal együtt.
div szélesség: 100px; magasság: 100px; párnázás: 10px; határ: 10px szilárd #eaeaea; doboz-méretezés: szegélydoboz; -moz-box-méretezés: szegélydoboz; / * Firefox 1-3 * / -webkit-box-méretezés: border-box; / * Safari * /
Például, ha van egy olyan doboz, mint amilyet a fentiekben leírtunk (100 px négyzet 10 pixelrel a párnázáshoz és a határokhoz), a tartalom mérete csökken 60 képpont, és a doboz teljes mérete megmarad 100px, ahol a kivonás egyenlete a következőképpen írható le; 100px [szélesség / magasság] - ((2 x 10px [padding]) + (2 x 10px [határ])).
- Demó
- Letöltés forrása
Böngésző támogatás
A box-méretezése tulajdonság minden böngészőben támogatott; Firefox 3.6+, Safari 3, Opera 8.5+ és Internet Explorer 8 és újabb.
Tehát, ha tudod, hogy a legtöbb látogató nem fogja használni az Internet Explorer 8-as verzióját, használhatja ezt a hasznos ajánlást (köszönhetően Paul Irishnek).
* box-méretezés: határoló doboz; -moz-box-méretezés: szegélydoboz; / * Firefox 1-3 * / -webkit-box-méretezés: border-box; / * Safari * /
A fenti részlet a box-méretezése a weblap összes eleméhez.
Példa
Ebben a fejezetben megmutatunk egy valós életmódot arról, hogyan tudjuk ezt kihasználni box-méretezése ingatlan. Egy egyszerű navigációt fogunk létrehozni az alábbi HTML jelölés alapján, öt link menüvel.
Ezután hozzáadunk néhány dekoratív stílust; állítsa be a navigációt rögzítse a szélességet 500px és a link szélessége 100px, majd beírja a listaelemet, és adjon meg különböző háttereket minden egyes linkmenühez, így láthatja a különbséget.
nav szélesség: 500px; margin: 50px auto 0; magasság: 50px; nav ul padding: 0; margin: 0; nav li float: balra; nav a kijelző: inline-block; szélesség: 100px; magasság: 100%; háttérszín: #ccc; szín: # 555; szöveg-dekoráció: nincs; font-család: Arial, sans-serif; betűméret: 12pt; vonalmagasság: 300%; szöveg-igazítás: központ; nav a kijelző: inline-block; szélesség: 100px; magasság: 100%; szín: # 555; szöveg-dekoráció: nincs; font-család: Arial, sans-serif; nav li: n. gyermek (1) a háttérszín: # E9E9E9; balra: 0; nav li: n. gyermek (2) a háttérszín: # E4E4E4; nav li: n-gyermek (3) a háttérszín: #DFDFDF; nav li: n. gyermek (4) a háttérszín: # D9D9D9; nav li: n-gyermek (5) a háttérszín: # D4D4D4; jobbra: 0;
Ekkor navigációnk csak normálisnak tűnik.
A probléma azonban akkor fordul elő, ha balra vagy jobbra szegélyeket adunk hozzá a link menübe.
nav a border-left: 1px szilárd #aaa; jobbra: 1px szilárd # f3f3f3;
A menü túlfolyik az alsó részre, mivel a kapcsolat szélessége már nem 100px. Most van 102px, a navigáció teljes szélessége 10px hosszabb ideig, mint a fentiekben (500px).
Ennek a problémának a leküzdéséhez alkalmazzuk a box-méretezése vagyon, az alábbiak szerint:
nav a border-left: 1px szilárd #aaa; jobbra: 1px szilárd # f3f3f3; doboz-méretezés: szegélydoboz; -moz-box-méretezés: szegélydoboz; -webkit-box-méretezés: szegélydoboz;
- Demó
- Letöltés forrása
További irodalom
És végül, ha a kalandvágyó típus, és mélyebbre szeretné ásni ezt a témát, összeállítottunk néhány kiválasztott referenciát Önnek:
- A CSS Box Model - Tech Köztársaság megértése
- Doboz méretezés hiba a Firefoxban - BugZilla
- Box-méretezés FTW - Paul ír
