《CSS权威指南》学习记录——内边距、边框、外边距

//好讨厌，这本书居然在第七章就直接用了这些属性，然后在第八章部分介绍o(╯□╰)o~所以，这部分内容是根据w3c来学习的，等我看完第七章和第八章后再向里面加些内容

框模型概述

CSS假定每个元素都会生成一个或多个矩形框，称其为元素框。元素框中心有一个内容区，内容区周围有可选的内边距、边框、外边距。



元素框的最内部分是实际的内容，直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距，外边距默认是透明的，因此不会遮挡其后的任何元素。内边距、边框和外边距都是可选的，默认值是零。width 和 height 指的是内容区域的宽度和高度。。它们只能应用到块级元素或替换元素上且没有继承性。

外边距

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

margin属性

可通过margin来设置外边距。它接受任何长度单位，可以是像素、英寸、毫米或 em。也可以设置为auto。可以使用负值。

p{margin:30px;}

则在p的四边设置了30px的空白。

p{margin:10px 20px 30px 0px;}

则在p的上、右、下、左分别设置了空白。

p{margin:10%;}

则为 p 元素设置的外边距是其父元素的 width 的 10%。

值复制

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

p{margin:0.5em 1em;}

上面两条规则是等价的，方法如下：



如果为外边距指定了 3 个值，则第 4 个值（即左外边距）会从第 2 个值（右外边距）复制得到。如果给定了两个值，第 4 个值会从第 2 个值复制得到，第 3 个值（下外边距）会从第 1 个值（上外边距）复制得到。最后一个情况，如果只给定一个值，那么其他 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 */

并不是所有情况都可以简写的：

p {margin: 20px 30px 30px 20px;}
p {margin: auto auto auto 20px;}

还可以设置单边外边距：margin-left、margin-right、margin-top、margin-bottom。

内边距

padding 属性定义元素边框与元素内容之间的空白区域。它接受长度值或百分比值，但不允许使用负值。关于赋值，百分数规则等和margin一样，只是换成padding而已。

边框

border是围绕元素内容和内边距的一条或多条线，可以规定元素边框的样式、宽度和颜色。

边框与背景

CSS2.1规范指出：元素的背景是内容、内边距和边框区的背景。

边框的样式

可以定义多种样式：

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

则为段落定义了四种边框样式：实线上边框、点线右边框、虚线下边框和一个双线左边框。依旧是top-right-bottom-left 的顺序。

定义单边样式

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。可以指定长度值，或是关键字：thin、medium、thick。CSS并没有定义三个关键字的确定值，这取决于用户代理。

p{border-width:10px;}
div{border-width:thick;}

当然可以定义单边宽度：border-top-width、border-right-width、border-bottom-width、border-left-width。

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

上述情况下，不仅边框的样式没有了，其宽度也会变成 0。因为如果边框样式为 none，即边框根本不存在，那么边框就不可能有宽度，因此边框宽度自动设置为 0，而不论原先定义的是什么。

例如：

h1 {border-width: 20px;}

由于 border-style 的默认值是 none，如果没有声明样式，就相当于 border-style: none。因此，所有 h1 元素都不会有任何边框。所以，如果希望边框出现，就必须声明一个边框样式。

边框的颜色

border-color，一次可以接受最多4个颜色值。

p {border-color: blue rgb(25%,35%,45%) #909090 red;}

值复制规则仍会适用于此。

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

然后是定义单边颜色：border-top-color、border-right-color、border-bottom-color、border-left-color。

h1 {border-color: black;border-right-color: red;}

透明边框

CSS2 引入了边框颜色值 transparent。这个值用于创建有宽度的不可见边框。

a{border-color:transparent;}

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

外边距合并

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

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

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



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



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



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



这就是一系列的段落元素占用空间非常小的原因，因为它们的所有外边距都合并到一起，形成了一个小的外边距。

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