css渲染层次理解及实际问题

Posted 2021-05-29 Pengzquan

一、背景

css最为重要的就是布局，但是还有一个比较重要的就是层次的叠加。如果多个布局叠加在一起的时候，如果只是展示不在视觉上的问题，但是在实现js交互的时候如点击之类的  就会出现无法点击到的情况。

二、举例

2.1 问题描述

实现这样的一个盒模型。一个标签为绝对定位，另一个标签默认。

运行结果，不论如何点击都无法出现js的代码。

2.2 解决方案

这里讲一下解决的思路，主要分为两种：一个是非用absolute不可，另一个是

2.2.1 都需要绝对定位的时候

把css的设置改成如下的代码，并设置顺序，因为都是绝对定位的时候会采取栈叠加的方式进行处理。

html标签顺序

<div class="two"></div>
<div class="one"></div>

css代码

.one {
    height: 100px;
    width: 100px;
    background-color: #8A6DE9;
    position: absolute;
    left: 0;
    top: 0;
    margin: 1em 0 0 1em;
}

2.2.2 避免绝对定位占用

设计的时候尽可能少的使用绝对定位，使用不同的盒子模型去处理。

三、渲染过程

3.1 css渲染过程

css渲染过程，这里的图片是从别人博客中搬来的。大家都在使用的过程，这里对过程进行了标注，因此选取这张图片。

3.2 整个浏览器渲染流程

针对整个过程的浏览器渲染流程

3.3 css的解析过程

根据jartto\'s博客中的第四章内容，这里简单的将css过程转化为流程图的形式，对于其他复杂的就是进行回溯渲染等相关内容。

四、思考

通过上面的实例可以知道，当存在absolute的时候，层次加载会高于默认。同是absolute的时候层次会因为css的dom树而按照类似栈的方式往上叠加。因此后面的absolute定位会叠加在前面的absolute上面，并可以监听到事件变化。

参考

jartto\'s的css语法解析

思否css过程

掘金css过程

腾讯云css过程

简书：不同浏览器js和css加载的方式

fundebug：深度浅出浏览器渲染效果

MDN浏览器工作原理 

CSDN：浏览器渲染流程