css属性值的计算过程--实现css属性从无到有的过程

最新推荐文章于 2023-08-26 00:40:50 发布

Yannnnnm

最新推荐文章于 2023-08-26 00:40:50 发布

阅读量446

点赞数

本文链接：https://blog.csdn.net/Yannnnnm/article/details/107103579

版权

属性值的计算过程

属性值：一般用来定义属性的特定的特征或参数。
一个元素，从所有属性都没有值，到所有的属性都有值，这个计算过程叫做属性值计算过程。
前提条件：一个元素在渲染过程中，该元素中的每一个css元素都必须有值。

整个网页渲染的流程

渲染的顺序是按树形目录的结构来依次渲染，并不是同级从左到右逐级渲染，再去下一层渲染。
下图用DOM树演示的一个简单的渲染的过程

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div>
        <p>loerm</p>
    </div>
    <a href="#"></a>
    <img src="" alt="">
</body>
</html>

简单的渲染流程

CSS属性从无到有的过程

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

下面简单演示每一步的CSS值从无到有的过程
假设我们需要的是如下属性的值：

<style>
   width:?;
   height:?;
   background-color:?;
   font-size:?;
   font-weight:?;
   display:?;
   color:?;
   text-align:?
</style>

下面是随便写的一段代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            color : blue;
            background-color : #0ff;
            text-align : center;
            font-size : 20px;
            font-weight : normal;
            display:block;
        }
        .demo{
            color: red;
            font-size: 14px;
        }
        p{
            font-size: 16px;
        }
        div p .demo{
            font-size: 3em;
            font-size: 18px;
        } 
    </style>
</head>
<body>
    <div>
        <p class="demo">
            Lorem, ipsum dolor.
        </p>
        }
    </div>
</body>
</html>

假设浏览器给的样式为

p{display: block;font-size: 2em;font-weight: bold;}

确定声明值

参考样式表没有冲突的声明，作为CSS属性值。
如果作者样式没有相应属性的值，浏览器有默认的值，则取浏览器的值。
在上面的例子中，我们可以发现首先要在下面的样式中确定

作者样式
 .demo{
     color: red;
     font-size: 14px;
}
p{
   font-size: 16px;
}
div p .demo{
    font-size: 3em;
    font-size: 18px;
} 
 浏览器样式
p{display: block;font-size: 2em;font-weight: bold;}

在上图中我们可以发现没有冲突的声明值有

 color: red;
 display: block;
 font-weight: bold;

则此时我们可以确认

<style>
    color: red;
    display: block;
    font-weight: bold;
<style>

层叠冲突

对样式表中有冲突声明使用层叠规则，确定CSS属性值。
在这一步中，我们又可以分为三步：

比较重要性
比较特殊性（计算权重）。
比较顺序

需要注意的是，现在确定的是上一层中没有确定的属性。

比较重要性

下列重要性从高到低

作者样式表中带有“！important”的样式。（带有“！important”样式的优先级特别高，可以打破优先级规则）
作者样式表中的普通样式。
浏览器默认表中的样式。

比较特殊性（计算权重）

比较特殊性一般是比较选择器的优先级，通过选择器，计算出一个四位数。需要注意的是这里的四位数，并不是普通意义的上的四位数，并不是满十进一。
一般来说：
千位上的数字：由内联样式的个数决；
百位上的数字：由选择器中所有id选择器的数量决定；
十位上的数字：由选择器上所有类选择器、属性选择器、伪类选择器的数量决定；
个位上的数字：由选择器上所有元素选择器，伪元素选择器的数量决定。

比较顺序

比较代码的书写顺序，后来者居上，写在后面的优先。

依据以上层叠冲突的规则，我们发现在第一步比较重要性中我们可以选择我们自己写的普通样式，在第二步权重中我们可以做如下比较：

<style>
        /* 0010 */
        .demo{
            color: red;
            font-size: 14px;
        }
        /* 0001 */
        p{
            font-size: 16px;
        }
        /* 0012 */
        div p .demo{
            font-size: 3em;
            font-size: 18px;
        } 
</style>

由0012大于0010大于0001，可知从最后一排样式中取值，又因为 font-size: 3em;在前font-size: 18px;在后，因此在这一层中我们可以确认font-size: 18px;

使用继承

对仍然没有值得属性，若可以继承，则继承父元素的值。
这里要格外注意两点：

属性到当前步骤没有值
属性可以继承（通常跟字体相关的属性都能被继承，具体的可以在MDN或W3C里查询属性是否是可继承属性。
我们可以看到上面的案例中还有以下属性没有确定：

<style>
   width:?;
   height:?;
   font-size:?;
   background-color:?;
   text-align:?
</style>

案例中p元素的父元素为div元素，它的属性值为

 <style>
        div{
            color : blue;
            background-color : #0ff;
            text-align : center;
            font-size : 20px;
            font-weight : normal;
            display:block;
        }
 </style>

我们可以确定 text-align为center，font-size为20px,background-color 不能继承，因此这一层中无法确定。

使用默认值

使用默认值：对仍然没有值得属性，使用默认值（不是浏览器设置的值）。
从MDN或W3C中查询得知width的默认值为auto;height的默认值为auto；background-color的默认值为transparent。
综上

<style>
	width: auto;
	height: auto;
	background-color: transparent;
	font-size: 18px;
	font-weight:bold;
	display: block;
	color:red;
	text-algin:center;
</style>

特殊的CSS取值

为了一些特殊用法，还有特殊的CSS取值可以使用，常见的一般为下面两种：

inherit:手动（强制）继承，将父元素的值取出应用到该元素。
innitial:初始值,将该属性设置为默认值。
如果想了解更多信息可访问MDN或W3C

Yannnnnm

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css属性值的计算过程--实现css属性从无到有的过程

目录整个网页渲染的流程一级目录二级目录三级目录前提条件：一个元素在渲染过程中，该元素中的每一个css元素都必须有值。整个网页渲染的流程渲染的顺序是按树形目录的结构来依次渲染，并不是同级从左到右渲染，再去下一层。下图用DOM树演示的一个简单的渲染的过程<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</titl
复制链接

扫一扫