元素的渲染过程及属性值的计算

最新推荐文章于 2024-08-20 19:23:57 发布

cody0622

最新推荐文章于 2024-08-20 19:23:57 发布

阅读量205

点赞数 1

文章标签： html css

本文链接：https://blog.csdn.net/cody0622/article/details/107102585

版权

#元素的渲染过程
元素渲染的必备条件为这个元素必须有值。
元素的渲染顺序为根据树形目录结构依次进行渲染，比如一个html文件是以下结构：

<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Document</title>
		<body>
		<div >
			<span></span>
		</div>
		<p></p>
		<a></a>
		<img src="" >
		</body>

那它的渲染过程为：head-meta-title-body-div-span-p-a-img.

#属性值的计算
##一个HTML元素一般有一下属性：
width: ?;
height: ?;
background-color: ?;
font-size: ;
font-weight: ;
display: ;
color: ;
其他CSS属性：？
例如：

<div><h1 class="demo"> lorem</h1></div>

作者样式表

.demo{
	color: red;
	font-size: 12px;
}
h1{
	font-size: 14px;
}
 div h1.demo{
	 font-size: 3em;
	 font-size: 30px;

浏览器默认模式

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

##要确定一个元素的属性，我们一般分为四步：
第一，确定声明值：
查看作者样式表中，没有冲突的属性，作为css属性，同时也需要参考浏览器默认样式；

那么从这个步骤来看，可以确定的h1元素属性为：
color:red;
display: block;
font-weight: bold;
第二，层叠冲突，对有冲突的声明，使用层叠规则，计算属性值，确定css属性。
###层叠规则如下：
1.比较重要性：如果该元素后面加了important标签，那么这个就是非常重要，需要优先显示的；
2.比较特殊性，这个需要看选择器的优先级，选择器选中的范围越窄，越特殊；
具体的规范是：通过选择器计算一个4位数（xxxx），注意这四位数并不是逢10进1
千位：如果是内联样式，记为1，否则记为0；
百位：等于选择器中所有ID选择器的数量；
十位：等于选择器中所有类选择器、属性选择器、伪类选择器的数量；
个位：等于选择器中所有元素选择器、伪元素选择器的数量。
3.比较顺序，代码书写在后面的优先，后来居上。
那么从这个步骤来看，可以确定的h1元素的属性值为：
font-size: 30px;
第三，使用继承。如果通过前面两个过程，该元素还是没有得到属性值，那么在可以继承的情况下，可以继承父元素的属性值
从这个步骤，可以看出h1元素的属性值为：
text-align: center;
第四，在通过了上面三个过程，元素的属性值还是没有，那就可以用默认值了，这个值可以在浏览器中查看
最后，通过前面都查出，可以在浏览器查出h1元素的其他值为：
width: auto;
height: auto;
background-color: transparent;

cody0622

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
元素的渲染过程及属性值的计算

#元素的渲染过程元素渲染的必备条件为这个元素必须有值。元素的渲染顺序为根据树形目录结构依次进行渲染；#属性值的计算一个HTML元素一般有一下属性：width: ?;height: ?;background-color: ?;font-size: ;font-weight: ;display: ;color: ;其他CSS属性：？##要确定一个元素的属性，我们一般分为四步：第一，确定声明值查看作者样式表中，没有冲突的属性，作为css属性，同时也需要参考浏览器默认样式；第二，层叠
复制链接

扫一扫