CSS box-sizing 属性

在元素的总宽度和总高度中包括填充和边框:

#example1 {
box-sizing: border-box;
}

下面有更多实例。

定义和用法

box-sizing 定义如何计算元素的宽度和高度:是否包括填充和边框。

默认值:	content-box
继承性:	no
支持动画:	no. 阅读有关动画的信息
版本:	CSS3
JavaScript 语法:	object.style.boxSizing="border-box" 测试一下

表中的数字表示支持该属性的第一个浏览器版本。

紧跟在 -webkit- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。

属性
box-sizing	10.0 4.0 -webkit-	8.0	29.0 2.0 -moz-	5.1 3.2 -webkit-	9.5

box-sizing: content-box|border-box|initial|inherit;

值	描述
content-box	默认。指定元素的宽度和高度（最小/最大属性）适用于box的宽度和高度。元素的填充和边框布局和绘制指定宽度和高度除外
border-box	指定宽度和高度（最小/最大属性）确定元素边框。也就是说，对元素指定宽度和高度包括了 padding 和 border 。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。
initial	将此属性设置为其默认值。请参阅 initial
inherit	从其父元素继承此属性。请参阅 inherit