CSS(四)——属性值的计算过程
本节课特别重要,涉及前端CSS样式的底层运行
一个元素一个元素以此渲染,顺序按照页面文档的树形目录结构进行
元素的渲染过程
-
首先渲染html;
-
渲染head元素;
-
渲染meta元素;
-
渲染title元素;
-
渲染body元素;
-
渲染h3元素;
-
渲染p元素;
-
渲染strong元素;
-
渲染a元素;
-
渲染img元素。
遵循先序遍历方式
【注】:该图片并非个人原创,是在B站上找到的免费公益课的资源,且未用作盈利目的。
渲染每一个元素的前提条件
该元素的所有CSS属性必须有值。一个元素从所有属性都没有值,到酥油的属性都幼稚,这个计算过程,叫做属性值计算过程。
属性值计算过程简介
无属性值
-
确定声明值:
参考样式表中没有冲突的声明,作为CSS属性值。
-
层叠冲突:
对样式表中有冲突的声明使用层叠规则,确定CSS属性
-
使用继承:
对仍让没有值得属性,若可以继承,则继承父元素的值
-
使用默认值
最后对没有值得属性,使用默认值
每个属性都有值
强制继承
强制继承是将默写元素的样式属性值设为 inherit ,在这种情况下属性的继承会发生在第一步或者第二步,具体在哪一步取决于是否需要解决层叠冲突。——不能自动继承的属性也可以通过这个关键字进行强制继承
两个特殊的CSS属性值:
- inherit:表示强制继承;
- initial:表示将该属性设置为默认值。