Vlastnost CSS box-sizing
Příklad
Zahrnout odsazení a ohraničení do celkové šířky a výšky prvku:
#example1 {
box-sizing: border-box;
}
Další příklady „Vyzkoušejte si to sami“ níže.
Definice a použití
Tato box-sizing
vlastnost definuje, jak se vypočítá šířka a výška prvku: zda mají zahrnovat výplň a ohraničení, nebo ne.
Výchozí hodnota: | content-box |
---|---|
Zděděno: | Ne |
Animovatelné: | Ne. Přečtěte si o tématu Animable |
Verze: | CSS3 |
Syntaxe JavaScriptu: | objekt .style.boxSizing="border-box" |
Podpora prohlížeče
Čísla v tabulce určují první verzi prohlížeče, která plně podporuje vlastnost.
Čísla následovaná -webkit- nebo -moz- určují první verzi, která pracovala s předponou.
Property | |||||
---|---|---|---|---|---|
box-sizing | 10.0 4.0 -webkit- |
8.0 | 29.0 2.0 -moz- |
5.1 3.2 -webkit- |
9.5 |
Syntaxe CSS
box-sizing: content-box|border-box|initial|inherit;
Hodnoty vlastností
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 |
Další příklady
Příklad
Určete dvě ohraničená políčka vedle sebe:
div
{
box-sizing: border-box;
width: 50%;
border: 5px solid red;
float: left;
}
Příklad
Nastavte "univerzální velikost krabice":
* {
box-sizing: border-box;
}
Související stránky
CSS tutoriál: CSS Box Sizing
Odkaz HTML DOM: vlastnost boxSizing