盒模型的过往

CSS在诞生之初，盒模型的工作机制默认如下：

【设置的宽度】：width + padding + border = actual visible/rendered width of an element's box
【设置的高度】：height + padding + border = actual visible/rendered height of an element's box

如此可见，我们在CSS中设置一个width或height属性，如果这个属性有任何的padding或是border，最终绘制在视图上盒子的宽高（即实际可见的宽高）会加上我们设置的border与padding值。

这是相当反直觉的设计，因为最终呈现在屏幕上的盒子宽高与我们心目中预想的宽高有出入！这也在实际布局中造成了麻烦，这意味着我饿每年在调整宽高时必须时刻注意着元素的边框和内边距！

但是在早些版本的IE浏览器（<=IE6）则采取了截然不同的处理方案，我们称之为怪异模式，他的工作机制如下：

box width = actual visible/rendered width of an element's box
box height = actual height/rendered height of an element's box

border和padding值所占的几何空间被移入了我们给出的宽高中，因此实际可见的盒子并不会扩大，而是在内部解决边距、边框和内容区的计算。

在实际布局中，如果是固定宽度布局，就算是在默认的盒子模型下也不会给我们造成太大的麻烦，只需要做一些简单的算术运算就可以把宽高计算出来，来适应其内边距和边框。然而，宽高的算数值在响应式设计之下则是无从计算的。

在响应式设计已经占据绝对主流的今天，在设计师和工程师的期盼下，一种受到W3C官方认可的盒子模型应运而出。

Box-sizing

CSS3的发布正式带出了box-sizing，它自带了三个属性值：box-sizing，padding-sizing和border-box。其中，最常用的便是border-box。

目前所有浏览器默认的盒模型均是：

width or height + padding + border = actual width or height

通过box-sizing: border-box;使盒模型修改为怪异模型的呈现方式，即给出的宽高不再受到内边距和边框的影响，内容区的实际宽度是给出的宽度 - （border + padding）。
contenr-box，给出的宽度仅仅是内容区的宽度，最终渲染后的盒子宽度要加上边框和内边距。
padding-box，给出的宽高包括内容区与内边距，不包括边框与外边距。