No.3 盒子模型
1.盒子模型属性
（1）包含的CSS属性：width、height、padding、border、margin。
1.盒子模型属性
（1）包含的CSS属性：
width、height、padding、border、margin。
（2）盒子模型宽度计算：
margin-right + border-right + padding-right + width + padding-left + border-left + margin-left。
（3）盒子模型高度计算：
margin-top + border-top + padding-top + height + padding-bottom + border-bottom + margin-bottom。
（4）margin设置：
margin： 10px、
margin: 10px 20px，上下 左右;
margin: 5px 0 10px 0，上 有 下左。
（5）border设置：
border: width style color，也可单独设置每个值border-width、border-style、border-color。
border-style属性值包括olid, double, dashed, dotted, and none。
（6）border单方向设置：
border-top, border-right, border-bottom, and border-left，
例如border-bottom: 6px solid #949599。
（7）border-radius设置：
一个值border-radius: 5px，
两个值border-radius: 5px 10px，
四个值表示top-left、top-right、bottom-right、bottom-left。
（8）border-radius单个方向设置：
border-(top/bottom)-(left/right)-radius:value，
例如border-top-right-radius: 5px;
2.Box Sizing
（1）box-sizing作用：
CSS提供了box-sizing用于规定元素尺寸的计算方法。
（2） box-sizing属性值：
包括content-box、padding-box、border-box。
（3）content-box：
是box-sizing的默认值，计算的实际size为width或height值加上padding、border、margin的总和。
（4）padding-box：
一个div的width为400px，设置padding为20px，那么实际的尺寸还是400px，只是把content压缩了。如果设置border为10px，那么实际的尺寸为400px + 10px = 410px。
（5）border-box:
如果div的width为400px，设置padding为20px，border为10px，那么元素width还是为400px，但内容被缩放。
（6）box-sizing的推荐值：border-box。