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

一、背景

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

二、举例

2.1 问题描述

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

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

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

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

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渲染过程,这里的图片是从别人博客中搬来的。大家都在使用的过程,这里对过程进行了标注,因此选取这张图片。

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

3.2 整个浏览器渲染流程

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

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

3.3 css的解析过程

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

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

四、思考

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

参考

jartto's的css语法解析

思否css过程

掘金css过程

腾讯云css过程

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

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

MDN浏览器工作原理 

CSDN:浏览器渲染流程

上一篇:css边框


下一篇:OpenCV识别数码管方案之整体数字的轮廓识别