#元素的渲染过程
元素渲染的必备条件为这个元素必须有值。
元素的渲染顺序为根据树形目录结构依次进行渲染,比如一个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;