【前端圭臬】四：CSS 核心机制——如何确定一个属性的值？

前言

按说这篇文章要说的内容搞前端的同学应该都很熟悉，但我发现问答社区里全是诸如为什么 body 四周有空白，为什么样式没有生效之类的问题。这说明很多人还是缺乏把知识串联起来，定位问题、解决问题 的能力。

什么叫定位问题？比如上面说的 body 四周有空白，你明明没有特别设置属性，那为什么会有空白呢？

有经验的同学知道，原因很可能在于浏览器的默认样式（属于用户代理）。但假设你从来没有听过这个词，你应该怎么办呢？

你想，你没有设置，显然有别的东西设置了。你知道 CSS 的全称是层叠（级联）样式表吧，什么是层叠？层叠不就是指不同来源的样式叠加在一起么。那么样式的来源可以是哪里？有哪些不是由开发者设置的？想到这一步，再去查阅 CSS 层叠对应的文档，很快就能找到答案。

当然，遇到这种问题时你也可以直接求助搜索引擎，毕竟有很多人踩过同样的坑。在工作或学习中，我们要善于使用搜索引擎，但当你遇到不那么常见的问题时，毕竟还是得想办法自己解决，而能够解决不常见的问题才是你的核心竞争力。

为了回答题目的问题，我们需要了解 优先级、层叠与继承。（Specificity, Casca