内边距、边框、轮廓和外边距

[xiongshj]

内边距、边框、轮廓和外边距

这是学习《CSS 权威指南》第 8 章的笔记。

基本元素框

文档中的每个元素都会生成一个矩形框，我们称之为元素框。

width 和 height 这两个属性无法应用到行内非置换元素上。

内边距

元素默认没有内边距。

如果为元素添加了边框，通常最好再加一些内边距。

padding: top right bottom left; 这个顺序不难记住：从上边开始，顺时针转动（上右下左）。

CSS 考虑到了少于四个值的情况，为此定义了几个规则：

• 如果没有针对左边的值，使用针对右边的值。
• 如果没有针对底边的值，使用针对顶边的值。
• 如果没有针对右边的值，使用针对顶边的值。

元素的内边距可以用百分数值设定。百分数值相对父元素内容区的宽度计算（这一点不仅针对左右内边距，也针对上下内边距），因此，如果出于什么原因，父元素的宽度变了，内边距也会变。

div p {
  padding-top: 10%;
}

<div style="width: 500px;">
  <p>This is a paragraph.</p>
</div>

对上述代码来说，段落的上内边距为 50px。

百分数值可以与长度值混用，例如：

h2 {
  padding: 0.5em 10%;
}

边框

元素的内边距之外是边框。边框是元素的内容和内边距周围的一到多条线段。默认情况下，元素的背景在边框的外边界处终止，不会延伸到外边距区域。边框在外边距内侧。

边框有三个要素：宽度（厚度），式样（外观），颜色。

• 宽度的默认值为 medium。
• 默认的边框式样为 none，即不存在（所以一般见不到边框）。
• 默认的边框颜色是元素自身的前景色。

边框的式样

式样是边框最重要的要素，因为倘若没有式样，根本看不到边框。

一个边框可以有多个式样。例如：

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

这个属性与 padding 一样，值的顺序为上右下左。值少于四个时的复制规则也与 padding 属性一样。

单边式样：border-top-style ……如此。

边框宽度

使用 border-width 属性来设定边框宽度，类似的有 border-top-width 等属性设定各边的边框宽度。

边框颜色

使用 border-color 属性来设定边框颜色，类似的有 border-top-color 等属性设定各边的边框颜色。

有时会想创建有宽度但不可见的边框，要把边框的颜色设为 transparent。透明边框在某种程度上相当于内边距，不过透明边框有个额外好处，需要时可以让边框可见。

简写的边框属性

简写的边框属性：border-top, border-right, border-bottom, border-left。

h1 {
  border-bottom: thick solid rgb(50%, 40%, 70%);
}

整个边框

还有一个最简单的简写属性：border。

h1 {
  border: thick silver solid;
}

圆角边框

元素边框的角是直的，可以使用 border-radius 属性定义一个（或两个）圆角半径，把圆角变得圆滑一些。

#example {
  border-raidus: 2em;
}

#example {
  border-radius: 33%; /* 百分数相对边框框的尺寸计算 */
}

#example {
  border-radius: 1em 2em 3em 4em;
  /* 左上角 - 右上角 - 右下角 - 左下角 */
}

如果缺少某个值，填充的方式与 padding 等属性一样。

下面讨论提供两个值的情况，在两个值之间插入一个斜线：

#example {
  border-radius: 3ch / 1ch;
}
/* 等价于： */
#example {
  border-radius: 3ch 3ch 3ch 3ch / 1ch 1ch 1ch 1ch;
}

在这种句法中，斜线前是横轴的值，斜线后是纵轴的值。

单独的圆角属性，各属性设定对应各角的曲线形状，与之前不同的是，如果提供两个值，一个用作横向半径，另一个用作纵向半径，无需在两个值之间插入斜线：

• border-top-left-radius
• border-top-right-radius
• border-bottom-right-radius
• border-bottom-left-radius

单独的圆角属性最常用于修改某一角，例如先设定通用的圆角，然后覆盖其中一个：

.tabs {
  border-radius: 2em;
  border-bottom-left-radius: 0;
}

图像边框

使用图像绘制边框，要使用 border-image-source 属性。

p.hello {
  border: 25px solid;
  border-image-source: url(i/circle.png); 
}

注意，如果没有 border: 25px solid 声明，根本不会显示边框。因此，为了让边框图像显示出来，必须把 border-style 设为 none 以外的值，不一定非得是 solid。

其次，border-width 的值决定边框图像的宽度。如未声明这个值，默认为 medium，差不多是 3 像素（具体的值可能有所不同）。

裁剪边框图像，使用 border-image-slice 属性。

调整图像的宽度，使用 border-image-width 属性。

外推边框，使用 border-image-outset 属性。

使用 border-image-repeat 属性可以改变各边上边框图像的处理方式，取值有 stretch | repeat | round | space。

边框图像的简写属性：border-image。

这个属性的值排列方式很独特：必须按指定的顺序列出，先是裁剪，后跟宽度，最后是偏移（这几个值中间要加上斜线）。这三组词的顺序定好之后，图像来源和重复方式可以写在任何位置。

比如：source slice / width / outset repeat。

如果省略了某个部分，那一部分将使用默认值。

轮廓

CSS 定义了一种特殊的装饰方式，名为轮廓（outline）。

根据规范，轮廓与边框的区别体现在三个方面：

1. 轮廓不占空间。
2. 轮廓可以不是矩形。
3. 用户代理通常在元素处于 :focus 状态时渲染轮廓。
   不过，还要加上一点：
4. 轮廓更极端，无法单独为一边设置独特的轮廓。

轮廓式样：outline-style。

轮廓宽度：outline-width。

轮廓颜色：outline-color。

唯一的轮廓简写属性：outline。与 border 类似，这个属性能一次性设置轮廓的式样、宽度和颜色。

轮廓与边框之间的第一个重要区别是，轮廓对布局完全没有影响。任何影响都没有。轮廓只是视觉上的效果。

轮廓不一定是矩形的，也不一定是连续的。

外边距

常规流动模式下，元素之间有间隔的原因是元素有外边距（margin）。外边距在元素周围添加额外的空白。空白一般指其他元素不能共存的区域，而且在这片区域中，父元素的背景是可见的。

外边距的默认值是 0（零）。因此，如果未声明值，默认没有外边距。

不过，浏览器通常会为很多元素提供预设样式，这其中就包含外边距。例如，在启用 CSS 的浏览器中，通常会在段落上下添加一个“空行”。因此，如果没有为 p 元素设定外边距的话，浏览器会自行添加。只要声明了，默认的样式就会被覆盖。

不同类型的长度值还可以混用。一个规则中并不一定非要使用同一种长度值，例如：

h2 {
  margin: 14px 5em 0.1in 3ex; /* 不同类型的长度值 */
}

元素的外边距可以使用百分数值设定。与内边距一样，百分数外边距值相对父元素的内容区宽度计算，因此外边距的具体值将随父元素的宽度而变。

单边外边距属性：margin-top, margin-right, margin-bottom, margin-left。

块级框的上下外边距有个有趣的行为，而这个行为往往被人忽略：上下外边距会折叠。相邻的两个（或多个）上下外边距会折叠为其中最大的那个外边距。

段落之间的空白是最经典的例子。一般来说，段落之间的间隔使用类似下面的规则实现：

p {
  margin: 1em 0;
}

这个规则把每个段落的上下外边距都设为 1em。如果外边距不折叠，相邻的两个段落之间就会出现 2em 的间隔。而事实上，段落之间只有 1em 的间隔，因为两个外边距折叠了。

在父元素上设定内边距或边框等可以阻止外边距折叠。

元素的外边距可以设为负值。这可能会使元素框从父元素中冒出来，或者与其他元素重叠。

小结

图像边框不是那么好理解，概念有点抽象。除此，其他都是很好理解的。