盒模型 box-sizing: border-box; / content-box;

 

 

标准盒模型content-box

它的最大特点是，当已经设定了width和height值的时候，padding和border不被包含在你定义的width和height之内，也就是说，你定义的width只负责content区域的宽度，如果想得到整个盒子宽度，需要再加上padding和border的厚度。
这个content-box就是标准模型，诞生最早。content-box顾名思义，就是内容盒子。
任何浏览器默认使用的都是标准模型。

 

content-box

 

观察上图，

• 在css区 设置div宽度为100px，高度为60px；
• 在css区 设置 box-sizing: content-box
• 盒模型总content区宽度为100px，高度为60px，padding和border不占据content区。

border-box(ie 盒子模型)

boder-box

 

观察上图，

• 在css区 设置div宽度为100px，高度为60px；
• 在css区 设置 box-sizing: border-box;
• 盒模型总content区宽度为60px，高度为20px，padding和border占据content区原本的空间，padding分别占据了10px，border分别占据了10px。
  60px + 10px* 2 + 10px* 2 = 100px;
  20px + 10px* 2 + 10px* 2 = 60px;

当遵循ie盒子模型时，不管你如何设置padding和border（小于width/2），它只在盒子里面伸缩，不影响整体的宽高，这个border-box是不是在某些时候非常好用？但也不能盲目地用，因为它会影响content，如果padding和border太大，会把内容挤掉的。

总结：
box-sizing:content-box;在宽度和高度之外绘制元素的内边距和边框。
box-sizing:border-box;通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度.