CSS3 box-sizing property
Examples
Two boxes designated border:
{
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
width:50%;
float:left;
}
Browser Support
Figures in the table represent the first browser to support the version number of the property.
Immediately following the digital -webkit-, -ms- or -moz- ago in support of the prefix attribute first browser version number.
属性 | |||||
---|---|---|---|---|---|
box-sizing | 10.0 4.0 -webkit- |
8.0 | 29.0 2.0 -moz- |
5.1 3.2 -webkit- |
9.5 |
Attribute definitions and instructions
box-sizing property allows you to define certain elements in some way to adapt to the designated area.
For example, if you need to place two side by side with a border box by the box-sizing to "border-box". This can make the browser showing a box with the specified width and height, and the border, and padding into the box.
Defaults: | content-box |
---|---|
inherit: | no |
version: | CSS3 |
JavaScript syntax: | object .style.boxSizing = "border-box" |
grammar
value | Explanation |
---|---|
content-box | This is the behavior of the width and height specified CSS2.1. Width and height (min / max attribute) specified element suitable for box width and height. Padding and borders, and drawing layouts specify the width and height of the element except |
border-box | Specifies the width and height (min / max attribute) to determine the element's border box. In other words, the elements specified width and height including the designation of the padding and border. Width and height of the content minus the respective sides of the border and fill is calculated from the width "width" and "height" attribute specified |
inherit | Value specifies the box-sizing property should be inherited from the parent element |
related articles
CSS3 tutorial: CSS3 the User Interface