Exemplu
Se specifică faptul că <div> elemente ar trebui să aibă padding și de frontieră incluse în lățime totală a elementului și înălțimea:
div {
width: 300px;
height:
100px;
border: 1px solid blue;
box-sizing: border-box;
}
Încearcă - l singur » Mai multe "Try it Yourself" - "Try it Yourself" exemplele de mai jos.
Definiție și utilizare
Proprietatea dimensionare caseta este folosit pentru a spune browser - ului ce proprietățile de dimensionare (width and height) ar trebui să includă.
În cazul în care acestea includ de frontieră-box? Sau doar conținutul-box (care este valoarea implicită a proprietăților lățime și înălțime)?
| Valoare implicită: | content-box |
|---|---|
| Mostenit: | no |
| Animatable: | no. Read about animatable |
| Versiune: | CSS3 |
| sintaxa JavaScript: | object .style.boxSizing="border-box" Try it |
Suport pentru browser-
Numerele din tabel specifica prima versiune de browser care acceptă pe deplin proprietatea.
Numerele urmat de -webkit- sau -moz- specifica prima versiune care a lucrat cu un prefix.
| Proprietate | |||||
|---|---|---|---|---|---|
| box-sizing | 10.0 4.0 -webkit- | 8 | 29.0 2.0 -moz- | 5.1 3.2 -webkit- | 9.5 |
CSS Sintaxa
box-sizing: content-box|border-box|initial|inherit;Valori de proprietate
| Valoare | Descriere |
|---|---|
| content-box | Mod implicit. Lățimea și înălțimea proprietăți (and min/max properties) include doar conținutul. Border, padding, sau marja nu sunt incluse |
| border-box | Lățimea și înălțimea proprietăților (and min/max properties) include conținut, umplutură și la frontieră, dar nu și marja |
| initial | Setează această proprietate la valoarea implicită. Citiți despre inițială |
| inherit | Mosteneste această proprietate de la elementul părinte. Citiți despre moștenesc |
Mai multe exemple
Exemplu
Se specifică două marginita laterale cutii de partea:
div
{
box-sizing: border-box;
width: 50%;
float: left;
}
Încearcă - l singur » Pagini similare
Tutorial CSS3: CSS3 Box Dimensionarea
HTML DOM referință: boxSizing property