关于box-sizing布局

在讲box-sizing属性之前，我们讲一下盒子模型：

css的盒子模型包括外边距(margin)、边框(padding)、内边距(padding)、元素内容(content)，如下图

在页面上呈现的盒子的宽度和高度为：

width = content + padding + border

height = content + padding + border

例如，我们设置一个div的width为100px,border为10px，padding为10px，则实际显示的盒子的width = 120px,而非100px；在默认情况下我们设置的widht指的是content的宽度，而非盒子的宽度。

如果我们要设置一个盒子的宽度而不仅仅是content的宽度，则我们可以通过使用box-sizing样式来得到想要的效果。

 

box-sizing

语法：box-sizing: content-box|border-box|inherit:

(1) content-box, 默认值，可以设置元素内容框的宽度和高度，即盒子的宽高只包含内容：

宽度= border + padding + width

高度= border + padding + height

(2) border-box, 设置盒子的width/height值其实是border + padding + content 的总宽度/高度。

(3) inherit, 规定box-sizing属性的值从父元素中继承下来。

 

以上提到过，默认情况下盒子的宽高 = content的宽高，但是当我们在元素上设置box-sizing: border-box后，盒子的宽高 = content + padding + border;

当我们设置width值为400px,box-sizing: border-box时，盒子的宽度实际为400px；而

当我们设置width值为400px,box-sizing: content-box时，盒子的宽度实际为430px

 

对于box-sizing的兼容性