浏览器字体大小设置_CSS之 浏览器解析样式的过程

16be419a946410d80f34533e3746323c.gif阅读本文约需要10分钟

大家好,我是你们的导师,经常看我朋友圈的同学应该知道,我每天会在微信上给大家免费提供以下服务!

1、长期为你提供最优质的学习资源!

2、给你解决技术问题!

3、每天在朋友圈里分享优质的技术文章!

4、每周1、3、5送纸质书籍免费送给大家,每年至少送书800本书!

5、为大家推荐靠谱的就业单位!

请注意!我上面说的5点全部都是免费的!全网你应该找不到第二家吧!

当然,大家在我私人微信上问我问题,仅限回答web前端、java相关的。

---------------------------

好了,接下来开始今天的技术分享!上次老师跟大家分享了React 面试知识点的知识,今天跟大家分享下CSS之 浏览器解析样式的过程的知识。

1 解析一旦 CSS 被浏览器下载,CSS 解析器就会被打开来处理它遇到的任何CSS。这可以是单个文档内的CSS、例如,考虑以下 CSS:
.fancy-button {    background: green;    border: 3px solid red;    font-size: 1em;}
以上 CSS 片段将生成如下数据结构,以便在后续的过程中方便使用:loading.gif值得注意的一件事是,浏览器将 background 和 border 的简写还原成普通写法,也就是一个一个属性的声明,因为简单写主要方便开发人员的编写,但从这里开始,浏览器只处理普通写法。完解析成之后,浏览器引擎继续构建 DOM 树。2 计算既然我们已经解析了现有内容中的所有样式,接着就是对它们进行样式计算了。我们尝试尽量对所有值减少到一个标准化的计算值。当离开计算阶段时,任何维度值都被缩减为三个可能的输出之一:auto、百分比或像素值。为了清晰起见,让我们看几个例子,看 web 开发人员写了什么,以及计算后的结果:loading.gif现在我们已经计算了数据存储中的所有值,是时候处理级联了。3 级联由于 CSS 来源有多种,所以浏览器需要一种方法来确定哪些样式应该应用于给定的元素。为此,浏览器使用一个名为 特殊性(specificity) 的公式,它计算选择器中使用的标记、类、id 和属性选择器的数值,以及 !important声明的数值。通过内联 style 属性在元素上定义的样式被赋予一个等级,该等级优先于 同一级别的个数,数量多的优先级高,假设同样即比较下一级别的个数。至于各级别的优先级例如以下:!important > 内联 > ID > 类 > 标签 | 伪类 | 属性选择 > 伪对象 > 通配符 > 继承loading.gif选择器的特殊性由选择器本身的组件确定,特殊性值表述为5个部分,如:
0,0,1,0,1
(1)、对于选择器中给定的各个 !important 属性值,加 1,0,0,0,0 。(2)、对于选择器中给定的各个ID属性值,加 0,0,1,0,0 。(3)、对于选择器中给定的各个类属性值、属性选择器或伪类,加 0,0,0,1,0 。(4)、对于选择器中给定的各个元素和伪元素,加 0,0,0,0,1 。伪元素是否具有特殊性?在这方面CSS2有些自相矛盾,不过CSS2.1很清楚的指出,伪元素具有特殊性,而且特殊性为 0,0,0,0,1,同元素特殊性相同。(5)、结合符(+ > [] ^= $= 等等特殊符号)和通配符(*)对特殊性没有任何贡献,此外通配符的特殊性为 0,0,0,0,0。全是 0 有什么意义呢?当然有意义!子元素继承祖先元素的样式根本没有特殊性,因此当出现这种情况后,通配符选择器定义的样式声明也要优先于子元素继承来的样式声明。因为就算特殊性是0,也比没有特殊性可言要强。为了说明这一点,让我们说明一些选择器及其计算后的权重数值:loading.gif而当优先级与多个CSS声明中任意一个声明的优先级相等的时候,CSS 中最后的那个声明将会被应用到元素上。在下面的示例中,div 将具有蓝色背景。
div {  background: red;}
div { background: blue;}
现在CSS将生成以下数据结构,在本文中,我们将继续在此基础上进行构建。loading.gif来源CSS也有来源,但它们的用途不同:CSS信息可以从各种来源提供,这些来源可以是 用户(user) 和 作者(author) 及 用户代理/浏览器(user agent),优先级如下:用户样式浏览器还允许用户设置网页的样式,例如,我们用IE浏览网站的时候,都可以通过浏览器查看菜单下的样式或者文字大小子菜单来设置网页实际的显示效果。作者样式网页创建者建立的样式表,一般会css文件出现或者是在页面头部里定义的style,也就是网站源代码的一部分。例如,大家看百度和谷歌的页面就不一样,这就是作者样式不一样的结果。用户代理/浏览器样式也就是浏览器自身设置用来显示网站的样式,不同的浏览器可能有不同的样式表,例如IE和Firefox的就不一样,所以大家分别使用这两种浏览器访问同一个网站的时候,看到实际效果可能就不同。通常情况下,作者样式具有最高的重要性,其次是用户样式,最后才是浏览器样式,但是如果出现了 !important 标记的话,那么规则会被改变,通过 !important 可以提高某种样式的重要性,让它的优先级高于其他没有加该声明的所有样式。让我们进一步扩展我们的数据集,看看当用户将浏览器的字体大小设置为最小 2em 时会发生什么:loading.gif做级联当浏览器拥有一个完整的数据结构,包含来自所有源的所有声明时,它将按照规范对它们进行排序。首先,它将按来源排序,然后按特性(specificity)排序,最后按文档顺序排序。loading.gif从上图可知,类名为 .fancy-button优先级最高(表中越上面优先级越高)。例如,从上表中,人会注意到用户的浏览器首选项设置优先 于Web 开发人员的设置样式。现在,浏览器找到与选择器匹配的所有 DOM 元素,并将得到的计算样式挂载到匹配的元素,在本例中 div 为类名为 .fancy-button:loading.gif如果您希望了解更多关于级联的工作原理,请查看官方规范。CSS对象模型虽然到目前为止我们已经做了很多,但还没有完成。现在我们需要更新 CSS对象模型(CSSOM)。 CSSOM 位于document.stylesheets 中,我们需要对其进行更新,以便让它知道我们目前为止已经解析和计算的所有内容。Web 开发人员可能在没有意识到的情况下使用这些信息。例如,当调用 getComputedStyle() 时,如果需要,运行上面指出的相同过程布局现在我们已经应用了一个具有样式的 DOM 树,然后开始构建一个用于可视化目的的树了。这棵树出现在所有现代引擎中,被称为盒子树(box tree)。为了构造这棵树,我们遍历 DOM 树并创建零个或多个 CSS 盒子,每个盒子都有一个 margin、border、padding 和 content 。在本节中,我们将讨论以下 CSS 布局概念:格式化上下文(FC):有许多类型的格式化上下文,其中大多数 Web 开发人员通过更改 display 元素的值来调用。一些最常见的格式化上下文是块(块格式化上下文或BFC),flex,grid,table-cells 和 inline。其他一些CSS也可以强制使用新的格式化上下文,例如 position: absolute,float 或使用 multi-colum。包含块:这是用于解析样式的祖先块。内联方向:这是文本布局的方向,由元素的书写模式决定。 在拉丁语言中,这是水平轴,在 CJK 语言中,这是垂直轴。块方向:此行为与内联方向完全相同,但与内联轴垂直。因此,对于基于拉丁语的语言,这是垂直轴,而在CJK语言中,这是水平轴。解析 Auto请记住,在计算阶段,维度值可以是三个值之一:auto、百分数或像素。布局的目的是在Box Tree中调整所有盒子的大小和位置,使它们为绘制做好准备。下面示例可以更容易地理解Box Tree是如何构建的。为了便于理解,这里不显示单独的CSS框,只显示主盒(principal box)。让我们看看一个基本的 “Hello world” 布局使用以下代码:

Hello world

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

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

相关文章

angular实现国密算法sm2、sm3和sm4的ts版,基于sm-crypto库实现,前后端实现

ts版,js的话直接根据npm文档调用就可以了! ts提供的方法有问题,所以还换了个思路来实现!而且因为不是nodeJs环境所以const sm4 require(sm-crypto).sm4这个在ts里是报错的导致无法实现,如果是使用的是electron那么使…

【转】.net异步性能测试(包括ASP.NET MVC WebAPI异步方法)

很久没有写博客了,今年做的产品公司这两天刚刚开了发布会,稍微清闲下来,想想我们做的产品还有没有性能优化空间,于是想到了.Net的异步可以优化性能,但到底能够提升多大的比例呢?恰好有一个朋友正在做各种语…

win7关机快捷键_电脑快捷键大全(上)

Windows快捷键1单独按Windows:显示或隐藏“开始”功能表WindowsBREAK:显示“系统属性“对话框WindowsD显示桌面或回复桌面Windows M最小化所有窗口WindowsShiftM:还原最小化的窗口CrtlShiftN:新建文件夹WindowsE:打开“我的电脑”…

Nginx报错:nginx: [emerg] CreateFile() nginx.conf“ failed (3: The system cannot find the path specified

windows下启动nginx报错: nginx: [emerg] CreateFile() “D:\桌面\nginx-1.12.0/conf/nginx.conf” failed (3: The system cannot find the path specified) 路径中带中文了,换个目录就好了

【转】ASP.NET Web API 使用Swagger生成在线帮助测试文档,支持多个GET

以下为教程: 在现有webapi项目中,nuget安装以下两个插件 swagger.net.ui swashbuckle 安装完毕后可以卸载Swagger.NET,此处不需要! 安装完毕后屏蔽以下代码 直接运行调试 在浏览器的目录后面加上/swagger即可跳转到swagger调试页 此时如果没有注释. 项目属性里添加xml注释…

idea提示“ cannot access xxxxxxxx.class“的解决方法,idea的bug

同一个包下的public类使用报错,应该是idea的bug: file -> Invalidate Caches / Restart

电脑屏保在哪里设置_手机屏保调成绿色能护眼?真的吗?

说到护眼,你首先想到的是什么颜色?估计90%的人都会不自觉的想到绿色!因为从小家长和老师都会跟我们说:眼睛累了就多看窗户外的绿色植物。久而久之,一说到护眼,大家脑海里第一个想到的就是绿色。你会看到不少…

【转】c#中@的3种作用

以前只知道在C#中为了写文件路径的\不要加转义符而在前面加上标识符,没想到还有其他的作用 1.忽略转义字符 例如 1 string fileName "D:\\文本文件\\text.txt"; 使用后 1 string fileName "D:\文本文件\text.txt"; 2.让字符串跨行 例如 1…

电脑休眠和睡眠的区别_关机、睡眠、休眠的区别

都知道电脑有关机、睡眠、休眠三种休息模式,但是后两个选项使用的人非常少,大多数人每次用完电脑都会选择立即「关机」。有人是为了让电脑「休息」,有人是为了低碳精神,还有人是因为下班不关电脑要罚款,不管是什么原因…

SpringCloud:学习Docker安装zookeeper,注册服务

1.没镜像就拉取镜像 dockerhub中查看版本 官网 docker pull zookeeper:3.4.14 不加版本号也行,默认拉取最新版 创建并启动容器 docker run -p 2181:2181 --privilegedtrue --name zookeeper01 -d zookeeper –privilegedtrue 容器内用户开启root权限 docker ps…

win10固态硬盘分区 整数_惠普HP笔记本Win10改Win7系统教程

惠普HP笔记本和台式机目前都预装的Win10系统,当然Win7旗舰版才是很多用户喜欢的,不过换装Win7有很多方面比较麻烦,如BIOS设置、U盘启动及方分方面都是很多用户不熟悉的,这里小编就详细分享下惠普笔记本Win10改Win7系统教程(BIOS设…

SpringCloud:学习 Docker安装Consul,注册服务

1.拉取镜像 docker pull consul 2.启动容器 docker run -d -p 8500:8500 --restartalways --nameconsul consul:latest agent -server -bootstrap -ui -node1 -client0.0.0.0 创建容器时没有添加参数 --restartalways ,导致的后果是:当 Docker 重启时…

【转】WebApi 身份认证解决方案:Basic基础认证

参考路径:https://www.cnblogs.com/landeanfen/p/5287064.html 前言:最近,讨论到数据库安全的问题,于是就引出了WebApi服务没有加任何验证的问题。也就是说,任何人只要知道了接口的url,都能够模拟http请求去…

python3.0程序实例_Python3 编程第一步

关于递归和两个变量计算斐波那契&#xff1a; import time #计算递归斐波那契时间消耗 nint(input(请输入一个整数:)) start time.time() def fab(n): if n<1: print(输入有误&#xff01;) return -1 if n1 or n2: return 1 else: return fab(n-1)fab(n-2) print(fab(n)) …

JAVA实现telnet代理,对输入命令拦截

目前只是个简单版本&#xff0c;有一些难点没有突破(vi编辑器的处理) package telnet.server;import jinghai.base.Environment; import telnet.TelnetProxyMain; import telnet.handle.Handle;import java.io.ByteArrayOutputStream; import java.io.IOException; import jav…

【转】C# DataTable使用方法详解

在项目中常常常使用到DataTable,假设DataTable使用得当&#xff0c;不仅能使程序简洁有用&#xff0c;并且可以提高性能&#xff0c;达到事半功倍的效果&#xff0c;现对DataTable的使用技巧进行一下总结。 1、添加引用 1 using System.Data; 2、创建表 1 2 3 4 //创建一个…

python求组合数c_科学网—Python 组合函数 C(n,m) - 杨玠的博文

Python 中组合函数 C(n,m) n!/(m!*(n-m)!) 有两个&#xff1a; 1.itertools.combinations 返回一个对象&#xff0c;其自带指针函数 因此有可以使用 for&#xff0c;例如 a [1,2,3,4] c itertools.combinations(a,2) for i in c: print i 其返回结果为 (1, 2) (1, 3) (1, 4)…

Qt undefined reference to,Error 255,找不到库函数的解决办法

本人Qt新手&#xff0c;使用Qt5在windows上写一个拨号程序时需要用到一个库librasapi32.a&#xff0c;RAS功能&#xff08;远程访问服务&#xff09;&#xff0c;用来拨号&#xff0c;说明一下这是和VC编程中的静态链接库一样的&#xff0c;只不过名字是Qt重新起的。然后虽然包…

LeetCode每日打卡 - 汉明距离

位异或运算&#xff08;^&#xff09; 运算规则是&#xff1a;两个数转为二进制&#xff0c;然后从高位开始比较&#xff0c;如果相同则为0&#xff0c;不相同则为1。 比如&#xff1a;8^11. 8转为二进制是1000&#xff0c;11转为二进制是1011.从高位开始比较得到的是&#xff…

this指针不全等于对象地址

一般情况下都说this指针等于对象地址&#xff0c;当对象调用类的成员函数时&#xff0c;对象会传给成员函数一个this指针&#xff0c;也就是自己的地址来引用、标识自己。 正是在这个思想下&#xff0c;导致我调试一个问题调试了整整一天。也许是本人学艺不精&#xff0c;但是…