css盒模型content-box和border-box

1、简述

css盒模型分为两种，一种是ie老版本的怪异模式后来被css3接受，另一种是w3c的标准盒模型，我们在使用中可以根据业务需求来选择不同的盒模型。
我们可以在css样式中根据box-sizing来设置不同的盒模型。
下面来看具体的细节。

2、标准模式（content-box）

当box-sizing:content-box时，我们使用的是标准盒模型，这时候css定义的width宽度只包含元素的content宽度。
总宽度 = width + padding(左右) + border(左右)。
举个栗子：

.right {
box-sizing:content-box;
width:500px;
height: 500px;
padding:20px;
border:50px solid #ccc;
background: red;
}

此时元素right的总宽度为:
width(500px) + padding(20px * 2) + border(50px * 2) = 640px

3、怪异模式（border-box）

当box-sizing:border-box时，我们使用的是标准盒模型，这时候css定义的width宽度只包含元素的content宽度。
总宽度 = width + padding(左右) + border(左右)。
举个栗子：

.right {
box-sizing:border-box;
width:500px;
height: 500px;
padding:20px;
border:50px solid #ccc;
background: red;
}

此时元素right的总宽度为:
width(500px) = 500px
因为在这里width的值已经包含了padding + border 的值了
也就是说 content + padding * 2 + border * 2 = width

4、注意事项

1、在主流现代浏览器解析时默认使用content-box来解析盒模型，也就是说我们只有在用到border-box时需要显式的写在css表中。
2、在计算padding和border时，经常是左右上下都有的，所以我们的padding和border经常要对它的数值乘以二来去计算。