CSS 属性计算过程
你是否了解 CSS 的属性计算过程呢？
有的同学可能会讲，CSS属性我倒是知道，例如：
p{
color : red;
}
上面的 CSS 代码中，p 是元素选择器，color 就是其中的一个 CSS 属性。
但是要说 CSS 属性的计算过程，还真的不是很清楚。
没关系，通过此篇文章，能够让你彻底明白什么是 CSS 属性的计算流程。
首先，不知道你有没有考虑过这样的一个问题，假设在 HTML 中有这么一段代码：
<body>
<h1>这是一个h1标题</h1>
</body>
上面的代码也非常简单，就是在 body 中有一个 h1 标题而已，该 h1 标题呈现出来的外观是如下：
目前我们没有设置该 h1 的任何样式，但是却能看到该 h1 有一定的默认样式，例如有默认的字体大小、默认的颜色。
那么问题来了，我们这个 h1 元素上面除了有默认字体大小、默认颜色等属性以外，究竟还有哪些属性呢？
答案是**该元素上面会有 CSS 所有的属性。**你可以打开浏览器的开发者面板，选择【元素】，切换到【计算样式】，之后勾选【全部显示】，此时你就能看到在此 h1 上面所有 CSS 属性对应的值。
换句话说，我们所书写的任何一个 HTML 元素，实际上都有完整的一整套 CSS 样式。这一点往往是让初学者比较意外的，因为我们平时在书写 CSS 样式时，往往只会书写必要的部分，例如前面的：
p{
color : red;
}
这往往会给我们造成一种错觉，认为该 p 元素上面就只有 color 属性。而真实的情况确是，任何一个 HTML 元素，都有一套完整的 CSS 样式，只不过你没有书写的样式，大概率可能会使用其默认值。例如上图中 h1 一个样式都没有设置，全部都用的默认值。
但是注意，我这里强调的是“大概率可能”，难道还有我们“没有设置值，但是不使用默认值”的情况么？
嗯，确实有的，所以我才强调你要了解“CSS 属性的计算过
最低0.47元/天 解锁文章
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
