盒模型详解记录

块级元素是构成一个 HTML 的主要和关键元素，而任意一个块级元素均可以用 Box model 来解释说明。

CSS中， Box Model叫盒子模型（或框模型），Box Model规定了元素框处理元素内容（element content）、内边距（padding）、边框（border）和外边距（margin）的方式。立体图如下(Fig. 1):

　平面图如下(Fig. 2):

说明：上图中，由内而外依次是元素内容（content）、内边矩（padding-top、padding-right、padding-bottom、padding-left）、边框（border-top、border-right、border-bottom、border-left）和外边距（marging-top、margin-right、margin-bottom、margin-left）。

内边距、边框和外边距可以应用于一个元素的所有边，也可以应用于单独的边。而且，外边距可以是负值，而且在很多情况下都要使用负值的外边距。

说明：

1.和第一幅图一样，在上图中，元素框的最内部分是实际的内容（element）；直接包围内容的是内边距（padding），内边距呈现了元素的背景（background）；内边距的边缘是边框（border）；边框以外是外边距（margin），外边距默认是透明的，因此不会遮挡其后的任何元素（其实元素的margin就是其所在父元素的padding）。元素的背景应用于由内容和内边距、边框组成的区域。

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

3. 在 CSS 中，width和 height 指的是内容区域（element）的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。假设框的每个边上有 10 个像素的外边距和 5 个像素的内边距。如果希望这个元素框达到 100 个像素，就需要将内容的宽度设置为 70 像素，以下是CSS代码：

#box {

  width: 70px;

  margin: 10px;

  padding: 5px;

}

下图是对上面CSS代码的解释：

Margin: 包括 margin-top，margin-right，margin-bottom，margin-left，控制块级元素之间的距离，它们是透明不可见的，对于 Fig. 2 所示的上右下左 margin 值均为 40px，因此代码为：

margin-top: 40px;  

margin-right: 40px;  

margin-bottom: 40px;  

margin-left: 40px;  

根据上、右、下、左的顺时针规则，简写为

margin: 40px 40px 40px 40px;  

为便于记忆，请参考下图:

当上下，左右 margin 值分别一致，可简写为:

margin: 40px 40px;

前一个40px代表上下 margin 值，后一个 40px 代表左右 margin 值。

当上下左右 margin 值均一致，可简写为:

margin: 40px;

外边距（margin）就是围绕在元素边框以外的空白区域，设置外边距会在元素外创建额外的“空白”。CSS中元素的margin属性用于置外边距，margin属性接受任何长度单位、百分数值甚至负值。

1.为元素的各个边设置同样的固定大小的margin值：

下面的声明在 h1 元素的各个边上设置了 1/4 英寸宽的空白：

/*设置一级标题的外边距为0.25英寸*/

h1 {margin : 0.25in;}

2.为元素的各条边设置不同的margin值：

与内边距（padding）的设置相同，这些值的顺序是从上外边距 (top) 开始围着元素顺时针旋转的，可以表示为“margin: top rightbottom left”。下面的例子为 h1 元素的四个边分别定义了不同的外边距，所使用的长度单位是像素 (px)：

h1 {margin : 10px 0px 15px 5px;}

3. margin 属性的百分比数值：

百分数是相对于父元素的 width 计算的。下面这个例子为 p 元素设置的外边距是其父元素的 width 的 10%。

p {margin : 10%;}

4.设置margin的值为auto：
margin 的默认值是 0，所以如果没有为 margin 声明一个值，就不会出现外边距。但是，在实际中，浏览器对许多元素已经提供了预定的样式，外边距也不例外。例如，在支持 CSS 的浏览器中，外边距会在每个段落元素的上面和下面生成“空行”。因此，如果没有为 p 元素声明外边距，浏览器可能会自己应用一个外边距（当然，只要你特别作了声明，就会覆盖默认样式）。IE 对 body 标签定义的默认边距（margin）值是 8px。而 Opera 不是这样。相反地，Opera 将内部填充（padding）的默认值定义为 8px，因此如果希望对整个网站的边缘部分进行调整，并将之正确显示于 Opera 中，那么必须对 body 的 padding 进行自定义。

在设置CSS内边矩和外边距的过程中，有时候我们会输入一些重复的值：

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

通过值复制，您可以不必重复地键入这对数字。上面的规则与下面的规则是等价的：

p {margin: 0.5em 1em;}

这两个值可以取代前面 4 个值。这是如何做到的呢？CSS 定义了一些规则，允许为外边距指定少于 4 个值。规则如下：
•如果缺少左外边距的值，则使用右外边距的值。
•如果缺少下外边距的值，则使用上外边距的值。
•如果缺少右外边距的值，则使用上外边距的值。 
下图提供了更直观的方法来了解这一点：

换句话说，如果为外边距指定了 3 个值，则第 4 个值（即左外边距）会从第 2 个值（右外边距）复制得到。如果给定了两个值，第 4 个值会从第 2 个值复制得到，第 3 个值（下外边距）会从第 1 个值（上外边距）复制得到。最后一个情况，如果只给定一个值，那么其他 3 个外边距都由这个值（上外边距）复制得到。

利用这个简单的机制，您只需指定必要的值，而不必全部都应用 4 个值，例如：

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 */

我们可以使用单边外边距属性为元素单边上的外边距设置值。假设您希望把 p 元素的左外边距设置为 20px。不必使用 margin（需要键入很多 auto），而是可以采用以下方法：

p {margin-left: 20px;}

我们可以使用下列任何一个属性来只设置相应上的外边距，而不会直接影响所有其他外边距：
 •margin-top
 •margin-right
 •margin-bottom
 •margin-left

1.外边距合并的规则：

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

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

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

2.外边距合并的原因

　　为什么会有元素外边距的合并呢？外边距合并初看上去可能有点奇怪，但是实际上，它是有意义的。如下图，以由几个段落组成的典型文本页面为例。第一个段落上面的空间等于段落的上外边距。如果没有外边距合并，后续所有段落之间的外边距都将是相邻上外边距和下外边距的和。这意味着段落之间的空间是页面顶部的两倍。如果发生外边距合并，段落之间的上外边距和下外边距就合并在一起，这样各处的距离就一致了。

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

 

元素的边框（border）就是围绕元素内容和内边据的一条或多条线，元素外边距（margin）内就是元素的的边框 (border)。每个边框有 3 个方面：宽度（border-width)、样式(border-style)，以及颜色(border-color)。

CSS 规范指出，边框绘制在“元素的背景之上”。这很重要，因为有些边框是“间断的”（例如，点线边框或虚线框），元素的背景应当出现在边框的可见部分之间。CSS2 指出背景只延伸到内边距，而不是边框。后来 CSS2.1 进行了更正：元素的背景是内容、内边距和边框区的背景。大多数浏览器都遵循 CSS2.1 定义，不过一些较老的浏览器可能会有不同的表现。

 border-style属性用来设置边框的样式，样式是边框最重要的一个方面，这是因为如果没有样式，将根本没有边框。CSS 的 border-style 属性没有默认值，它定义了包括none在内的dashed、 dotted 和 double等10个非 inherit 样式值。例如，把一幅图片的边框定义为 outset，使之看上去像是“凸起按钮”。

一次定义多种样式：我们可以为border-style设置一个值使一个元素的四条边框有同样的样式；也可以为一个边框定义设置多个样式值，这样每条边框就拥有不同的样式，四条边框样式的顺序为 top-right-bottom-left 。例如：下面这条规则为类名为 aside 的段落定义了四种边框样式：实线上边框、点线右边框、虚线下边框和一个双线左边框：

p.aside {border-style: solid dotted dashed double;}

2.定义单边样式： 如果要为元素框的某一个边设置边框样式，而不是设置所有 4 个边的边框样式，可以使用下面的单边边框样式属性：
 •border-top-style
 •border-right-style
 •border-bottom-style
 •border-left-style 
　　因此下面这两种方法是等价的：

p {border-style: solid solid solid none;}

p {border-style: solid; border-left-style: none;}

 注意：如果要使用第二种方法，必须把单边属性放在简写属性之后。因为如果把单边属性放在 border-style 之前，简写属性的值就会覆盖单边值 none。

border-width属性用于为元素的边框设置宽度，为边框指定宽度有两种方法：可以指定长度值，比如 2px 或 0.1em；或者使用 3 个关键字之一，它们分别是 thin 、medium（默认值，表示中等粗细）和 thick。

1.简写属性：border-width简写属性为元素的所有边框设置宽度，也可以单独地为各边边框设置宽度。注意：只有当边框样式不是 none 时才起作用。如果边框样式是 none，边框宽度实际上会重置为 0；不允许指定负长度值。比如，我们可以这样设置边框的宽度：

p {border-style: solid; border-width: 5px;}

2.定义单边宽度：可以按照 top-right-bottom-left 的顺序设置元素的各边边框：

p {border-style: solid; border-width: 15px 5px 15px 5px;}

上面的例子也可以简写为（这样写法称为值复制）：

p {border-style: solid; border-width: 15px 5px;}

3.没有边框：如果希望显示某种边框，就必须设置边框样式，比如 solid 或 outset。那么，如果把 border-style 设置为 none 会出现什么情况？看看下面的例子：

p {border-style: none; border-width: 50px;}

尽管边框的宽度是 50px，但是边框样式设置为 none。在这种情况下，不仅边框的样式没有了，其宽度也会变成 0。边框消失了，为什么呢？

这是因为如果边框样式为 none，即边框根本不存在，那么边框就不可能有宽度，因此边框宽度自动设置为 0，而不论您原先定义的是什么。

记住这一点非常重要。事实上，忘记声明边框样式是一个常犯的错误。由于 border-style 的默认值是 none，如果没有声明样式，就相当于 border-style: none。因此，如果要边框显示，就必须声明一个边框样式。

border-color 属性设置四条边框的颜色。此属性可设置 1 到 4 种颜色。

1.简写属性：border-color 属性是一个简写属性，可设置一个元素的所有边框中可见部分的颜色，或者为 4 个边分别设置不同的颜色。可以使用任何类型的颜色值，例如可以是命名颜色，也可以是十六进制和 RGB 值：

p {

  border-style: solid;

  border-color: bluergb(25%,35%,45%) #909090 red;

  }

如果颜色值小于 4 个，值复制就会起作用。例如下面的规则声明了段落的上下边框是蓝色，左右边框是红色：

p {

  border-style: solid;

  border-color: blue red;

  }

说明：默认的边框颜色是元素本身的前景色。如果没有为边框声明颜色，它将与元素的文本颜色相同。另一方面，如果元素没有任何文本，假设它是一个表格，其中只包含图像，那么该表的边框颜色就是其父元素的文本颜色（因为 color 可以继承）。这个父元素很可能是 body、div 或另一个 table。

2.定义单边颜色：还有一些单边边框颜色属性。它们的原理与单边样式和宽度属性相同，可以按照 top-right-bottom-left 的顺序设置元素的各边颜色。
为 h1 元素指定实线黑色边框，而右边框为实线红色，可以这样指定：

h1 {

  border-style: solid;

  border-color: black;

  border-right-color: red;

  }

3.透明边框：虽然在边框没有样式时，就没有宽度。不过有些情况下您可能希望创建一个不可见的边框。CSS2 引入了边框颜色值 transparent。这个值用于创建有宽度的不可见边框。

a:link, a:visited {

  border-style: solid;

  border-width: 5px;

  border-color: transparent;

  }

a:hover {border-color: gray;}

从某种意义上说，利用 transparent，使用边框就像是额外的内边距一样；此外还有一个好处，就是能在你需要的时候使其可见。这种透明边框相当于内边距，因为元素的背景会延伸到边框区域（如果有可见背景的话）。

 

 

 

Padding: 包括padding-top，padding-right，padding-bottom，padding-left，控制块级元素内部，content 与 border 之间的距离。

元素内边矩（padding）：CSS padding 属性定义元素边框（border）与元素内容（element content）之间的空白区域。css padding属性的取值可以是auto（由浏览器计算内边矩的值）、以具体的单位计算的长度值（默认是0px）或百分比（基于父元素的宽度的百分比计算的内边距）。

padding-top 属性用于设置元素的上内边距的宽度（空间）。行内非替换元素上设置的上内边距不会影响行高计算，因此，如果一个元素既有内边距又有背景，从视觉上看可能延伸到其他行，有可能还会与其他内容重叠。注意，padding-top不允许指定负内边距值。

padding-right属性用于设置元素的右内边距的宽度（空间）。行内非替换元素上设置的右内边距仅在元素所生成的第一个行内框的右边出现。和CSS padding-top一样，padding-right不允许指定负内边距值。

padding-bottom 属性用于设置元素的下内边距（底部空白）。这个CSS属性的特点跟padding-top的相似。

padding-left 属性用于设置元素左内边距（空白）。该属性和padding-right类似。

我们可以为元素的内边距设置百分数值，而百分数值是相对于其父元素的 width属性计算的（这一点与外边距margin一样）。所以，如果父元素的width 改变，它们也会改变。

 

至此，我们已经基本了解 margin 和 padding 属性的基本用法。但是，在实际应用中，却总是发生一些让你琢磨不透的事，而它们又或多或少的与 margin 有关。

注: 当你想让两个元素的 content 在垂直方向 (vertically) 分隔时，既可以选择 padding-top/bottom，也可以选择 margin-top/bottom，再此建议你尽量使用 padding-top/bottom 来达到你的目的，这是因为 CSS 中存在 Collapsing margins (折叠的 margins )的现象。

Collapsing margins: margins 折叠现象只存在于临近或有从属关系的元素，垂直方向的margin中. 文字说明可能让人费解，下面用一个例子说明 margin-collapsing 现象。

例: 在HTML文件的<body></body>之间写入如下代码:

<div id=”ID1″>

<h1 id=”ID2″>Margins of ID1 and ID2 collapse vertically.<br/>元素ID1与ID2的margins在垂直方向折叠。</h1>

</div>

在与其外联的CSS文件中写入:

 1 * {

 2 padding:0;

 3 margin:0;

 4 }

 5 #ID1 {

 6 background-color: #333;

 7 color: #FFF;

 8 margin-top: 10px;

 9 margin-bottom: 10px;

10 }

11 #ID2 {

12 font: normal 14px/1.5 Verdana，sans-serif;

13 margin-top: 30px;

14 margin-bottom: 30px;

15 border: 1px solid #F00;

16 }

代码解释:

在HTML写入的代码表示，在 HTML 中插入 id 分别为 ID1 和 ID2 的两个块级元素 div，h1。

1.                  *{padding:0; margin:0;}: 使浏览器默认的元素padding和margin值均归零。

2.                  #ID1{…}: 使id为ID1的元素div的背景颜色为#333，字体颜色为#FFF，margin-top/bottom为10px。

3.                  #ID2{…}: 使id为ID2的元素h1的字体大小为14px，verdana字体，行高为字体高的150%，正常粗细. margin-top/bottom为30px，边框为1px宽，红色实线。

依据以上解释，我们应该得到如下效果(Fig. 3):

即 ID1 的margin-top/bottom=ab=ef=10px;

ID2 的margin-top/bottom=bc=de=30px;

但用浏览器打开 HTML 文件，却得到 Example4 的效果，如下图(Fig. 4):

即 ab=cd=30px，ID1 的 margin-top/bottom=10px 被折叠了，而且 ID1 应有的 margin 黑色背景也一同被折叠消失了.

为什么会折叠: 造成以上现象的原因是，我们在 CSS 中并没有声明 id 为 ID1 的元素 div 的 height (高)，因此它的高便被设为 auto (自动)了. 一旦其值被设为 auto，那么浏览器就会认为它的高为子元素 ID2 的 border-top 到 border-bottom 之间的距离，即Fig. 4中bc的长度，所以子元素 ID2 的 margin-top/bottom(30px)就伸出到了父元素 ID1 之外，出现了 Fig. 4 中 ab 与 cd 之间的空白区域. 因此父元素ID1的 margin-top/bottom 因子元素的”红杏出墙”而被折叠消失了.

如何解决折叠问题: 可能大家最初想到的办法就是根据折叠发生的原因——auto，来解决问题. 但是，在实际操作中，某些元素如 div、h1、p 等，我们是不可能预先知道它的高是多少的，因此在 CSS 文件中是不能常规通过声明元素的高来解决折叠问题.

我们需要在 CSS 文件中加入如下代码（下划线部分）:

#ID1 {

background-color: #333;

color: #FFF;

margin-top: 10px;

margin-bottom: 10px;

padding-top:1px;padding-bottom:1px;
}

或是：

#ID1 {

background-color: #333;

color: #FFF;

margin-top: 10px;

margin-bottom: 10px;

border-top:1px solid #333;border-bottom:1px solid #333;

}

通过增加以上代码，便可使浏览器重新计算 ID1 的高，使其为子元素 ID2 的 margin-top/bottom 外缘 (outer top/bottom) 之间的距离，即 Fig. 3 中 be 的距离。

 

margin折叠的规则

1.      两个或多个毗邻的普通流中的块元素垂直方向上的margin会折叠

2.      浮动元素/inline-block的元素/绝对定位元素的margin不会和垂直方向上的其他元素的margin折叠

3.      创建了块级格式化内容的元素，不和它的子元素发生margin折叠

4.      元素自身的margin-bottom和margin-top相邻时也会折叠

 

css中width与height的计算方法

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

    但是在浏览器中实际的宽度与高度的值是按width=margin-left + margin-right + padding-left +padding-right + width与height=margin-left+ margin-right + padding-left + padding-right + height这个计算的。所以当我们布局一个网页的时候，经常会遇到这样的一种情况，那就是最终网页成型的宽度或是高度会超出我们预先的计算，其实就就是所谓的CSS的盒模型造成的。因此在我们布局网页的时候要将这一部分内容计算在内。

    例如：#div{margin:10px;padding:10px;border:10px;width:100px;height:100px;}他的实际width为160px ，height为160px。