当对一个文档进行布局(layout)的时候，浏览器的渲染引擎会根据标准之一的 CSS 基础框盒模型(CSS basic box model)，将所有元素表示为一个个矩形的盒子(box)
一个盒子由四个部分组成:content、padding、border、**margin
**
content：即实际内容
padding：即内边距，清除内容周围的区域，内边距是透明的，取值不能为负，受盒子的 background 属性影响
border：即边框，围绕元素内容的内边距的一条或多条线，由粗细、样式、颜色三部分组成
margin：即外边距，在元素外创建额外的空白，空白通常指不能放其他元素的区域
CSS 中盒子模型分为两种
- W3C 标准盒子模型 （默认情况）
- IE 怪异盒子模型
W3C 标准盒子模型：
- 盒子总宽度=width+ padding + border + margin
- 盒子总高度=height+ padding +border + margin
width,height 只包含内容的宽高
IE 怪异盒子模型：
- 盒子总宽度=width+ margin
- 盒子总高度 = height + margin
width/height包含了 padding 和 border 值
box-sizing
box-sizing: content-box|border-box|inherit
该属性能够控制如何计算一个盒子的宽高
- content-box 默认值，元素的 width/height 不包含padding，border，与标准盒子模型表现一致
- border-box 元素的 width/height 包含 padding，border，与怪异盒子模型表现一致
- inherit 指定 box-sizing 属性的值，应该从父元素继承
