CSS -boksgrootte Eiendom
Voorbeeld
Sluit opvulling en rand in die element se totale breedte en hoogte in:
#example1 {
box-sizing: border-box;
}
Meer "Probeer dit self" voorbeelde hieronder.
Definisie en gebruik
Die box-sizing
eienskap definieer hoe die breedte en hoogte van 'n element bereken word: moet dit opvulling en grense insluit, of nie.
Standaard waarde: | inhoud-boks |
---|---|
Geërf: | geen |
Animateerbaar: | geen. Lees oor animeerbaar |
Weergawe: | CSS3 |
JavaScript-sintaksis: | voorwerp .style.boxSizing="border-box" |
Blaaierondersteuning
Die nommers in die tabel spesifiseer die eerste blaaierweergawe wat die eiendom ten volle ondersteun.
Nommers gevolg deur -webkit- of -moz- spesifiseer die eerste weergawe wat met 'n voorvoegsel gewerk het.
Property | |||||
---|---|---|---|---|---|
box-sizing | 10.0 4.0 -webkit- |
8.0 | 29.0 2.0 -moz- |
5.1 3.2 -webkit- |
9.5 |
CSS-sintaksis
box-sizing: content-box|border-box|initial|inherit;
Eiendomswaardes
Value | Description |
---|---|
content-box | Default. The width and height properties (and min/max properties) includes only the content. Border and padding are not included |
border-box | The width and height properties (and min/max properties) includes content, padding and border |
initial | Sets this property to its default value. Read about initial |
inherit | Inherits this property from its parent element. Read about inherit |
Meer voorbeelde
Voorbeeld
Spesifiseer twee omringde bokse langs mekaar:
div
{
box-sizing: border-box;
width: 50%;
border: 5px solid red;
float: left;
}
Voorbeeld
Stel die "universele boksgrootte":
* {
box-sizing: border-box;
}
Verwante bladsye
CSS handleiding: CSS Box Sizing
HTML DOM verwysing: boxSizing eiendom