css - CSS中使用inherit的必要性

Question

一直在查看一个高级主题，并看到页面上的各种文本和元素，在检查时 - 许多具有继承和 0 的值。

如果不需要并自动从父级继承，为什么这些不会留空？它可能会节省加载时间吗？

margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
font-family: inherit;
font-size: 100%;
font-style: inherit;
font-weight: inherit;

Answer 1

这样做是为了覆盖浏览器默认值。

大多数浏览器本身应用自己的样式声明来使基本的 HTML 页面看起来更漂亮。不幸的是，这些样式声明经常与设计师希望网页的外观发生冲突。克服这个问题的方法是将样式重置为它们默认应有的样式。

例子

一个很好的例子就是标题和 p 标签。举个例子:

<h1>Hello, world!</h1>
<p>Woah, that's a big heading!</p>

在没有应用任何自定义样式的情况下，这些元素使用浏览器提供的样式。此处使用的一种样式是 margin，这就是在每个元素之间放置大间隙的原因。

我们可以通过将 margin 设置为 0 来自行重置这些:

* {
  margin: 0;
}

<h1>Hello, world!</h1>
<p>Woah, that's a big heading!</p>

---

因为需要重置这样的样式公共(public)样式表如Normalize.css存在，其目的只是重置(和规范化)所有元素，使其在不同浏览器中看起来相同。