CSS2.1大纲梳理（4）

边距和边框

所有的文档都会生成一个矩形框，这被称为元素框，它描述了一个元素在文档布局中所占的空间大小。

宽度和高度

前面已经提到过，一个元素的width被定义为左内边界到右内边界的距离，一个元素的height被定义为上内边界到下内边界的距离。这两个属性有一个重要的特点：它们不能被应用于行内非替换元素。
假如我们有如下的样式：

我是一个锚

它最终的样式是什么样的呢？

为非替换元素设置宽度和高度

可以看到，虽然浏览器的样式表中显示的值是我们通过CSS设置的样式（40px * 15px），但是元素的实际样式是80px * 22px，也就是说，非替换元素的高度和宽度是由其内容确定的。这就说明，为非替换元素设置宽和高是没有效果的。

内边距和外边距

有三种方法可以在元素外围生成额外的空间：设置内边距、设置外边距和同时设置内外边距（有点废话（|||-_-））。
一般情况下，选择哪一种并不重要，殊途同归。但是在有边框的情况下，就要注意区别选择内外边距了。一来在有边框的情况下会体凸显内边距的效果，二来在有背景颜色或图案的情况下，它会延伸到内边距的最外边。

外边距

外边距会在元素外面创建额外的空白，在这个空白区域中可以看到父元素的背景。

外边距的设置方法

在设置外边距时，需要采用以下的顺序：
margin: top right bottom left
即从上开始顺时针转一周。如果缺失了某个或某些值，则CSS会采取一定的算法自动补全：

• 当只为margin设置一个值时，浏览器会将该值复制三份用应于未设置的部分。
• 当为margin设置两个值时，浏览器会将这些值复制一份并应用于其对边。即当样式为margin: top right时，实际应用的样式为margin: top right top right。
• 当为margin设置了三个值时，浏览器为复制第二个值作为缺失的左边距的值。即当样式为margin: top right bottom时，实际应用的样式为margin: top right bottom right。

当然，除了使用margin来设置外边距，也可以使用margin-left、margin-right、margin-top和margin-bottom来设置外边距。

百分数和外边距

使用百分数设置外边距时，百分数是相对其父元素的width计算的。所以如果父元素的width以某种方式发生改变，百分数也会变。

百分数定义为相对于父元素的width。这不仅应用于左右边距，也应用于上下边距。
这是为什么呢？
我们认为，正常流中的大多数元素都会以足够高的高度来包含其后代元素（包括后代元素的外边距）。如果一个元素的上下外边距是父元素height的一个百分数，就可能导致一个死循环。因为父元素的height会增加，以适应后代元素上下外边距的增加，而相应地，上下外边距的变化又会引起父元素height的变化。

外边距和行内元素

我们虽然允许向一个行内非替换元素设置上下外边距，但是由于向一个行内非替换元素设置上下外边距产不会产生实质的影响，所以实际上不会有任何的效果。其根本原因在于行内非替换元素的上下外边距不会改变一个元素的行高。

对于只包含文本的行，能改变行间距的属性只有line-height、font-size和vertical-align。

但是左右外边距对行内非替换元素是生效的。同时，需要注意的是，如果一个行内非替换元素跨多行，那么左外边距会应用于这个元素的开始处，右外边距应用于该元素末尾。外边距没有应用到各行的左右两边。
如果向行内非替换元素应用负外边距，其上下边距不会受到影响，但是左右两端可能与其他元素产生重叠。
对于替换元素，如果我们为其设置了外边距，那么它确实会影响行高，它可能会使行高增加或减少，这取决于上下外边距的正负。

边框

元素的背景会在外边框边界处停止，因为背景不会延伸到外边距内，由边框就在外边距内部。
边框宽度的默认值是medium，这个值没有明确的定义，一般用浏览器自己决定，不过一般是2像素。尽管如此，我们不一定能看到边框，因为边框的默认样式是none。而对于边框的颜色，其默认值一般为元素本身的前景色。

边框和背景

边框会绘制在“元素的背景之上”。

边框的样式

我们可以用border-style对边框的样式。其值一般为solid、dotted、dashed、double、ridge、inset、outset和none等。
这些样式中，最不可预测的是double。它定义为两条线的宽度再加上这两条线之间的空间等于border-width的值。两条线的粗细，间隙均用浏览器决定。
如果我们只给border-style设置一个值，那么这个样式将同时应用于四个方向的边框。当然，跟边距一样，我们也可以通过border-style: top right bottom left的方式来同时为四个方向指定不同的边框样式。同时，也可以使用border-top-style、border-right-style、border-bottom-style和border-left-style分别为每一个方向指定边框。
border-width用于指定边框的宽度，其用法与border-style类似，其值可以是thin、medium、thick或具体的数值。当使用thin等值进行宽度设置时，并没有明确地对应到某一个宽度，只是规定thick总是要比medium宽，而medium总是要比thin宽。同时，也可以使用border-top-width、border-right-width、border-bottom-width和border-left-width分别为每一个方向指定边框。
之前我们也提到过，目前CSS不支持以百分数的形式来设定边框的宽度。
样式为none的边框不存在。这是什么意思？意思是即便你为边框指定了所有其他属性（颜色、宽度等），一旦边框样式被设置为none，则不会被显示。
border-color可以用于设置边框的颜色，其使用方式与前面两个样式类似，这里不再赘述。需要注意的是，当border-style为none时，边框不会被显示，更为恰当地讲，边框不存在。那么，当我们需要边框存在，但是却又不想让其显示的时候呢？我们可以把border-color设置为transparent。

简写的边框属性

border、border-top、border-right、border-bottom、border-left均可用于设置简写的边框属性，其值分别为边框宽度、边框样式和边框颜色。如：
border: 1px solid #ccc
需要注意的是，这三个值的顺序并不重要，无论谁先谁后，都可以得到同样的边框样式。同时，也可以省略一些值。如，省略颜色时，则边框会默认使用前景色作为其颜色；如果没有border-style的值，那么默认值none会使边框不复存在。

思考
下面的代码会产生什么样的效果？

边框与行内元素

关于边框与行内元素，大家需要记住：不论为行内元素的边框指定什么样的宽度，元素的行高都不会发生变化。

内边距

内边距的设置方式与外边距类似，这里不再赘述。
默认情况下，元素没有内边距。例如，段落之间的间隔传统上只由外边距保证。如果没有内边距，元素的边框会与元素本身的内容相当接近。因此，在元素上放边框时，同时增加一定的内边距通常是个好主意。
而且，即便没有边框，由于外边距会在垂直方向发生合并，因此内边距也常用于保持段落间在垂直方向的距离。
可以为元素的内边距设置百分数值。但是像外边距一样，百分数值要相对于其父元素的width计算，所以父元素的width发生改变时，内边距也会发生相应的变化。

内边距和行内元素

与外边距一样，左内边距应用于元素的开始处，右内边距应用到元素的最后；不过，内边距不会应用于各行的左右两边。对于替换元素也是如此。

内边距和替换元素

尽管看上去有点奇怪，但是内边距确实是可以应用于替换元素上。特别是当我们把内边距应用到图像上时，会产生一种类似于把图像的边框向外撑大的效果。如果为图像设置了背景颜色，大家可以看到图像被背景颜色包围。

背景

元素的背景会延伸至元素边框的外边界，所有的背景属性都不能继承。
需要注意的是，使用url指定背景图像时，其相对路径是相对于CSS样式表本身，而不是相对于HTML文件。这一点与CSS样式表的@import属性相似。

背景的重复

TBD

背景的定位

TBD