重绘和回流和重排（重绘和回流和重排的区别）



Web 开发中，CSS (Cascading Style Sheets) 是决定网页视觉呈现的关键技术之一。它为 HTML (Hypertext Markup Language) 提供样式，使得开发者能够控制页面布局、字体、颜色和其他视觉元素。然而，CSS 的强大功能伴随着一定的复杂性，尤其是在处理层叠、优先级和继承这些核心概念时。

什么是层叠？

"层叠" (Cascade) 是 CSS 的核心概念之一。简单来说，层叠描述了当多个 CSS 规则应用到同一个 HTML 元素时，浏览器如何确定哪些规则最终会生效。CSS 中的 "层叠" 概念来源于其名称中的 "Cascading" 一词，这意味着当有冲突的样式规则时，它们会像瀑布一样层层叠加，最终的样式由最优先的规则决定。

冲突规则

在实际应用中，同一个 HTML 元素可能会匹配多个 CSS 规则。这些规则可能来自不同的样式表，或者即使在同一张样式表中，也可能有多个选择器同时匹配同一元素。例如：

在上述例子中，​​ 元素同时匹配了三条不同的规则，它们分别是：

1. 选择器 ​​（选择所有的段落元素）
2. 类选择器 ​​（选择带有 ​​ 类的元素）
3. ID 选择器 ​​（选择 ID 为 ​​​ 的元素）

理解优先级

CSS 冲突规则的解决依赖于 "优先级" (Specificity) 的概念。优先级是根据选择器的类型来确定的，每种类型的选择器都被赋予了不同的权重。

• 元素选择器 (如 ​​) 的权重最低。
• 类选择器 (如 ​​) 的权重高于元素选择器。
• ID 选择器 (如 ​​) 的权重最高。

权重的计算通常可以通过以下方式理解：

• ID 选择器：权重为 ​​
• 类选择器、伪类选择器、属性选择器：权重为 ​​
• 元素选择器、伪元素选择器：权重为 ​​

在我们的例子中：

• ​​ 选择器的优先级为 ​​
• ​​ 选择器的优先级为 ​​
• ​​ 选择器的优先级为 ​​

由于 ​​ 选择器的优先级最高，因此最终应用的颜色是绿色 (​​​)。

代码示例：优先级的比较

为了更好地理解优先级的概念，我们可以通过以下示例进行对比：

在这个例子中，​​ 元素匹配了五个选择器，优先级从低到高依次为：

1. ​​ (1)
2. ​​ (10)
3. ​​ (11)
4. ​​ (100)
5. ​​ (110)

​​ 的优先级最高，段落显示为紫色 (​​)。

什么是继承？

继承 (Inheritance) 是 CSS 中另一个重要的概念。继承允许子元素自动获取父元素的某些样式属性，而不需要在每个子元素上重复定义这些样式。通常情况下，继承适用于字体、颜色等属性，而像边框、背景、边距等布局属性则不会继承。

理解继承的工作原理

考虑以下 HTML 和 CSS 代码：

在这个例子中，​​ 元素定义了 ​​ 和 ​​ 样式。由于 ​​ 和 ​​ 是可继承的属性，​​ 元素将自动继承 ​​ 的字体和颜色设置。如果 ​​ 元素没有指定其他的 ​​ 或 ​​，那么它会继承自 ​​ 的样式。

由于 ​​ 元素拥有类 ​​，覆盖继承的颜色值，并显示为红色。

控制继承

有时你可能希望阻止某些属性的继承，或者确保某些属性总是被继承。这时你可以使用以下几个技术：

​​ 关键字：强制一个元素继承其父元素的属性值。

​​ 关键字：将属性值重置为其默认值。

​​ 关键字：对于可继承的属性，​​ 表示继承父元素的值；对于不可继承的属性，​​ 将其重置为默认值。

重设所有属性值

在一些情况下，你可能希望重置所有继承的样式，使得一个元素不受任何父元素的影响。为此，你可以使用通用选择器 ​​​ 来应用重置样式：

这种方式常用于 CSS reset 或者 CSS normalization，以确保所有浏览器中的默认样式一致。

什么是层叠资源顺序？

在处理 CSS 冲突时，除了选择器的优先级外，层叠资源顺序 (Cascade Order) 也会影响最终的样式选择。层叠资源顺序指的是当多个 CSS 规则有相同的优先级时，浏览器根据其来源的顺序来决定哪条规则生效。

CSS 规则的来源可以分为以下几类：

1. 浏览器默认样式：即浏览器在没有任何样式表的情况下对 HTML 元素应用的默认样式。
2. 外部样式表：通过 ​​ 标签引入的样式表。
3. 内部样式表：在 HTML 文档的 ​​ 标签中定义的样式。
4. 内联样式：直接在 HTML 元素的 ​​​ 属性中定义的样式。

代码示例：层叠资源顺序的应用

在这个例子中，​​ 元素同时受到三种不同来源的样式影响：

1. 外部样式表 (​​)：假设其中设置了 ​​。
2. 内部样式表：​​ 标签中设置了 ​​。
3. 内联样式：在元素的 ​​ 属性中设置了 ​​。

根据层叠资源顺序，内联样式的优先级最高，因此段落显示为红色 (​​​)。

​​ 的使用

在一些特殊情况下，你可能希望强制一个 CSS 规则优先于所有其他规则，包括内联样式。这时可以使用 ​​​ 关键字：

当使用 ​​ 后，即使在内联样式中定义了 ​​，​​ 也将显示为绿色。这是因为 ​​ 提升了该规则的优先级，使其超越常规的层叠资源顺序。

过度使用 ​​ 会导致样式管理的混乱，建议仅在无法避免的情况下使用。

什么是级联层？

级联层 (Cascade Layer) 是 CSS 层叠模型的一部分，用来控制哪些样式规则在最终的级联中生效。CSS 将所有可能的样式来源分为以下几层：

1. 用户代理样式：即浏览器默认的样式。
2. 用户样式表：用户定义的样式，通常通过浏览器设置。
3. 作者样式表：由网页开发者定义的样式。
4. 内联样式：在 HTML 中定义的 ​​ 属性。
5. 重要样式：使用 ​​​ 声明的样式。

代码示例：级联层的顺序

以下代码展示了不同层级的样式如何影响最终显示效果：

在这个例子中，​​ 元素最终会显示为红色，内联样式的优先级最高，即使存在用户样式表和作者样式表。

总结：如何协同工作

通过理解 CSS 的层叠、优先级、继承以及级联层的顺序，你可以更好地控制网页的视觉表现，解决样式冲突，并确保样式表易于维护。

为了简化复杂的 CSS 项目，建议你：

1. 清晰地组织样式表：按层级分开样式，避免过度依赖 ​​。
2. 使用预处理器：如 SASS 或 LESS，来管理复杂的样式。
3. 测试样式的效果：通过浏览器的开发者工具，实时查看和调整样式。

以下是两道CSS综合练习习题，帮助你进一步掌握CSS的层叠、优先级、继承和其他相关概念。

习题 1：CSS 优先级与层叠顺序

题目描述：

给定以下HTML和CSS代码，要求对页面中的段落样式进行分析和修改，使其满足以下要求：

1. 段落1 应显示为蓝色。
2. 段落2 应显示为绿色。
3. 段落3 应显示为橙色，且这个样式不能被任何其他样式覆盖。
4. 段落4 应显示为紫色，且只能通过使用​​来实现。

任务：

1. 根据题目要求，调整CSS代码，使得每个段落的颜色符合要求。
2. 解释你所做的调整以及它们如何影响了最终的样式表现。

代码示例：

习题 2：CSS 继承与样式覆盖

题目描述：

给定以下HTML和CSS代码，要求你通过修改样式，使页面中的段落显示如下效果：

1. 段落1 应继承​​元素的字体和颜色，但显示为斜体。
2. 段落2 不应继承​​的字体，但颜色与​​一致。
3. 段落3 应覆盖所有继承的样式，使用指定的字体和颜色。
4. 段落4 应使用默认字体，并显示为红色，但不能直接修改段落元素的样式属性。

任务：

1. 修改CSS代码，使得每个段落的样式符合题目要求。
2. 解释你所做的修改以及它们的作用。

代码示例：

如有表述错误及欠缺之处敬请批评指正。

版权声明：

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！

转载请注明出处，原文链接：https://www.xkablog.com/bcyy/13993.html