CSS 盒模型

概览

CSS 盒模型 (Box Model)也叫框模型，规定了元素框处理元素 内容、 内边距、 边框 和 外边距 的方式。

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

内边距、边框和外边距都是可选的，默认值是零。但是，许多元素将由用户代理样式表（浏览器内置样式表）设置外边距和内边距。可以通过将元素的 margin 和 padding 设置为零来覆盖这些浏览器样式。

* {
    margin: 0;
    padding: 0;
}

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

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

#box {
    width: 70px;
    margin: 10px;
    padding: 5px;
}

浏览器兼容性

大多数浏览器都会按照上面的图示来呈现内容。然而 IE 5 和 6 的呈现却是不正确的。根据 W3C 的规范，元素内容占据的空间是由 width 属性设置的，而内容周围的 padding 和 border 值是另外计算的。不幸的是，IE 5.X 和 6 在使用自己的非标准模型。这些浏览器的 width 属性不是内容的宽度，而是内容、内边距和边框的宽度的总和。

虽然有方法解决这个问题。但是目前最好的解决方案是回避这个问题。也就是，不要给元素添加具有指定宽度的内边距，而是尝试将内边距或外边距添加到元素的父元素和子元素。

外边距 margin

围绕在元素边框的空白区域是外边距。设置外边距会在元素外创建额外的“空白”。

可选值

设置外边距的最简单的方法就是使用 margin 属性，该属性接受任何长度单位，可以是像素（px）、英寸（in）、毫米（mm）、em和auto。

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

h1 {margin : 0.25in;}

为 h1 元素的四个边分别定义不同的外边距

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

这些值的顺序是从上外边距 (margin-top) 开始围着元素顺时针旋转的：

margin: top right bottom left

等价于

h1 {
    margin-top: 10px;
    margin-right: 0px;
    margin-bottom: 15px;
    margin-left: 15px;
}

为 margin 设置一个百分比数值

p {margin : 10%;}

百分数是相对于父元素的 width 计算的。

值复制

值复制是指 margin 的四个方位属性值部分缺省时的自动填充。

四个值部分缺省，有如下三种情况：

1 个值，其他 3 个值都由这个值（上外边距）复制得到

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

2 个值，第 3 个值（下外边距）由第 1 个值（上外边距）复制得到，第 4 个值（左外边距）由第 2 个值（右外边距）复制得到

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

3 个值，第 4 个值（左外边距）由第 2 个值（右外边距）复制得到

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

归纳起来就是，上下对应，左右对应，第一个值是 top.

值合并

外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。

合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

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

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

外边距甚至可以与自身发生合并，假设有一个空元素，它有外边距，但是没有边框或内边距。在这种情况下，上外边距与下外边距就碰到了一起，它们会发生合并：

如果这个外边距遇到另一个元素的外边距，它还会发生合并：

外边距合并既能够节省页面空间又能使页面更加美观。

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

边框 border

元素的边框 (border) 是围绕元素内容和内边距的一条或多条线。

CSS border 属性允许你规定元素边框的样式、宽度和颜色。

CSS 边框有着丰富的内容，为了避免此页面过长，特将其独立出来介绍，传送门。

内边距 padding

元素的内边距是在边框和内容区之间。

CSS padding 属性定义元素边框与元素内容之间的空白区域。

内边距的使用与外边距的使用类似。

给 h1 元素的各边添加 10 像素的内边距

h1 {padding: 10px;}

您还可以按照上、右、下、左的顺序分别设置各边的内边距，各边均可以使用不同的单位或百分比值

h1 {padding: 10px 0.25em 2ex 20%;}

同样可以分别设置四个方位

h1 {
    padding-top: 10px;
    padding-right: 0.25em;
    padding-bottom: 2ex;
    padding-left: 20%;
}

内边距与外边距一样，遵循值复制的规则。

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

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

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