基础-CSS属性值的计算过程

对于css,属性值的计算过程是非常核心和重要的。把这个搞定了,那其他的规则就变得很简单了。

属性值的计算过程,指的是 某个元素从所有css属性都没有值,到所有css属性都有值的过程

比如说某个div元素,在最开始运行页面的时候,它所有的属性都没有值,然后经过一系列的运算,变成了每一个css属性都有值.

基础-CSS属性值的计算过程
这时候也许会有疑问,当初我也是,就是一个元素的属性,不是我写哪些它就生效哪些吗,怎么会是所有呢。完全不是这样!!!👏 看一个例子:

<template>
  <div>hello</div>
</template>

<style lang="scss" scoped>
div{
  color: red;
}
</style>

这里只写了一个属性,难道最终只有这一个属性吗?来看看它的计算结果:

基础-CSS属性值的计算过程
它的css属性每一个都得有值,哪怕我们只写了一个属性,它也必须要保证所有的css属性都有值。那么计算过程是怎么计算的呢?共分为四个步骤:

1.确定声明值

比如有这么一个元素,有一个类。

  <div class="text">hello</div>

刚开始每一个css属性都没有值,那怎么计算呢?首先第一步,确定声明值。

  1. 作者样式表:我们开发者写的css。
  2. 浏览器默认样式表:就算什么都不写,浏览器都会默认生成一个样式表。

基础-CSS属性值的计算过程
这些别的样式,就是浏览器默认样式表,也是用户代理样式表(user agent stylesheet)

PS: display:block; 称为:变成块盒。像块级元素这种说法已经是10年前的说法了,现在已经没有什么块级元素,行级元素的说法了。css官方明确告诉我们不再使用这种说法了,而是说 默认生成块盒,因为浏览器默认样式表里给它加了display:block;

这个时候它会观察两个样式表,找到没有冲突的样式作为最终的计算结果。比如作者样式表里没有写font-size,则使用浏览器默认样式表里的作为最终计算结果。另外会把我们设置的预设值转为为绝对值,比如说颜色red,会转为rbg格式。

2.层叠

层叠这部分是非常重要的,从css的全称层叠样式表中就可以看出。那它要解决什么呢?解决那些发生冲突的样式,选出最终的一种样式。如果说h1设置了字体大小,这就和浏览器默认样式表冲突了。

解决冲突会经过三个步骤:比较重要性、比较特殊性、比较源次序。

1. 比较重要性

重要性从高到低:

  1. 带有 important 的作者样式;
  2. 带有 important 的默认样式;
  3. 作者样式;
  4. 默认样式;
2. 比较特殊性

这也就是大家常说的权重了。它要计算每个冲突的样式的特殊性的值是多少。
要从style、id、属性、元素四个方面去比较。

style id 属性 元素
内联:1;外联:0 id选择器的数量 属性、类、伪类的数量 元素、伪元素的数量

例如:

.text {
  color: red;
  font-size: 40px;
}
h1 {
  font-size: 26px;
}
div h1.text {
  font-size: 14px;
  font-size: 30px;
}

这里的font-size冲突了,那我们就来计算它的4个值

  • .test

不是内联样式,0;id选择器数量为0,0;有一个类选择器,1;没有元素选择器,0。结果是 0010。

  • h1

不是内联样式,0;id选择器数量为0,0;没有类选择器,0;有一个元素选择器,1。结果是 0001。

  • div h1.text

不是内联样式,0;id选择器数量为0,0;有一个类选择器,1;有两个元素选择器,1。结果是 0012。

把所有冲突的样式的特殊性的四个值算出来,然后从高位到地位进行比较。通过比较,胜出的是最后一组。

基础-CSS属性值的计算过程

3. 比较源次序

如果还有冲突就比较源次序,就是比较源代码里面的书写顺序,哪个书写的靠后,就用哪一个。上面的字体1430冲突了,因为30靠后,所以最终结果是它。

3.继承

继承的发生是有条件的,得满足以下两个条件。

  1. 目前是仍然没有值的。
  2. 是可以继承的。

满足这两个就ok了,那哪些是可以被继承的呢?有一个粗略的规则,就是和文字相关的是可以继承的,例如行高,字体大小,字体颜色。和文字不相关的是不可以继承的,例如宽高、位置。 如果要详细知道,那就去MDN查看该属性的具体信息。

4.使用默认值

那么多的css属性,我们书写的时候也没写那么多,不冲突就用我们写的;冲突了就根据层叠规则来。还没写的,比如text-align,就继承了。那还剩很多,比如background-color这种怎么办,那这时候就使用它的默认值了。同理,默认值可以查看MDN,这里以 background-color为例

基础-CSS属性值的计算过程

经过了这四个步骤,保证每个元素的css属性都有值。在这四个步骤当中,继承使用默认值是动不了的,我们写的代码只能影响到确定声明值层叠

来看一个小例子:

    <div class="box">
      <p>这时一句话</p>
      <a href="">这时一个链接</a>
    </div>
    
 

box设置了颜色:

   <style>
    .box {
      color: pink;
    }
   </style>

基础-CSS属性值的计算过程
p元素的颜色是对了,但a元素并没有。我们没有对a进行操作,所以要么是继承要么使用默认值,打开浏览器就会发现a元素有默认值。而对于p,没有默认值,所以继承了父元素。、

基础-CSS属性值的计算过程

原文链接:https://juejin.cn/post/7359077619747061814 作者:初出茅庐的

(0)
上一篇 2024年4月19日 上午10:49
下一篇 2024年4月19日 上午10:54

相关推荐

发表回复

登录后才能评论