前端学习记录（七）：盒模型
一个盒模型由以下几个内容组成：
1：margin ：外边距 ，与其他元素的间隔
2：boder :边框，当前div的“边界”
3：padding：实际内容“content”与边界之间的距离
4：content: 盒模型中的实际内容区域，上图中的浅蓝色区域。
一般在定义一个元素的宽度和高度时，如果不进行特殊的指定，该高度和宽度的设置都是作用在content层上，上图的css式样表是如下定义：
- width: 100px;
- height: 100px;
- background-color: red;
- padding: 20px;
- display: inline-block;
- box-sizing: content-box;
- border: black 1px solid;
- margin: 10px;
- 通过样式表可以看到，浅蓝色层即content层的实际大小就是100*100，而在设置了padding：20 的前提下，整个div变成了140*140，而在设置boder边框的宽度之后 最终的大小变成了142*142，所以 一个盒子的大小应当是包含了 boder，padding，和content内容，而margin是跟其他元素的距离，对本身大小不会产生影响。
细心的朋友可能会发现样式表中，增加了box-sizing属性，设置的值为 content-box，即设置宽高是设定在 content上，与不设置效果相同，box-sizing还有一个值是 boder-box，设置完此属性之后，设置宽高后 整个div都会变成这个宽高
box-sizing 属性就是开始时所说的特殊的指定。
综上，在不进行box-sizing属性设定时，或box-sizing设置为content-box时，对元素的宽高设定是对content层的设定，整个实际div大小会加上padding和border；设置了box-sizing为border-box后，宽高的设定即为整个盒子的大小。