CSS属性计算逻辑

CSS 属性计算逻辑

首先,假设在 HTML 中有这么一段代码,在 body 中有一个 h1 标题:

<body><h1>这是一个h1标题</h1>
</body>

目前我们没有设置该 h1 的任何样式,但是却能看到该 h1 有一定的默认样式,例如有默认的字体大小、默认的颜色,还有CSS 所有的属性,可以打开浏览器的开发者面板,选择【元素】,切换到【computed】,之后勾选【全部显示】,此时你就能看到在此 h1 上面所有 CSS 属性对应的值。

image-20220813141516153

所以可以说任何一个 HTML 元素,都有一套完整的 CSS 样式,只不过没有在代码中书写的样式,大概率可能会使用其默认值。例如上图中 h1 一个样式都没有设置,全部都用的默认值。
总的来讲,属性值的计算过程,分为如下这么 4 个步骤:

  • 确定声明值
  • 层叠冲突
  • 使用继承
  • 使用默认值

确定声明值

首先第一步,是确定声明值。所谓声明值就是自己所书写的 CSS 样式代码,例如:

p{color : red;
}

这里我们声明了 p 元素为红色,那么就会应用此属性设置。

当然,除了作者样式表,一般浏览器还会存在“用户代理样式表”,简单来讲就是浏览器内置了一套样式表。
image-20220813143500066

在上面的示例中,作者样式表中设置了 color 属性,而用户代理样式表(浏览器提供的样式表)中设置了诸如 display、margin-block-start、margin-block-end、margin-inline-start、margin-inline-end 等属性对应的值。

这些值目前来讲也没有什么冲突,因此最终就会应用这些属性值。

层叠冲突

在确定声明值时,可能出现一种情况,那就是声明的样式规则发生了冲突。此时会进入解决层叠冲突的流程。而这一步又可以细分为下面这三个步骤:

  • 比较源的重要性
  • 比较优先级
  • 比较次序

比较源的重要性

当不同的 CSS 样式来源拥有相同的声明时,此时就会根据样式表来源的重要性来确定应用哪一条样式规则。
样式表的源整体来讲有三种来源:

  • 浏览器会有一个基本的样式表来给任何网页设置默认样式。这些样式统称用户代理样式
  • 网页的作者可以定义文档的样式,这是最常见的样式表,称之为页面作者样式
  • 浏览器的用户,可以使用自定义样式表定制使用体验,称之为用户样式

对应的重要性顺序依次为:页面作者样式 > 用户样式 > 用户代理样式

更详细的来源重要性比较,可以参阅MDN

举例:现在有页面作者样式表用户代理样式表中存在属性的冲突,那么会以作者样式表优先。

p{color : red;display: inline-block;
}

image-20220813144222152

可以明显的看到,作者样式表和用户代理样式表中同时存在的 display 属性的设置,最终作者样式表干掉了用户代理样式表中冲突的属性。这就是第一步,根据不同源的重要性来决定应用哪一个源的样式。

比较优先级

如果是在同一个源中有样式声明冲突怎么办呢?此时就会进行样式声明的优先级比较。

例如:

<div class="test"><h1>test</h1>
</div>
.test h1{font-size: 50px;
}
h1 {font-size: 20px;
}

在上面的代码中,同属于页面作者样式,源的重要性是相同的,此时会以选择器的权重来比较重要性。很明显,上面的选择器的权重要大于下面的选择器,因此最终标题呈现为 50px

比较次序

最后一种情况,那就是样式声明既是同源,权重也相同。此时就会进入第三个步骤,比较样式声明的次序。举个例子:

h1 {font-size: 50px;
}
h1 {font-size: 20px;
}

在上面的代码中,同样都是页面作者样式,选择器的权重也相同,此时位于下面的会层叠覆盖掉上面的那一条样式声明,最终会应用 20px 这一条属性值。

image-20220823183928330

使用继承

层叠冲突这一步完成后,解决了相同元素被声明了多条样式规则究竟应用哪一条样式规则的问题。那么如果没有声明的属性呢?此时就使用默认值么?此时还有第三个步骤,那就是使用继承而来的值。例如:

<div><p>Lorem ipsum dolor sit amet.</p>
</div>
div {color: red;
}

在上面的代码中,我们针对 div 设置了 color 属性值为红色,而针对 p 元素我们没有声明任何的属性,但是由于 color 是可以继承的,因此 p 元素从最近的 div 身上继承到了 color 属性的值。
image-20220813145102293

这里有两个点需要注意:首先第一个是最近的 div 元素,看下面的例子:

<div class="test"><div><p>Lorem ipsum dolor sit amet.</p></div>
</div>
div {color: red;
}
.test{color: blue;
}

image-20220813145652726

第二个就是哪些属性能够继承?可以在 MDN 上面查阅,例如text-align:
image-20220813150147885

使用默认值

到此为止,如果属性值都还不能确定下来,那么就只能使用默认值:
image-20220813150824752
前面我们也说过,一个 HTML 元素要在浏览器中渲染出来,必须具备所有的 CSS 属性值,但是绝大部分我们是不会去设置的,用户代理样式表里面也不会去设置,也无法从继承拿到,因此最终都是用默认值。

好了,这就是关于 CSS 属性计算过程的所有知识了。

一道面试题

下面的代码,最终渲染出来的效果,a 元素是什么颜色?p 元素又是什么颜色?

<div><a href="">test</a><p>test</p>
</div>
div {color: red;
}

image-20220813151941113

实际上原因很简单,因为 a 元素在用户代理样式表中已经设置了 color 属性对应的值,因此会应用此声明值。而在 p 元素中无论是作者样式表还是用户代理样式表,都没有对此属性进行声明,然而由于 color 属性是可以继承的,因此最终 p 元素的 color 属性值通过继承来自于父元素。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/796964.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

2024 年最新使用 Python 部署腾讯云服务器搭建企业微信机器人应用详细教程

企业微信机器人是一种可以在企业微信工作群中执行特定任务的自动化工具。它具备丰富的功能&#xff0c;可以帮助企业提高团队协作效率&#xff0c;简化工作流程&#xff0c;并为员工提供更好的工作体验。 获取企业 ID 信息 企业信息页面链接地址&#xff1a;https://work.wei…

oracle pdb从12.1迁移到19.20

oracle pdb从12.1迁移到19.20 1 unplug &#xff08;12c的环境执行&#xff09; SQL> alter pluggable database VINCENT_TEST close immediate; SQL> alter pluggable database VINCENT_TEST unplug into /u01/backup/temp_20240401/VINCENT_TEST.xml;2 plug &#xf…

Python常用算法--排序算法【附源码】

应用具体python案例方式展示各种排序的要点,特别是希尔排序、插入排序、选择排序、冒泡排序、堆排序、快速排序、归并排序七个具体的排序算法。 一、希尔排序: 解释:希尔排序(Shell Sort)是一种插入排序的改进版本,也被称为缩小增量排序。希尔排序通过比较相距一定间隔…

Xshell Mobaxterm等终端工具连接不上服务器,显示 SSH服务器拒绝密码。请再试一次。解决办法

问题解决办法&#xff1a; &#xff08;1&#xff09;需要查看配置SSH密钥时&#xff0c;输入的password密码和当前users_name cd /home/: 查看当前系统下的用户名 注意上图中的登录名是服务器端linux下自己设置的user_name用户名&#xff1a; 所以需要将fl改为&#xff1a…

CCIE-10-IPv6-TS

目录 实验条件网络拓朴 环境配置开始Troubleshooting问题1. R25和R22邻居关系没有建立问题2. 去往R25网络的下一跳地址不存在、不可用问题3. 去往目标网络的下一跳地址不存在、不可用 实验条件 网络拓朴 环境配置 在我的资源里可以下载&#xff08;就在这篇文章的开头也可以下…

Linux Shell:`xargs`命令

Linux Shell&#xff1a;xargs命令 在Linux Shell脚本或命令行操作中&#xff0c;xargs是一个非常有用的命令&#xff0c;它可以将标准输入&#xff08;stdin&#xff09;数据转换成命令行参数。xargs命令读取来自标准输入的数据&#xff0c;然后将这些数据作为参数传递给其他…

《Java面试自救指南》(专题三)数据库

文章目录 一条sql语句的查询流程有哪些数据库存储引擎&#xff0c;各自的区别数据库的三大范式事务的四大特性&#xff08;含隔离级别&#xff09;MySQL四种隔离机制的底层实现&#xff08;如何解决幻读 &#xff09;MySQL有哪几种锁&#xff0c;分别怎么实现数据库中有哪些索引…

Kubernetes学习笔记8

Kubernetes集群客户端工具kubectl 我们已经能够部署Kubernetes了&#xff0c;那么我们如何使用Kubernetes集群运行企业的应用程序呢&#xff1f;那么&#xff0c;我们就需要使用命令行工具kubectl。 学习目标&#xff1a; 了解kubectl 命令帮助方法 了解kubectl子命令使用分…

竞赛常考的知识点大总结(四)高级数据结构

并查集 并查集&#xff08;Disjoint Set Union&#xff0c;DSU&#xff09;是一种数据结构&#xff0c;用于管理一系列不相交的集合&#xff0c;并支持两种操作&#xff1a;合并&#xff08;Union&#xff09;和查找&#xff08;Find&#xff09;。并查集可以高效地处理动态连…

传统海外仓的管理模式有什么缺点?使用位像素海外仓系统的海外仓有什么优势?

传统的海外仓管理模式主要需要大量的人工操作和相对简单的信息化手段进行仓库的日常运营。因此&#xff0c;传统海外仓的运作比较依赖仓库员工的手工记录、核对和处理各种仓储和物流信息。 然而&#xff0c;传统海外仓管理模式通常存在一些缺点&#xff1a; 效率低下 因为需…

Docker-23.0.0版本 一键安装

一 前言 在数字化飞速发展的今天&#xff0c;应用程序的部署和管理成为每个企业和个人开发者不可忽视的课题。而Docker&#xff0c;作为一款开源的容器化技术&#xff0c;正以其独特的沙箱环境和逻辑隔离特性&#xff0c;引领着应用程序部署的新潮流。想象一下&#xff0c;每个…

算法之美:缓存数据淘汰算法分析及分解实现

在设计一个系统的时候&#xff0c;由于数据库的读取速度远小于内存的读取速度&#xff0c;那么为加快读取速度&#xff0c;需先将一部分数据加入到内存中&#xff08;该动作称为缓存&#xff09;&#xff0c;但是内存容量又是有限的&#xff0c;当缓存的数据大于内存容量时&…

《乡土中国》中国基层传统社会里的一种体系,支配着社会生活的各方面 - 三余书屋 3ysw.net

乡土中国 大家好&#xff0c;今天我们要解读的是费孝通先生的经典著作《乡土中国》。这本书的中文版大约有10万字&#xff0c;我将用30分钟左右的时间为你解读书中的精髓。为什么说中国的根基在于乡土社会&#xff1f;我们应该从哪些方面来理解乡土社会的特征及其重要性&#…

穿越雷区(Java--BFS解法)

穿越雷区&#xff08;Java–BFS解法&#xff09; 题目链接&#xff1a;http://oj.ecustacm.cn/problem.php?id1266 解题代码&#xff08;内含注释思路&#xff09; import java.util.*;public class Main {static int[][] dir {{0,1},{0,-1},{1,0},{-1,0}};static String[]…

Oracle备份和还原的几种方式

1、使用数据泵方式 exp demo/demoorcl buffer1024 filed&#xff1a;\back.dmp fully demo&#xff1a;用户名、密码 buffer: 缓存大小 file: 具体的备份文件地址 full: 是否导出全部文件 ignore: 忽略错误&#xff0c;如果表已经存在&#xff0c;则也是覆盖 exp demo/de…

JAVA 100道题(26)

26.编写一个JAVA程序&#xff0c;将文本文件中的内容读取到内存中并打印出来 以下是一个简单的Java程序&#xff0c;用于读取文本文件的内容并将其打印到控制台上&#xff1a; java复制代码 import java.io.BufferedReader; import java.io.FileReader; import java.io.IOExce…

MyBatis与Hibernate的优缺点对比

MyBatis和Hibernate都是Java中常用的持久化框架&#xff0c;它们各自有着优点和缺点。让我们来对比一下它们的优缺点。 MyBatis 优点&#xff1a; SQL控制: MyBatis允许开发人员直接编写SQL语句&#xff0c;提供了更直观的数据库访问控制。灵活性: 开发人员可以更精细地控制…

LeetCode 856. 括号的分数

解题思路 栈模拟。 相关代码 class Solution {public int scoreOfParentheses(String s) {//stack中的值是左括号的的右边所有合法配对括号的值Stack<Integer> stack new Stack<>();stack.push(0);for(int i0;i<s.length();i)if(s.charAt(i) () stack.push…

nvm 安装多个版本的Node npm

先安装nvm 管理工具 git安装地址 找到安装包 下载然后安装 https://github.com/coreybutler/nvm-windows/releases/tag/1.1.11nvm常用命令 命令说明nvm version查看nvm版本nvm ls查看所有已经安装的Nodejs版本nvm list installed查看所有已经安装的Nodejs版本nvm ls availab…

第十一章 U-boot 顶层 Makefile 详解 (模块编译)

11.2.7 模块编译 在 uboot 中允许单独编译某个模块,使用命令" make Mdir"&#xff0c;旧语法"makeSUBDIRSdir"也是支持的。 200 # Use make Mdir to specify directory of external module to build 201 # Old syntax make ... SUBDIRS$PWD is still supp…