css盒模型

一、理解盒模型

每一个html元素都是一个盒模型，不过它们在页面上有可能是上下堆叠的，也有可能是左右排列的，还有可能在页面上不做显示等等。其实，这些元素，或者说这些盒模型的版面排布，都受到其position属性、float属性和display属性的控制。
每个盒模型的属性主要有三个，分别是：

1. 边框border
2. 内边距padding
3. 外边距margin

简写形式
其中边框、内边距、外边距，都是四个，需要用到12个属性分别对它们的样式进行设置，但是这样太麻烦了，所以必然会有其简写形式。具体的细节，可以结合以下例子说明：

{margin-top:5px; margin-right:10px; margin-bottom:12px; margin-left:8px;}
{margin:5px 10px 12px 8px;}

在边框、内边距和外边距的每个简写声明中，其属性值顺序都是按照上top$\to$右right$\to$下bottom$\to$左left的顺序，即顺时针进行设置的。

{margin:12px 10px 6px;}

上面这段代码少了对左外边距的设定，那么就自动取其对边，即右外边距的属性值10px

{margin:12px 10px;}

这一段代码只写了上、右外边距，那么下方外边距自动取为12px，左外边距为10px

1. 盒子边框
与盒子边框相关的属性有三个

• 宽度border-width：thin、medium、 thick等
• 样式border-style：none、solid、dashed等
• 颜色border-color：

2. 盒子内边距与外边距
在没有设定内边距的默认情况下，盒子内容紧贴着盒子边框；
由于盒子内边距就在盒子内部，所以它也会取得盒子背景的相关设置；
内边距实际上加在了声明的盒子宽度上，也就是说，多出来的内边距并没有“挤压”文本内容。

推荐大家把下面这条规则作为样式表的第一条规则：

* {margin:0; padding:0;}

这条规则把所有元素默认的外边距和内边距都设定为零。把这条规则放到样式表里后，所有默认的外边距和内边距都会消失。然后，你可以为那些真正需要外边距的元素再添加外边距。——《css设计指南(第三版)》

3. 外边距叠加
外边距叠加就是指，两个相邻垂直叠加的盒模型，它们之间的实际距离由较宽的那个外边距决定，比如：方正粗黑宋简体

p {height:50px; border:1px solid #000; margin-top:50px;margin-bottom:30px;}
p {height:50px; border:1px solid #000; margin-top:50px;margin-bottom:30px;}
p {height:50px; border:1px solid #000; margin-top:50px;margin-bottom:30px;}

假设有3个段落，它们的盒模型设定如上所示，由于第一段的下外边距与第二段的上外边距相邻，你自然会认为它们之间的外边距是 80 像素（ 50+30），但是你错啦！它们实际的间距是 50 像素。
但是，需要注意的是，外边距的叠加仅仅在垂直方向存在，在水平方向不存在。对于水平相邻的元素，它们的水平间距是相邻外边距之和。

二、盒模型的真实大小

• 盒模型结论一：没有（就是没有设置 width 的）宽度的元素始终会扩展到填满其父元素的宽度为止。添加水平边框、内边距和外边距，会导致内容宽度减少，减少量等于水平边框、内边距和外边距的和。
  

  p {margin:0; }
  

  在没有边框、内边距，也没有外边距的情况下，段落的文本扩展到了与 body 元素同宽。

  p {margin:0 30px; padding:0 20px; border-width:0 6px 0 6px; border:solid red;}
  

  加上边框、内边距和外边距后，内容区变得更窄了；
  此时内容宽度变成了 288像素400 – ( (20 +6 + 30)× 2)，而元素声明的总宽度并没有变，仍然是 400 像素。
• 盒模型结论二：为设定了宽度的盒子添加边框、内边距和外边距，会导致盒子扩展得更宽。实际上，盒子的 width 属性设定的只是盒子内容区的宽度，而非盒子要占据的水平宽度。
  

  p {width:400px; background-color:#fff; margin:0;}
  

  明确设定 width 属性后，块级元素就不会再扩展到与父元素（即 body）同宽了
  

  p {width:400px; margin:0 30px; padding:0 20px; border-width:0 6px 0 6px; border:solid red;}
  

  外边距在盒子周围添加了空白，为了展示盒子占据的空间，浏览器窗口也拉大了。添加的这 30 像素外边距，进一步增大了元素占据的空间，目前总宽度已达到 512 像素30 + 6 + 20 + 400 + 20 + 6 + 30 = 512。

---

Reference：

1. 《CSS设计指南(第三版)》