您的位置首页散文精选

一篇读懂mdn(mdn中文文档)

来源：互联网
|
2023-05-25
|
0 条评论
|
T小字　 T大字

原文链接:https://elad.medium.com/how-does-css-work-92fe7116916d译者:bb老猫出处:htt

一篇读懂mdn(mdn中文文档)

原文链接:https://elad.medium.com/how-does-css-work-92fe7116916d译者:bb老猫出处:https://juejin.cn/post/6930890256019357704

概述副标题（补充）：理解浏览器默认的样式行为在你为网站中的某个 DOM 元素编写 CSS 样式之前，浏览器会给这个 DOM 元素添加一个默认的样式你有没有想过这些默认样式是由谁来决定的？在这篇文章中，我将教会你：。

浏览器中不同级别的 CSS每一级 CSS 是如何工作的我们该如何去控制

在我刚开始学习 CSS 的时候，我还以为所有的 CSS 默认样式都来自于浏览器自身的 “User-Agent Stylesheet” 文件但是后来，我发现我错了，这只是冰山一角让我们开始吧！Level1——CSS 属性的默认样式。

每个 CSS 属性都有一个规范这些规范也是 W3C 标准的一部分初始值每个 CSS 属性都有一个初始值这个初始值不依赖于该 CSS 属性所应用的 HTML 元素也就是说，对于所有的 HTML 元素，如果具有某个 CSS 属性的话，那么这个属性都会有一个初始值，并且初始值都是一样的。

我相信绝大多数 web 开发者都不知道这一点以 CSS 的定位属性（ position ）为例：.some-class{ position: absolute; top: 20px; left。

: 20px; } 复制代码你知道 position 属性的默认值是什么吗？很多 web 开发者都回答不出来正确的答案是： static 类似的还有其它与定位相关的属性，比如： top / bottom。

/ left / right ，它们的初始值都是 auto 请记住—— 在你开始编写样式之前，这些 CSS 属性的基本样式就已经存在了下面是 CSS 定位相关属性的默认值：{ position: static;

top: auto; bottom: auto; left: auto; right: auto; } 复制代码想知道每个 CSS 属性的初始值是什么？最佳途径就是查阅 MDN 文档：中文文档（查阅 “规范” 部分）：

https://developer.mozilla.org/zh-CN/docs/Web/CSS/position#specifications英文文档（查阅 “Formal Definition” 部分）：

https://developer.mozilla.org/en-US/docs/Web/CSS/position#formal_definition如下图所示：

继承第二个有趣的特性就是：部分 CSS 属性具有 “继承行为”也就是说，假设我们给某个 HTML 元素设置了一些特定的样式，那么该元素的后代都会继承这些样式一般情况下，以下两种类型的 CSS 属性会具有继承的行为：。

文本类型： font-family 、 font-size 、 color 、 text-align排版类型： CSS 排版属性介绍想象一下：当你给元素设置了 font-size: 20px

属性，那么元素的所有后代元素都会继承这个 font-size ，除非你给某个后代元素重新设置了 font-size 但是如果你给元素设置了 padding: 20px 属性，那么其后代元素都不会继承

padding ，为什么呢？因为 padding 属性是没有继承行为的，也就是说，它是不能继承的实际上，我们可能在没有意识到的情况下，就使用了继承HTML： Some text in the body HTML element 。

some text on the div HTML element

复制代码CSS：body { font-size: 20px; /* body 和 div 都会继承这个样式 */

padding: 20px; /* 只对 body 自身有效 */ } 复制代码

那么问题来了，我们在浏览器进行调试的时候怎么才能知道某个 CSS 属性是否可以继承呢？实际上，在我们使用 “审查元素” 功能查看

元素的样式的时候，浏览器的开发者工具会展示哪些样式是从

继承而来的。例如在下图中， font-size 属性是可继承的，所以会高亮显示；反之， padding 是不可继承的，会置灰显示：

检查继承行为的正式方式要想了解一个 CSS 属性是否可继承，除了自己尝试之外，另一种方式就是查阅 MDN 文档中的 “规范” 部分。**如下图所示：**仔细对比左右两块区域的差距即可：

Level2——User-Agent-Stylesheet“User-Agent-Stylesheet”：浏览器默认样式表在 Level1 章节中，我们了解到：所有的 HTML 元素上的所有 CSS 属性具有相同的初始值

所有的 CSS 属性有且只有一个初始值在本章节，我将介绍 “User-Agent-Stylesheet” —— 这是一种区别于不同类型的 HTML 元素的特殊样式表“User-Agent-Stylesheet”其实就是一个 CSS 文件，区别在于不同的浏览器厂商实现了不同的版本。

与 Level1 章节中介绍的 “CSS 属性的默认值” 截然相反的是：后者表明 CSS 属性的初始值和 HTML 元素没啥关系；而前者则通过为不同的 HTML 标签创建样式，从而关联 HTML 和 CSS。

举个例子： display 属性的初始值无论在什么情况下，都是 inline 但是在我们的认知中，

元素默认的样式是： display: block 产生这种变化的根本原因就在于 “User-Agent-Stylesheet”。

验证上述例子的最好方式就是审查和

元素：当我们审查元素的时候，貌似看不到任何样式这是因为开发者工具是不会显示 “CSS 属性的初始值（Level-1）” 的；相反，会显示默认样式表（“User-Agent-Stylesheet”（Level 2））。

你想一下：每个 CSS 属性都有一个初始值（CSS 属性的默认样式（Level-1）），当你调试的时候，肯定不想让所有的初始值都显示出来 display 的初始值是 inline 因此它不会出现在浏览器的 “审查元素” 调试栏中。

当我们审查

元素的时候，可以看到 display: block 样式显示出来了，这是因为 “User-Agent-Stylesheet（Level 2）” 文件中的样式值覆盖了 display

属性的初始值 inline （“CSS 属性的初始值（Level 1）”）HTML 元素的特定样式由谁来决定？HTML 元素的默认样式是由 W3C/WHATWG 的 web 标准来决定的然而，与 Level-1 提到的 “CSS 属性的初始值” 不同的是：所有浏览器都可以根据这个标准来 “添油加醋”，进而定义了不同的默认样式。

下图所示的是：根据 CSS2.2 标准，针对 HTML4 而制定的 CSS 默认样式表：

（附上其它版本的 CSS 标准： CSS2.1 ， CSS2.2 ， CSS3 ）Level3——Normalize CSS因为不同浏览器都实现了不同的 “User-Agent-Stylesheet（Level-2）”，所以后来又出现了。

“Normalize CSS” “Normalize CSS” 可以让样式在不同浏览器上具有相同的显示效果“Normalize CSS” 是什么？它是如何工作的？“Normalize CSS”指的是：通过创建一份默认的 HTML 样式来覆盖 “User-Agent-Stylesheet（Level 2）”，使得不同的浏览器中的 HTML 元素的默认样式保持一致。

而 normalize.css 则是 “Normalize CSS” 的一个产物如下所示的样式，是 normalize.css 中的一部分：/** * Render the `main` element consistently in IE. */。

main { display: block; } 复制代码Normalize.css 项目由 Nicolas Gallagher 创建的 normalize.css 是目前最受欢迎的 Normalize.css 项目。

Level4——CSS Reset在很多场景下，我们可能并不想使用浏览器提供的默认样式（“User-Agent-Stylesheet（level-2）”），比如： font-size 和 margin ，于是

“CSS Reset” 便应运而出了“CSS Reset” 是什么？它是如何工作的？“CSS Reset”指的是：强制覆盖浏览器默认样式表（“User-Agent-Stylesheet（Level-2）”），重置浏览器默认样式表中所有属性的值。

以