属性值的计算过程

1. 页面渲染

浏览器的页面渲染方式：
一个元素一个元素依次渲染，顺序按照页面的树形目录结构进行

即页面按照这种树形目录结构自根发散对元素依次进行渲染，元素一定是上一个渲染完后才渲染下一个元素，不会同时渲染多个元素。

渲染每个元素的前提条件：该元素的所有CSS属性必须有值。

2. 属性值的计算过程

一个元素，从所有属性都没有值，到所有属性都有值，这个计算过程，叫做CSS属性值计算过程。

具体步骤：

1.确定声明值：参考样式表（作者样式表+浏览器默认样式表）中没有冲突的声明，作为CSS属性值；
2.层叠冲突：对样式表有冲突的声明使用层叠规则，确定CSS属性值；
3.使用继承：对仍然没有值的属性，若可以继承，则继承父元素的值；
4.使用默认值：对仍然没有值的属性，使用默认值。

例子：对于a元素的color属性，浏览器的默认样式表中是有值的，所以不会继承父元素的颜色属性值。若想使该属性发生继承，则可以使用inherit强制继承，只不过此强制继承发生在层叠冲突那一步。

一些不能继承父元素的属性，可以使用inherit来强制该属性继承父元素的属性值

color: inherit;

特殊的两个CSS取值：

inherit: 手动（强制）继承，将父元素的值取出应用到该元素；
initial: 初始值，将该属性设置为默认值。

18、CSS基础——属性值的计算过程相关推荐

CSS基础（6）- 属性值的计算过程
本系列笔记是基于[渡一教育]袁进老师的html+css基础课程而记录,仅作为个人记录以及阅读使用. 文章目录属性值的计算过程参考资料属性值的计算过程一个元素一个元素依次渲染,顺序则是按照页面文 ...
css样式属性值无效问题
我出现的问题是单位写错导致css样式属性值无效,如图所示,倾斜度单位是deg而不是dep,原因:对此单位不熟悉: 经过看其他人文章发现还有可能出现以下问题: 1.css写属性值,一个标签的中括号后面加 ...
js删除css某个属性值
先上结论: 属性值不能删, 可以设置成默认值问题描述: 做小项目的时候需要js触发条件时把一个有固定高度的div的height属性删掉也就是变成高度由子元素决定(height属性写在CSS) 想到 ...
css基础属性(HTML的入门2)
text-decoration 设置下划线属性值:overline 顶划线 , underline 下划线 line-through 删除线 none 无 ...
【Unity3D】无法正确获取RectTransform的属性值导致计算出错
UGUI获取RectTransform的某些属性时坑实在是太多了,以博主踩过的坑记录一下: 1.由于ContentSizeFitter组件导致不能正确获取UI的宽高参考宣雨松大神的做法:Unity3 ...
解说float取值范围计算过程
1.先给出实型变量取值范围实型变量可以分为单精度(float)(4字节).双精度(double)(8字节).长双精度(long double)(8字节)三种类型. 在 VC6.0 double和lo ...
CSS基础属性:width/height
1. width: 设置块元素的宽度.值:1) 像素大小, 单位px. 固定的大小例: width: 100px;2) 百分比大小, 单位%. 设置当前块元素占据父元素宽度的百分比例: width: ...
【C语言】解说float取值范围计算过程
微信公众号: 1.先给出实型变量取值范围实型变量可以分为单精度(float)(4字节).双精度(double)(8字节).长双精度(long double)(8字节)三种类型. 在 VC6.0 do ...
CSS 属性计算过程
CSS 属性计算过程你是否了解 CSS 的属性计算过程呢? 有的同学可能会讲,CSS属性我倒是知道,例如: p{color : red; } 上面的 CSS 代码中,p 是元素选择器,color 就 ...

18、CSS基础——属性值的计算过程

属性值的计算过程

1. 页面渲染

2. 属性值的计算过程

18、CSS基础——属性值的计算过程相关推荐

最新文章

热门文章