HTML、CSS 和 DOM 中的空白符是如何处理的

2024-07-12 08:44| 来源: 网络整理| 查看: 265

大多数空白字符会被忽略，但不是所有的都会被忽略。在前面的示例中，“Hello”和“World!”之间的一个空格在浏览器中渲染时仍然存在。浏览器引擎中有一些规则来决定哪些空白字符是有用的，哪些是没用的——这些规则至少在 CSS 文本模块第 3 级中作了部分说明，特别是关于 CSS white-space 属性和空白符处理细节的部分，但我们也在下面提供一个更简单的解释。

示例

让我们看看其他示例，为了使它看起来更简单，我们添加了一个注释，将所有的空格显示为“◦”，所有的制表符显示为“⇥”，所有的换行符显示为“⏎”：

这个示例

html Hello World!

会在浏览器中像这样渲染：

解释

元素只包含行内元素，实际上包含：

一个文本节点（包含一些空格，单词“Hello”和一些制表符）。一个行内元素（，包含一个空格和一个单词“World!”）。另外一个文本节点（只包含制表符和空格）。

正因为如此，它建立了所谓的行内格式化上下文。这是浏览器引擎可能使用的布局渲染上下文之一。

在这个上下文中，空白符的处理可以总结如下：

首先，换行前后的所有空格和制表符都会被忽略，所以，如果我们拿之前的示例标记： html◦◦◦Hello◦⏎ ⇥⇥⇥⇥◦World!⇥◦◦ 然后应用这条规则，会得到： html◦◦◦Hello⏎ ◦World!⇥◦◦ 然后，所有制表符视作空格字符，所以这个示例会变为： html◦◦◦Hello⏎ ◦World!◦◦◦ 然后，换行符被转化为空格符： html◦◦◦Hello◦◦World!◦◦◦ 之后，任何紧跟在另一个空格之后的空格（甚至跨越两个独立的行内元素）都会被忽略，所以我们会得到： html◦Hello◦World! 最后，元素开头和结尾的空格序列被删除，所以我们最终得到了： htmlHello◦World!

这就是为什么人们在访问网页时，会看到“Hello World!”这句话很好地写在页面的顶部，而不是一个奇怪的缩进的“Hello”，但在下面一行有一个更奇怪的缩进的“World!”。

备注：从版本 52 开始，Firefox 开发者工具支持高亮文本节点，使得观察包含节点中包含的空白字符变得更加容易。纯的空白符节点会有一个“whitespace”标记。

【本文地址】

公司简介

联系我们