1.css 盒子模型(css box model)
所有的html元素本质上都是盒子模型。在css 中，盒子模型常用来进行设计和布局。
盒子模型包括：margin(外边距)，padding(内边距)，border(边框)，actual content(实际的内容区域)，如下：
2.计算盒子尺寸的两种方式
根据为元素的box-sizing属性赋的值的不同，盒子尺寸有两种计算方式，content-box 和 border-box.外边距影响盒子周边的距离，在计算盒子尺寸时，无需考虑。
1.box-sizing:content-box(css 盒子模型的默认值)
box-sizing:content-box
盒子的宽 ＝ width + padding-left + padding-right + border-left + border-right ;
盒子的高 ＝ height + padding-top + padding-bottom + border-top+ border-bottom ;
2.box-sizing: border-box
box-sizing: border-box
盒子的高 ＝ height
盒子的宽 ＝ width
盒子的尺寸只跟盒子的宽度和高度属性相关。浏览器会考虑内边距和边框，合理的调整高度和宽度属性。因此总尺寸等于为高度和宽度属性设置的值。
3. 设置box-sizing
任何元素都可以设置box-sizing这个属性，因此可以混用两种盒子，但为了保持一致，通常选择其中一种使用。设置方法是：用通用选择器进行设置，指定盒子模型的类型(content-box是默认值)：
*,*:before,*:after{
box-sizing: border-box;
}
