CSS学习总结2：CSS框模型

1、CSS框模型概述

CSS框模型规定了元素框处理元素内容、内边框、边框和外边框的方式。

元素框的最内部分是实际的内容，直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距，外边距默认是透明的，因此不会遮挡其后的任何元素。

提示：背景应用于由内容和内边距、边框组成的区域。

内边距、边框和外边距都是可选的，默认值是零。但是，许多元素将由用户代理样式表设置外边距和内边距。可以通过将元素的 margin 和 padding 设置为零来覆盖这些浏览器样式。这可以分别进行，也可以使用通用选择器对所有元素进行设置：

* {

  margin: 0;

  padding: 0;

}

在 CSS 中，width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。

假设框的每个边上有 10 个像素的外边距和 5 个像素的内边距。如果希望这个元素框达到 100 个像素，就需要将内容的宽度设置为 70 像素，请看下图：

#box {

  width: 70px;

  margin: 10px;

  padding: 5px;

}

提示：内边距、边框和外边距可以应用于一个元素的所有边，也可以应用于单独的边。

提示：外边距可以是负值，而且在很多情况下都要使用负值的外边距。

2、内边距

这里值得一提的是"单边内边距的属性规则"：在使用单边内边距时遵循着顺时针的原则，即上、右、下、左的顺序进行书写。实例：

h1 {

  padding-top: 10px;\\上

  padding-right: 0.25em;\\右

  padding-bottom: 2ex;\\下

  padding-left: 20%;\\左

  }

内边距在使用时也可以根据父类的宽度来使用百分比设置内边距数值，注意：上下内边距与左右内边距一致；即上下内边距的百分数会相对父元素宽度设置，而不是相对高度。

3、边框

在使用CSS设置边框时，一定要首先使用border-style或单边边框属性，设置好边框的样式后在设置边框的其他属性，否则一切边框的属性都将不起作用。

边框宽度：指定边框宽度有两种方法：指定长度，如0.2px、0.1em；另一种是使用三个关键字之一，分别是thin、medium(默认值)、thick。但是CSS中没有定义三个关键字的具体宽度，所以推荐在设置宽度时使用具体宽度，少用关键字。

4、外边距

外边距margin属性可以接受任何长度单位。外边距的使用与内边距类似，只不过将padding换成了margin。

下面重点讲一下值复制(同样适合内边距)。

p {margin: 0.5em 1em 0.5em 1em;}

p {margin: 0.5em 1em;}

通过值复制，上面的两个规则是等价的。复制的规则如下：

1、如果缺少左外边距的值，则使用右外边距的值。

2、如果缺少下外边距的值，则使用上外边距的值。

3、如果缺少右外边距的值，则使用上外边距的值。

实例：

h1 {margin: 0.25em 1em 0.5em;}    /* 等价于 0.25em 1em 0.5em 1em */

h2 {margin: 0.5em 1em;}        /* 等价于 0.5em 1em 0.5em 1em */

p {margin: 1px;}            /* 等价于 1px 1px 1px 1px */

5、外边距合并

外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

当一个元素出现在另一个元素上面时，第一个元素的下外边距与第二个元素的上外边距会发生合并。请看下图：

当一个元素包含在另一个元素中时（假设没有内边距或边框把外边距分隔开），它们的上和/或下外边距也会发生合并。请看下图：

外边框合并的意义：以由几个段落组成的典型文本页面为例。第一个段落上面的空间等于段落的上外边距。如果没有外边距合并，后续所有段落之间的外边距都将是相邻上外边距和下外边距的和。这意味着段落之间的空间是页面顶部的两倍。如果发生外边距合并，段落之间的上外边距和下外边距就合并在一起，这样各处的距离就一致了。

注释：只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。