CSS – 盒子模型 box-sizing

盒子模型

在默认情况下，CSS 设置的盒子宽度仅仅是内容区的宽度，而非盒子的宽度。

同样，高度类似。真正盒子的宽度（在页面呈现出来的宽度）和高度，需要加上一些其它的属性。

例如：

padding + border + width = 盒子的宽度

padding + border + height = 盒子的高度

很明显，这不直观，很容易出错，造成网页中其它元素的错误。

box-sizing

CSS3 中可以通过 box-sizing  来指定盒模型，即可指定为 content-box 、border-box ,这样我们计算盒子大小的方式就发生了改变

1.content-box : 对象的实际宽度等于设置的 width 值和 border 、padding 之和

2.border-box  : 对象的实际宽度就等于设置的 width 值，即使定义有 border 和 padding 也不会改变对象的实际宽度。