css叠层_管理CSS层叠_CSS层叠, CSS3, 会员专栏 教程_w3cplus

了解CSS的同学都应该知道，CSS是由Cascading Style Sheets三个单词首字母组成，简单的讲就是层叠样式表。事实上，在CSS中，层叠(也有同学称之为级联)也是一个非常基础，但也是一个非常重要的概念。只有理解了层叠这个概念才能更好的理解和使用CSS中的每一个属性。话又说回来，既然是一个基础概念，懂CSS的同学都知道，那还有必要来说这个吗？那我就得问一下了，你真的懂CSS中的层叠，能使用好CSS的层叠吗？如果你没有这方面的自信，那不仿花点时间来阅读这篇文章。

管理CSS层叠的困惑

有些时候CSS层叠成为很多开发者(特别是不太熟悉CSS的开发人员)的眼中钉。为什么这么讲呢？在CSS中有些属性是有继承关系的(之前在当元素元素的祖先元素设置了样式)，当我们想要恢复属性的默认值的时候，就必须记住该属性的默认值是什么？可想而之，如果不熟悉其默认值，又想覆盖继承过来的样式，那将是多么一件痛苦的事情。

所幸的是，CSS提供了一些机制来处理继承。

理论上讲，任何CSS属性都具有除none之外的四个值：initial、inhert、unset和revert。这些值就是CSS用来处理继承的机制。

虽然这些值有些还没有普遍得到浏览器的支持，为了更好的管理CSS层叠，或者说处理好CSS的继承，我们还是很有必要的对他们进行了解。

回顾CSS的语法

CSS的语法其实非常的简单，在CSS样式表中，我们都像下面这样使用CSS：

比如：

html {

font-size: small;

}

使用规则是非常的简单，问题还是前面说的，有些属性是会被继承的，比如上面代码中的font-size，它就是一个会被继承的属性，如果你的代码中在html元素设置了font-size:small;属性，那么html元素的所有后代元素都将被继承这个属性，比如下图中蓝框中显示的一样：

上图蓝框中告诉我们body元素继承了html元素中的font-size:small;。开发者工具中会提示我们“Inherited from html”。那么问题来了，在CSS中哪些属性是会被继承的呢？其实在W3C规范中各个属性的描述已清很清楚的告诉我们了。比如说border属性，在描述其语法时，在列表中有一个Inherited描述项的值为no。这也就告诉我们border属性是不能被继承的。反之，再来看一个font-size属性，语法描述的列表中同样有一个Inherited描述项，只不过它的值不是no，而是yes，也就是说font-size属性是会被继承的。这决定了当你没有为元素的属性指定值时该如何计算值。

如果你平时阅读规范仔细的话，你不难发现，在介绍每个属性的语法参数的时候，都会有一个Initial参数，该参数主要来指定每个属性的初始值。CSS属性已经给出的初始值针对不同的继承和非继承属性有关不同的含义：

对于继承属性，初始值只能被用于没有指定值的根元素上

对于非继承属性，初始值可以被用于任意没有指定值的元素上

到目前为止，我们引出两个概念：初始值和继承值，除了这两个概念之外，在CSS属性中还有一个计算值(Computed)，该值由指定的值计算而来：

处理特殊的值inherit和initial

根据属性的摘要中关于计算值描述的方法计算出值

计算属性的计算值通常包括将相对值转换成绝对值，比如em和%这样的单位。比如，有一个元素的属性值：

font-size: 16px;

padding-top: 2em；

其中padding-top:2em;就是一个计算值，其计算出来的值将根据font-size做为基数计算(在此示例当中)，在此计算出来的值是32px。

然而，有些属性的百分比值会转换成百分比的计算值(这些元素的百分比相对于需要布局后才能知道的值，比如width、margin-right、text-indent和top等)。另外，line-height属性值如果没有单位的数字，则该值就是计算值。

对于CSS的计算值，在不同的浏览器中其计算出来的值有时候会稍有偏差。

如果你感兴趣的话，可以打开浏览器的开发者工具，查看对应的计算值(比如，Chrome开发者工具，有一个Computed选项，该选项展示的就是对应的CSS计算值)，如下图所示：

其中计算值的最主要用处是继承，包括inherit关键词。

最后总结两点：

当元素的一个继承属性没有指定值时，则取父元素的同属性的计算值，只有文档根元素取该属性的概术中给定的初始值

当元素的一个非继承属性没有指定值时，则取属性的初始值

看到这里，或许你知道了什么叫继承和非继承，以及他们取值方式。但你可能还在纠结，在CSS中到底哪些属性是继承属性，哪些不是继承属性？其实这个问题我也没办法准确的回答您，因为我也没有做过这方面的统计。不过我可以告诉大家两个小经验：

在CSS中一些关于字体、文本和颜色等属性都是可继承属性

在CSS中一些跟布局和盒子模型的属性都是非继承属性

如果你想准确的知道答案，可以通过这里整理的属性表格进行统计。只要Inherited选项是Yes的都表示是继承属性，否则都是非继