优先运行的代码是根据其特异度,就是选择器它的特殊的程度,越特殊的选择器它的优先级越高。 那如何计算一个选择器它的特异度呢?可以把它先分一下类,比如说ID的,算一下ID的有几个或者伪类有几个标签有几个,算出来之后去进行一些比较,看哪个特异度大。
我们有了特异度然后决定出来我们页面的样式到底该是什么样子。当然我们要用到一些特殊样式的这种元素的时候,我们可以给这个特殊样式的这种元素的一个o以外的class,然后通过样式覆盖把它的那个样式覆盖掉。
某一些属性会自动继承它的父元素的计算值,比如color这个属性,它就是一个可以继承的的一个属性,有时候上面并没有设置color这个属性,它就会从这个元素的父级去做一个继承,如果父级也没有那就再往上去找,这样一级一级去继承。一般来说在CSS里面文字相关的是可以去继承的,但是跟核模型相关的一些属性是不可继承的,比如说宽度,如果不去设置这个宽度的话,它并不会从它的父级里面去读取一个值。当一些属性不可继承,但就是想要它的值等同于它有父级,想让它从父级去继承,那就通过*,就是通配选择器就首先让这个元素的box-sizing变成一个默认制定成inherit,就是所有元素都从父级去继承,这样的好处就是我通过一个容器,我就可以改变这个容器内所有的元素。这样就可以让一个原本不可继承的变成可继承的。
Ps:继承:某些属性会自动继承其父元素的计算值,除非显式指定一个值
如果从这个元素的父级一层一层往上找,都没有找到可继承的父级,这种情况就会用到所谓的初始值的概念初始值就是每一个元素在规范里面就规定好的它有一个初始的值,当一个元素它是不可继承的,又没有给它设置属性,那这个时候会用到初始值。
Ps:初始值:
- CSS中每个属性都有一个初始值,比如background-color的初始值为transparent margin-left的厨师长为0
- 可以使用initial关键字显示重置为初始值:background-color:initial
在浏览器的HTML是怎样的发生关系的,也就是说一个元素它的样式是怎么样被计算出来的。首先浏览器会把HTML解析成一个DOM树,接下来浏览器为了布局或者渲染这个页面,它需要去找到页面上的每一个元素对应的一个CSS属性的值,这么长的一个流程它描述的是寻找一个特定的一个CSS属性,把这个规则都拿到之后,去筛选一下看这个规则样式与选择器是不是匹配,与一些条件能不能够匹配到,如果匹配到的话那就可以把它筛选出来,得到一组能够匹配到的CSS的规则,那这个值就叫做filtering就是所谓的生命值。生命值其实是一组零个或者多个规则,比如有两条规则都能匹配上,那最后用哪个呢,就要一层一层的去往下找,所以它会有一个优先级的概念,所谓优先级的概念就是按照样式的,比如浏览器预制的样式,或者一些用户通过一些插件或者用户指定的这些样式选择出来一个优先级最高的,这个时候选择出来的值就叫做层叠值。所谓的层叠值就是优先级的一个比赛,在这个优先级比赛中最终获胜的那个值叫做层叠值。有的时候那个层叠值是空的,因为它可能是筛选了一圈样式,并没有给这个元素找到那个对应的值就没有地方去设置这个元素,这个时候就会用到默认值的一些概念,去继承也好去用初始值也好,总是能得到一个值的。一个唯一的值叫指定值,经过前面的步骤现在是有一个明确的值,但是这个值不能直接被浏览器用来做渲染,这个值还要经过后面的一些过程,比如说em它是一个相对的一个长度单位得要知道具体要渲染多少像素,所以要进一步去做一些转换,最终得到的值叫做计算值。将计算值进一步转换,比如关键字,百分比等都转化为绝对值。再进行实际布局时使用的值叫做使用值,最后渲染时实际生效的值比如400px,叫做实际值。
布局:
- 确定内容的大小和位置的算法
- 依据元素、容器、兄弟节点和内容等信息来计算
布局相关技术:常规流:行级、块级、表格布局、FlexBox、Grid布局 浮动、绝对定位
盒模型:margin(指定元素四个方向的外边距 取值可以是长度、百分数、auto 百分数相对于容器宽度)、border(指定容器边框样式、粗细、颜色)、padding(指定元素四个方向的内边距 百分数相当于容器跨宽度)、height(指定content box高度 取值为长度、百分数、auto auto取值由内容计算得来 百分数相对于容器的content box高度 容器由指定的高度时,百分数才生效)、width(指定content box宽度 取值为长度、百分数、auto auto由浏览器根据其他属性确定 百分数相对于容器的content box宽度)
以上就是这节课内容,我觉得最重要的是CSS的求值过程,听课整理出来的时候我一直在迷糊,弯弯绕绕很难听懂,各种各样的值,很复杂,这样整理出来的时候语句也有些不通,真的尽力了,不过这节课收获颇丰,了解了CSS的求值过程是怎么样的,继承父级是怎么一回事,也更加了解了程序员的不容易,真的太复杂了。