前端学习记录（七）：盒模型

一个盒模型由以下几个内容组成：

1：margin  ：外边距 ，与其他元素的间隔

2：boder :边框，当前div的“边界”

3：padding：实际内容“content”与boder之间的距离

4：content: 盒模型中的实际内容区域，上图中的浅蓝色区域。

一般在定义一个元素的宽度和高度时，如果不进行特殊的指定，该高度和宽度的设置都是作用在content层上，上图的css式样表是如下定义：

 

1. width: 100px;
2. height: 100px;
3. background-color: red;
4. padding: 20px;
5. display: inline-block;
6. box-sizing: content-box;
7. border: black 1px solid;
8. margin: 10px;
9.  
10. 通过样式表可以看到，浅蓝色层即content层的实际大小就是100*100，而在设置了padding：20 的前提下，整个div变成了140*140，而在设置boder边框的宽度之后 最终的大小变成了142*142，所以 一个盒子的大小应当是包含了 boder，padding，和content内容，而margin是跟其他元素的距离，对本身大小不会产生影响。
11.  

细心的朋友可能会发现样式表中，增加了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后，宽高的设定即为整个盒子的大小。