box-sizing
CSS
property sets how the total width and height of an element is calculated.
By default in the
CSS box model
，
width
and
height
you assign to an element is applied only to the element's content box. If the element has any border or padding, this is then added to the
width
and
height
to arrive at the size of the box that's rendered on the screen. This means that when you set
width
and
height
, you have to adjust the value you give to allow for any border or padding that may be added. For example, if you have four boxes with
width: 25%;
, if any has left or right padding or a left or right border, they will not by default fit on one line within the constraints of the parent container.
box-sizing
property can be used to adjust this behavior:
content-box
gives you the default CSS box-sizing behavior. If you set an element's width to 100 pixels, then the element's content box will be 100 pixels wide, and the width of any border or padding will be added to the final rendered width, making the element wider than 100px.
border-box
tells the browser to account for any border and padding in the values you specify for an element's width and height. If you set an element's width to 100 pixels, that 100 pixels will include any border or padding you added, and the content box will shrink to absorb that extra width. This typically makes it much easier to size elements.
注意：
It is often useful to set
box-sizing
to
border-box
to layout elements. This makes dealing with the sizes of elements much easier, and generally eliminates a number of pitfalls you can stumble on while laying out your content. On the other hand, when using
position: relative
or
position: absolute
, use of
box-sizing: content-box
allows the positioning values to be relative to the content, and independent of changes to border and padding sizes, which is sometimes desirable.
box-sizing
property is specified as a single keyword chosen from the list of values below.
content-box
width
and
height
properties include the content, but does not include the padding, border, or margin. For example,
.box {width: 350px; border: 10px solid black;}
renders a box that is 370px wide.
border-box
width
and
height
properties include the content, padding, and border, but do not include the margin. Note that padding and border will be inside of the box. For example,
.box {width: 350px; border: 10px solid black;}
renders a box that is 350px wide, with the area for content being 330px wide. The content box can't be negative and is floored to 0, making it impossible to use
border-box
to make the element disappear.
| 初始值 |
content-box
|
|---|---|
| 适用于 | all elements that accept width or height |
| 继承 | no |
| 计算值 | 如指定 |
| 动画类型 | discrete |
content-box | border-box
This example shows how different
box-sizing
values alter the rendered size of two otherwise identical elements.
<div class="content-box">Content box</div> <br> <div class="border-box">Border box</div>
div {
width: 160px;
height: 80px;
padding: 20px;
border: 8px solid red;
background: yellow;
}
.content-box {
box-sizing: content-box;
/* Total width: 160px + (2 * 20px) + (2 * 8px) = 216px
Total height: 80px + (2 * 20px) + (2 * 8px) = 136px
Content box width: 160px
Content box height: 80px */
}
.border-box {
box-sizing: border-box;
/* Total width: 160px
Total height: 80px
Content box width: 160px - (2 * 20px) - (2 * 8px) = 104px
Content box height: 80px - (2 * 20px) - (2 * 8px) = 24px */
}
| 规范 | 状态 | 注释 |
|---|---|---|
|
CSS Basic User Interface Module Level 3
The definition of 'box-sizing' in that specification. |
推荐 | 初始定义。 |
| Desktop | Mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
box-sizing
|
Chrome
完整支持
10
注意事项
|
Edge 完整支持 12 |
Firefox
完整支持
29
|
IE
完整支持
8
注意事项
|
Opera 完整支持 7 | Safari 完整支持 5.1 |
WebView Android
完整支持
4
注意事项
|
Chrome Android
完整支持
18
注意事项
|
Firefox Android
完整支持
29
|
Opera Android
完整支持
14
注意事项
|
Safari iOS 完整支持 6 |
Samsung Internet Android
完整支持
1.0
注意事项
|
padding-box
弃用
非标
|
Chrome 不支持 No | Edge 不支持 No | Firefox 不支持 1 — 50 | IE 不支持 No | Opera 不支持 No | Safari 不支持 No | WebView Android 不支持 No | Chrome Android 不支持 No | Firefox Android 不支持 4 — 50 | Opera Android 不支持 No | Safari iOS 不支持 No | Samsung Internet Android 不支持 No |
完整支持
不支持
非标。预期跨浏览器支持较差。
弃用。不要用于新网站。
见实现注意事项。
用户必须明确启用此特征。
要求使用供应商前缀或不同名称。