Css权威指南(4th，第四版中文翻译)-8.Padding,Borders,Outlines,Margins

Posted 2023-05-12

参考技术A 在上一章节，我们讨论了元素显示的基本特点。而在这一章，我们将看到css属性是如果改变元素显示外观的，这包括了padding，border，margin。

众所周知，所有的document元素都会生成一个长方形的box来布局，称为元素box，而且这个box是具有排他性的，同一个区域是不允许有多个box交叠的。这就是前端最熟悉的盒模型：

一般来说，这里说的宽度和高度指的都是上面图中inner edge的宽和高。而这两个属性最重要的一点就是它们不作用于inline的不可替代元素。举例来说，
如果你给链接设置了宽高，那么浏览器就会忽略这些声明：

在盒模型中，从里到外的第2层就是padding：

该属性接受任何的长度值，包括百分比。例如：

从上图中我们发现，padding也是在背景的覆盖范围的。
默认来说，元素是没有padding的。但一般情况下我们还是希望有padding的，不然border有时候看起来就离内容太近了：

另外padding是由方向的设置顺序的，来看下：

而且每个方向上，你所用的长度单位都可以是不一样的，举个列子：

有时候你会碰到相同的padding数值，例如

这可以简化为：

这是怎么实现的呢？其实在CSS内部定义了一套规则：

换句话说，如果只给了三个值，那么第四个left就会拷贝right的值。如果只给定2个值，那么第三个拷贝第一个，第4个拷贝第二个。如果只给了一个值，那么所有值都从它身上拷贝。

这个属于大家非常熟悉的部分了：

百分比的计算核心在于标准的确定，在padding中，其标准就是父元素的内容区域的宽度。举个例子：

设置百分比的padding存在一个问题，就是当父元素未设置宽度，而且随着浏览器会变化宽度的情况，那么这个padding的宽度也会跟着一起变动。

如果对一个inline元素施加padding是不会改变元素的高度的，例如：

这是因为对于不可见的背景情况下，padding是被设置为透明的，所以上面的声明不会改变行高。但如果设置了背景，情况就不一样了：

上面我们看到了处理padding top和bottom的情况，但是left和right的padding有点不同。如果对inline元素设置了left和right的padding是有效果的：

那如果inline元素跨行了会怎么样呢？

很自然的，left作用于开头，而right作用于结尾。

我们还是拿图片来举例，试着为图片添加padding：

不管可替换元素是block的还是inline的，这一padding都会加上，如下图所示：

在padding外面一层的为border，默认来说，background的颜色的边界就是在border这层。而每个border都有三部分组成：宽度，厚度和样式。对于宽度来说，默认值为medium，一般来说是2px。但有没有发现平常我们很少注意到，每个元素的border宽度已经设置好了？那是因为border的样式默认设置为none，所以我们压根看不到。最后来说说border默认的颜色，就是它的前景色（foreground color）。
另外刚说了背景区域到border位置，但是到border的内边界还是外边界没说。其实按照CSS的标准定义，这个需要扩展到外边界，因为有些border是dotted的。

border的样式是最重要的，因为你不设置，它就压根不出来。

CSS中定义了10中不同的样式，包括默认的none，列举如下：

其中最难搞得就是double，border样式为两行，而其中的空白的宽度就是border-width的宽度。而且CSS标准中并没有规定两条线的粗细的标准，都依赖浏览器去实现。
下面来看看另外需要颜色的border类型：inset，outset，groove，ridge

默认来说，border的颜色是基于元素的颜色。但是颜色的变化又得完全依赖浏览器去实现，来看看不同的实现：

在border-style属性中是允许同时定义多种border的：

这样设置的结果是什么呢？那就是top border为solid，right border为dashed， bottom border为dotted ，left border为solid。就像之前定义的padding一样。
来看个具体的例子：

如果想要设置单侧的样式，可以使用下列的一系列属性：

来看个具体的例子，设置h1三边包围：

上面需要注意的是，针对第二种方案，必须将border-left-style样式放在后面，不然就会被后者替换。

设置完style后，接下来就需要设置宽度width：

对应的单侧的设置为：

总共有4种方式来设置border的宽度，可以是像4px这样的数值，也可以是另外3个关键词（thin，medium，thick）。但要注意这三个关键词没有对应具体的数值，按照CSS标准，只要层层加厚就可以，依赖于浏览器实现。

我们假定一个段落p有个背景色和border style

border的width默认为medium，我们将其修改下：

来玩个极限的，将宽度设置为50px：

当然也可以设置单侧的宽度：

想要去掉border非常简单：

哪怕设置了宽度，如果style被设置为了none，那么border也不会显示，那这是为什么呢？这是因为如果将style设置为none，那么CSS就会将其视为是不存在的，然后自动将其宽度设置为0，无论你自己定义了什么。就像一个杯子已经空了，那么再来描述他是半满的是没有任何意义的。
这一点为什么重要呢，因为很多人容易忘记来声明一个border的样式。例如：

来看个颜色的示例：

当然也可以为不同的side设置不同的颜色：

如果没有设置颜色，那么就会获取当前元素的前景色：

当然也可以设置单侧的border颜色：

就像我们上面提到的，如果border没有style，那么久没有宽度。那如果碰到需要设置宽度但是border又不可见的情况怎么办？答案是将颜色设置为transparent。例如：

试想下这种情况，如果要针对某一边添加widith，style和color。如果单独设置的话其实还是蛮麻烦的：

但如果可以简化的话，那就方便很多了：

针对每个side属性的简化顺序为：

完全可以按照上面的定义来设置更复杂的border设置：

而且这些值得顺序也是不用担心的，下面的规则和上面的是一样的：

另外值得注意的是，在简化版中避免重复的类型值，比如两个width等：

这会导致浏览器直接忽略这条规则。

现在我们回到border属性本身：

来看看怎么用的吧：

这个会自动应用到每个方向上：

inline元素之前已经讲了很多了，现在主要简单讲几个需要注意的点。
首先就是不论border设置的width多厚，inline元素的line height都不会改变：

top和bottom的border是不可以的，但是left和right都是可以的：

而对于可替换元素来说，border是会影响行高的：

为了支持圆角的边框，border引入了border-radius属性来设置：

如果想要实现边角的圆角过渡，可以如下设置：

如果给定的是一个百分比值，那么结果很可能就是一个椭圆，因为长宽的基准值不一样：

另外，跟其他元素一样，border-radius也可以设置多个值,位置从左上沿顺时针到底部左侧。

而参数个数为3个的时候也是一样的，第4个参考第2个：

而在上图中重点到不是边角，而在于内容区域的右下角也发生了圆滑过渡，这是因为内容区域的背景和padding的背景不同所致，我们将在后面一章中详细讨论。
border-radius在原理上修改的是border和background的渲染，而不是盒子模型本身，来具体看下：

刚刚我们看到了设置单个值得情况，那如果设置2个值会怎么样呢？如果我们想要在水平方向设置3英寸，而在垂直高度设置1英寸。我们不能直接这样写：

因为这样我们会将左上，右下对角线一个宽度，而右上和左下对角线有一个宽度。而是应该使用：

而这相当于下面的表达式：

下面是一个简单的例子：

接下来来个更复杂的：

不同的颜色和样式在角的位置的渲染效果是不同的：

上面第一个是简单的圆角，第二个在厚度上出现了变化。第三个颜色和厚度是一样的，但是角的曲线从solid变成了double。而且样式间的过渡被阻断了。第四个我们把厚度和样式做了改变。第5第6个开始出现颜色的变化，但是都是直接的改变而没有渐变。而第七种情况则是厚度相同，颜色发生渐变，但是可以看到，只有外侧发生了变化，而内侧还是直角，示例如下：

值得注意的是，这次是不同在水平和垂直方向加/的，来看下：

上面两个是一样的。

如果你想要使用一张图片来作为border，那么可以使用border-image-source：

让我们使用一张单个圆点的图片作为border背景：

这里需要注意几个地方，如果没有定义border:25px solid; 按照之前的说法，没有style，border其实默认是不显示的。另外就是border-width其实就是后面border图片的宽度。

那令人奇怪的是，为什么图片只出现在角落里，边上为什么没有，而这就需要用到下面这个属性了：

slice也是接收4个值，完全遵从top，right，bottom， right的CSS默认赋值流程，而且数值也是基于百分比的值。

我们就以3 x 3 的网格图为例来看下效果：

注意到中间的一块空了，这是因为css中自动把中间的内容设置为empty，具体会在后面讲解原理。
slice属性的不同百分比对应不同的边缘裁切效果：

这就是我们为什么选取3 x 3网格图的原因，可以清晰的看到裁剪后的边框效果。除了上面的百分比，我们也可以使用数字，一般对于栅格图来说就是像素值，来看个例子：

回到之前的中心空白问题，这其实可以通过fill来填充回来：

而且从效果上来说会覆盖到其他的背景元素之上，因此可以作为背景的替代。
同时之前我们看到的宽度都是相同的，而其实可以为border的4个方向设置不同的宽度，然后border-image会自动匹配到对应宽度：

如果想要自己来设置border图片的宽度，可以使用border-image-width：

border-image-width其实和border-image-slice差不多，而不同的是前者就是border box本身。为了更好理解这个意思，我们假定宽度设置为1em:

其示意图如下：

边框都是1em宽，那么如果来填充呢，这里涉及多个属性，由border-image-slice生成的图片要经过border-image-repeat的处理，然后显示在border-image-width定义的盒子里面。

Css权威指南(4th，第四版中文翻译)-3.特异性和层级继承

参考技术A 第2章里面我们了解了document的结构和CSS选择器是如何查找定位对应的元素的。每一个合理的document都会生成一个结构树，基于此，选择器基于元素的祖先，属性，兄弟节点和更多的因素来定位元素。而且这一dom结构树也是CSS种实现继承的基础。

继承是(Inheritance)CSS属性如何从一个元素传递到它的所有子元素的过程。浏览器在决定给一个元素配置什么样式的时候，除了要考虑继承关系，同时也要考虑元素的特异性(Specificity，这个翻译需要斟酌下，但是意思很明显，存在于多个冲突样式中的优先级机制)。而考虑的这一过程就称为级联（cascade）。接下来我们就来探讨一下这三种机制-特异性，继承和级联。后两者的区别其实可以简单归纳为：h1color:red;color: blue;的结果就是级联，而在h1中创建一个span就是继承。

综上，别管这几个有多抽象，继续学习，会看到回报的。

从第二章我们看到选组元素的方式太多了，所有很有可能同一个元素被很多规则选中，来看看下面的例子：

上面的3对样式中每对都是作用在同一个元素上，那么到底浏览器该在元素上应用哪一个样式呢？结果就在每个选择规则的特异性中。浏览器逐条评估每条选择器规则的特异性，然后将样式声明应用到元素上。当同一个元素中包含多个存在冲突的属性声明时，有最高特异性的属性就会胜出，把其他冲突规则替换掉。

一个选择器的特异性有选择器的组成决定，而一个特异性的值可以分成4部分，就像这样：0,0,0,0。而真实的特异性是由下面这些决定的：

还是举例来说明吧，分别来看看不同的选择规则对应的特异性值：

既然刚学了如果计算特异性值，赶紧用在之前的例子上吧：

虽然我们一般在写CSS的时候会把多个属性都写在一起，例如：

然而实际上浏览器为了更好的计算特异性值实际会把聚合的属性进行单独的拆分：

咱们再来考虑一个稍微复杂的例子：

基于这个结构最终显示的效果是这样的：

从这个例子中，我们可以很好的看到浏览器按照之前说的特异性的规则展示对应不同值得样式结果。可以看到，浏览器要对每个元素进行拆分，然后计算特异性值后再确定对这个元素渲染那些样式，想想整个流程就很繁杂，幸好浏览器都自动帮我们做好了，而且这是我们后面讲到的级联的很重要的一环。同样，详细了解浏览器的渲染流程也对我们优美的书写CSS样式有很大助益。

通用选对特异性值是没有贡献的，但它是有值的，虽然值是0,0,0,0,但这和没有特异性值是有区别的，后面会在继承章节中详细讨论。所以下面的结果是显而易见的：

除了div的后代p显示为黑色外，其他都显示为灰色。而通用选择器是不贡献特异性值得，因此下面两个表达式的值也是一样的：

之前有提过直接的ID选择器和通过属性选择器设置ID值，他们最终计算的特异性值是不同的。我们先回到之前的一个例子：

因为直接用ID选择器贡献的特异性值为0,1,0,0，而属性贡献的值为0,0,1,0, 所以下面的结果也是显而易见的：

到现在肯定很多读者会想，之前计算的特异性值的4位里面第一位是什么时候设置的？答案就是为内联样式设计的，比其他的所有声明优先级都高。来看看下面的例子：

结果很明显h1就是绿的，因为内联样式的值更高，或者说优先级更高。

有时候特异性值更高的样式还并不是你想要的，这时候可使用!important来表示那些特别重要的样式，不过格式有严格的规定，就是必须在分号前面加，例如：

!important表达式必须正确，不然的话会报错。那如果存在对同一个样式有多个important声明会怎样呢？那么这些样式都不会被应用，所以需要保证important的唯一性。

其实浏览器是这么处理important样式和非important样式的：将它们单独分成两拨，important的一拨优先级更高，并且在这个组内处理自身的冲突啥的；同样的逻辑对应于非important组，组内采用特异性值来解决冲突。来看个例子：

继承，顾名思义就是属性在祖先-后代节点间的传递机制。比如说一个在h1标签中设定的颜色，那么h1中的所有后代文本都会继承。

上例中em就是继承了h1中的gray颜色。来看个ul标签的例子：

可以看到ul的所有li元素也都继承了这一特性。继承看似简单不过也需要注意几点：

有没有很意外em中的元素为啥还是灰的，照理说应该都是黑色才对，就是因为继承来的黑色属性没有特异性值，而被全局的样式给替换了。

有时候没有特异性值也会带来麻烦，比如看：

如果id=toolbar的元素下面有链接，那么就很有可能因为没有定义而采用浏览器的默认样式，一般来说是这样：

解决方案归根结底还是要有特异性值，可以有多种方法都是可以的：

再来考虑下个问题，如果两个具有完全相同特异性值的元素作用在同一个节点上，那该怎么办？比如说像这样：

还记得css为啥叫css么？Cascading Style Sheet,级联样式表，通过定义相关的规则来结合继承和特异性值。来看看都有哪些吧。

为了更好理解，我们对后四个规则进行详细说明：

虽然p本身有内联的样式，但因为标记了!important,所以还是显示为灰色。另外即使给内联样式加上了important也没啥用：

在上面权重相同的情况下对比源头，作者的优先级高于读者的。但如果在important情况下，读者的优先级要高于作者的，总结一下顺序就是：

如果上面的类型相同，则会进入到这一步，判断特异性值。

如果特异性值也一致，最后判断下出现的顺序，后出来的覆盖先前的。

结果就是blue颜色。而这一顺序对import进来的样式也是一样的。

而就是因为这个原因才会有链接推荐样式的顺序方案，一般称为LVFHA，就像下面这样：

这个顺序还可以有另一种玩法，实现的效果是只有未访问的链接才会有hover样式，而且所有链接都会有active样式，就像下面这样：

不过最好的办法就是使用串联的伪类来彻底消除这种情况，为不同的状态设定不同的样式：

不过如果引入了active类的话还是会触发冲突：

如果我们把最后两个active状态移到hover前面，那么它们就会被忽略，当然也是有办法解决的，就是引入更多的伪类：

可能对CSS来说最基本的就是本章所讲的级联机制本身，如何解决冲突，如何实现继承，如何实现排序，都有一套底层的规则在作用。