box-sizing 属性
box-sizing
属性定义了应该如何计算一个元素的总宽度和总高度。
属性值
content-box
- 默认值,标准盒子模型。
width
与height
只包括内容的宽和高, 不包括边框(border),内边距(padding),外边距(margin)。注意: 内边距、边框和外边距都在这个盒子的外部。 比如说,.box {width: 350px; border: 10px solid black;}
在浏览器中的渲染的实际宽度将是 370px。
尺寸计算公式: width
= 内容的宽度height
= 内容的高度- 宽度和高度的计算值都不包含内容的边框(border)和内边距(padding)。
border-box
-
width
和height
属性包括内容,内边距和边框,但不包括外边距。这是当文档处于 Quirks模式 时Internet Explorer使用的盒模型。注意,填充和边框将在盒子内 , 例如,.box {width: 350px; border: 10px solid black;}
导致在浏览器中呈现的宽度为350px的盒子。内容框不能为负,并且被分配到0,使得不可能使用border-box使元素消失。
尺寸计算公式: width
= border + padding + 内容的宽度height
= border + padding + 内容的高度
不积跬步无以至千里