Katsokaa CSS3-ruutuun

Tämä artikkeli on osa meidän "HTML5 / CSS3-oppaiden sarja" - omistettu auttamaan sinua parantamaan suunnittelijaa ja / tai kehittäjää. Klikkaa tästä nähdä lisää saman sarjan artikkeleita.

Ei niin kauan sitten, kun luot a laatikko Web-sivulla, sanotaan a div, määrittelemme 100px sekä leveyden että korkeuden osalta täyte varten 10px ja rajoja noin 10px yhtä hyvin.

 div leveys: 100px; korkeus: 100px; pehmuste: 10px; raja: 10px kiinteä #eaeaea;

Selaimet laajentavat laatikon kokoa 140px: iin, jolloin tämä määrä 140px koko leveydestä / korkeudesta muodostuu lisäyksestä täyte ja rajoja seuraavasti; 100px [leveys / korkeus] + (2 x 10px [pehmuste]) + (2 x 10px [reunus]).

Joskus tämä tulos ei kuitenkaan ole se, mitä odotamme sen olevan. Joskus tarvitaan laatikko aina 100px riippumatta pehmusteesta tai lisätyistä rajoista.

Jotta voit korjata tällaisen toistuvan ongelman, kun luot verkkosivun asettelua, voimme käyttää CSS3: ta box-mitoitus omaisuutta hallita miten CSS-laatikkomalli pitäisi toimia selaimissa.

Käyttämällä laatikkokokoa

box-mitoitus omaisuudella on kaksi arvovaihtoehtoa content-box; joka on oletusarvo, käytettäessä tätä arvoa laatikkomalli käyttäytyy kuten edellä on kuvattu.

Ja toinen on border-box, jossa laatikon koko lasketaan vähentämällä määritetyn sisällön koko kanssa pehmuste ja reunat lisätty.

 div leveys: 100px; korkeus: 100px; pehmuste: 10px; raja: 10px kiinteä #eaeaea; laatikon koko: raja-laatikko; -moz-box-mitoitus: raja-laatikko; / * Firefox 1-3 * / -webkit-laatikko-koko: raja-laatikko; / * Safari * /

Esimerkiksi, kun meillä on laatikko, kuten edellä kuvattiin (100kpl neliö 10 pikseliä pehmusteille ja reunuksille), sisällön koko laskee 60px, ja laatikon koko on edelleen 100px, jossa vähennyksen yhtälö voidaan kuvata seuraavasti; 100px [leveys / korkeus] - ((2 x 10px [pehmuste]) + (2 x 10px [reunus])).

esittely
Lataa lähde

Selaimen tuki

box-mitoitus omaisuus on tuettu kaikissa selaimissa; Firefox 3.6+, Safari 3, Opera 8.5+ ja Internet Explorer 8 ja uudemmat.

Jos tiedät, että useimmat kävijät eivät käytä Internet Explorerin versioita alla 8, voit käyttää tätä hyödyllistä suositusta (kiitos Paul Irish).

 * box-sizing: raja-laatikko; -moz-box-mitoitus: raja-laatikko; / * Firefox 1-3 * / -webkit-laatikko-koko: raja-laatikko; / * Safari * /

Yllä oleva katkaisu soveltaa box-mitoitus omaisuutta kaikille verkkosivusi elementteille.

esimerkki

Tässä osassa esitämme sinulle todellisen elämän esimerkin siitä, miten voimme hyödyntää tätä box-mitoitus omaisuutta. Luomme yksinkertaisen navigoinnin, joka perustuu alla olevaan HTML-merkintään ja jossa on viisi linkkivalikkoa.

  Valikko 1
 Valikko 2
 Valikko 3
 Valikko 4
 Valikko 5

Sitten lisätään joitakin koristeellisia tyylejä; määritä navigointi korjaa leveys 500px ja linkin leveys 100px, liitä sitten luettelorakenne ja anna jokaiselle linkkivalikosta erilaisia taustoja, jotta näet niiden välisen eron.

 nav leveys: 500px; marginaali: 50px auto 0; korkeus: 50px;  nav ul pehmuste: 0; marginaali: 0;  nav li float: vasen;  nav a näyttö: inline-block; leveys: 100px; korkeus: 100%; taustaväri: #ccc; väri: # 555; teksti-koristelu: ei; font-perhe: Arial, sans-serif; kirjasinkoko: 12pt; linjan korkeus: 300%; text-align: center;  nav a näyttö: inline-block; leveys: 100px; korkeus: 100%; väri: # 555; teksti-koristelu: ei; font-perhe: Arial, sans-serif;  nav li: n-lapsi (1) a taustaväri: # E9E9E9; vasemmalla puolella: 0;  nav li: n-lapsi (2) a taustaväri: # E4E4E4;  nav li: n-lapsi (3) a taustaväri: #DFDFDF;  nav li: n-lapsi (4) a taustaväri: # D9D9D9;  nav li: n-lapsi (5) a taustaväri: # D4D4D4; raja-oikea: 0;

Tässä vaiheessa navigointi näyttää vain normaalilta.

Ongelma tulee kuitenkin, kun lisäät vasemman tai oikean reunan linkkivalikkoon.

 nav a border-left: 1px solid #aaa; raja-oikea: 1kpl kiinteä # f3f3f3;

Valikko ylivirtaa pohjaan, koska linkin leveys ei enää ole 100px. Se on nyt 102px, navigoinnin kokonaisleveys on 10px pidempään kuin olemme määrittäneet edellä (500px).

Tämän ongelman ratkaisemiseksi meidän on sovellettava box-mitoitus omaisuutta seuraavasti:

 nav a border-left: 1px solid #aaa; raja-oikea: 1kpl kiinteä # f3f3f3; laatikon koko: raja-laatikko; -moz-box-mitoitus: raja-laatikko; -webkit-box-sizing: raja-laatikko;

esittely
Lataa lähde

Lue lisää

Ja lopuksi, jos olet seikkailunhaluinen tyyppi ja haluat kaivaa syvemmälle tähän aiheeseen, olemme koonneet muutamia valittuja viitteitä sinulle:

CSS Box -mallin ymmärtäminen - Tech Republic
Firefoxissa - BugZilla-laatikkokoko
FTW - Paul irlantilainen