CSS3 `box-sizing` 属性

说明

box-sizing CSS 属性用于更改默认的 CSS 盒子模型，浏览器通常使用它来计算元素的宽度和高度。

下表总结了此属性的使用上下文和版本历史记录。

属性的语法如下：

box-sizing:

content-box | padding-box | border-box | initial | inherit

下面的示例显示了 box-sizing 属性的作用。

.box {
    width: 50%;
    padding: 15px;
    float: left;
    border: 5px solid #000;
    box-sizing: border-box;
}

下表描述了该属性的值。

值	说明
`content-box`	指定的宽度和高度属性仅包括元素的内容。它不包括填充、边框或边距。
`padding-box`	指定的宽度和高度属性包括填充大小，不包括边框或边距。
`border-box`	指定的宽度和高度属性包括填充和边框，但不包括边距。
`initial`	将此属性设置为其默认值。
`inherit`	如果指定，则关联元素采用其父元素 `box-sizing` 属性的计算值。

所有主要的现代浏览器都支持 box-sizing 属性。

请参阅以下教程： CSS 盒子模型, CSS 维度.