CSS box-sizing ominaisuus

Määrittely ja käyttö

box-sizing-ominaisuus mahdollistaa erityisellä tavalla määrittämään tietyn alueen mukaisen elementin.

Esimerkiksi, jos haluat sijoittaa kaksi rinnakkain olevaa reunaviivallista laatikkoa, voit asettaa box-sizing-arvon "border-box". Tämä mahdollistaa selaimen näyttämään laatikon, jolla on määritetyt leveys ja korkeus, ja sisältää reunaviivat ja sisennykset laatikkoon.

Katso myös:

CSS3 -opas:CSS3 käyttöliittymä

HTML DOM -viittausopas:boxSizing-ominaisuus

Esimerkki

Määritellään kaksi rinnakkaisesti sijoitettua reunaviivallista laatikkoa:

div
{
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
-webkit-box-sizing:border-box; /* Safari */
width:50%;
float:left;
}

Kokeile itse

Sivun alaosassa on lisää esimerkkejä.

CSS-kieli

box-sizing: content-box|border-box|inherit;

Ominaisuuden arvo

Arvo Kuvaus
content-box

Tämä on CSS2.1:n määräämä leveys- ja korkeus käyttäytyminen.

Leveys ja korkeus sovelletaan elementin sisällön alustaan.

Elementin sisennykset ja reunaviivat piirretään leveys- ja korkeusarvon ulkopuolelle.
border-box

Elementin asetettu leveys ja korkeus määrittävät elementin reunaviiva-alustan.

Tämä tarkoittaa, että elementille määritetyt kaikki sisennykset ja reunaviivat piirretään asetetun leveys- ja korkeusarvon sisällä.

Sisällön leveys ja korkeus saadaan vähentämällä reunaviivat ja sisennykset asetetusta leveydestä ja korkeudesta.
inherit Määritellään, että box-sizing-ominaisuuden arvo tulisi perittää isältä elementiltä.

Tekninen tarkistus

Oletusarvo: content-box
Perinnäisyys: ei
Versio: CSS3
JavaScript-kieli: object.style.boxSizing="border-box"

Selaimen tuki

Taulukossa olevat numerot viittaavat ensimmäiseen selaimen versioon, joka tukee kyseistä ominaisuutta täysin.

Numerot, jotka sisältävät -webkit- tai -moz-, osoittavat käyttämäsi eniten version.

Chrome IE / Edge Firefox Safari Opera
10.0
4.0 -webkit-		 8.0 29.0
2.0 -moz-		 5.1
3.2 -webkit-		 9.5