CSS样式之属性值的计算过程 ------ 2020-01-17

1、HTML文档的渲染过程:

/**
先加载HTML代码,搭建出骨架;
然后按照HTML文档树的树形顺序依次给每个元素渲染样式属性;
*/

2、每个元素渲染CSS属性是如何渲染的:

/** 
1、每个元素渲染的前提条件是:该元素的所有CSS属性都必须有值(我们可能只指定部分CSS属性,
但是那些默认的CSS属性也必须有值);
2、属性值计算过程:一个元素,从所有属性都没有值,到所有属性都有值,浏览器会自动帮我们计算,
这个计算过程叫做属性值计算过程;
*/
属性值的计算过程.png
/**
1、确定声明值:将样式表(作者样式表和浏览器默认样式表)中没有冲突的样式声明,作为CSS属性值;
2、层叠冲突:对于样式表中有冲突的声明使用层叠规则(比较重要性、比较特殊性、比较源次序),
确定CSS属性值;
3、使用继承:对于执行过前两步仍然没有值的属性,若可以继承,则继承父元素的值;
4、使用默认值:对仍然没有值的属性,使用默认值;

执行完这四个操作,这个元素的属性值才全部有值,元素可以进行渲染;
*/

3、一个例子:

 div{
    color:red;
    font-size: 24px;
  }

 <div>
    <a href="">这是a标签</a>
    <p>这是p标签</p>
  </div>
例子.png
/**
原理:根据属性值得计算过程,a标签首先使用的是浏览器默认的字体颜色,所以没有继承父元素的字体颜色
但是由于没有默认的字体大小,所以继承了父元素的字体大小;
*/

// 如何让a元素继承父类的字体颜色:
a{
    color:inherit;
  }
// inherit 属性的意思是继承父元素的对应样式;

4、两个特殊的CSS属性值:

inherit:手动(强制)继承,将父元素的值取出应用到该元素;
initial:初始值,将该属性值设置为默认值;
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 概要 64学时 3.5学分 章节安排 电子商务网站概况 HTML5+CSS3 JavaScript Node 电子...
    阿啊阿吖丁阅读 13,102评论 0 3
  •   DOM(文档对象模型)是针对 HTML 和 XML 文档的一个 API(应用程序编程接口)。   DOM 描绘...
    霜天晓阅读 9,068评论 0 7
  • 前端必读:浏览器内部工作原理[https://kb.cnblogs.com/page/129756/] 作者: T...
    我是强强阅读 4,855评论 0 2
  • 1. 介绍 浏览器可能是最广泛使用的软件。本书将介绍浏览器的工作原理。我们将看到,当你在地址栏中输入google....
    康斌阅读 6,202评论 7 18
  •   DOM 1 级主要定义的是 HTML 和 XML 文档的底层结构。   DOM2 和 DOM3 级则在这个结构...
    霜天晓阅读 5,356评论 1 3