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