css顺序-CSS 样式编写顺序

也想出现在这里？点击联系我~

立即下单

进入商城

进不了网站？换个网络试试！

1. 现象

CSS 样式属性很多，虽然编写顺序对于开发过程中的浏览器渲染至关重要，但我们大多数人并不关心。

2.按照一定顺序编写CSS的好处

1、利于网页加载代码，加快代码加载顺序
2、正确的样式顺序有利于查看维护
3、正确的样式顺序也是css样式优化的一种方式。

3. 正确的书写顺序

（1）定位属性：位置显示浮动左上右下下溢出清晰z索引

（2）自我属性：宽度高度填充边框边距背景

（3）文字样式：字体-家族-字体-大小字体样式-字体粗细-变色

（4）文本属性：文本-垂直对齐-文本环绕-变换文本-缩进文本-修饰字母间距-字距-空格-文本溢出

（5） CSS3 中的新属性：内容框-阴影边框-半径变换....

四、正确书写的目的

减少浏览器重排，提高浏览器渲染 DOM 的性能

5. 浏览器的渲染过程

（1）解析HTML创建DOM树，解析CSS创建CSS树：解析HTML成树状数据结构

，并将 CSS 解析为树状数据结构

（2）构建渲染树：DOM树和CSS树合并后产生的渲染树。

（3）布局渲染树：通过渲染树，浏览器已经知道这些网页中有哪些节点，每个节点的CSS定义，以及它们的依赖关系，从而估计每个节点在屏幕中的位置。

（4）绘制渲染树：根据预估规则，通过主板绘制屏幕上的内容。

要显示在浏览器屏幕上的 CSS 样式解析发生在步骤 （2） 中，

（3） （4）、可以看出浏览器并不是一得到CSS样式就立即开始解析css顺序，而是按照CSS样式的编写顺序按照DOM树渲染样式的结构进行分发，完成步骤（2），然后开始遍历每个树节点的CSS样式进行分析， 此时的CSS样式遍历顺序完全基于之前的编写顺序。在解析过程中，一旦浏览器注意到元素的位置发生了变化以影响布局，就需要根据以下内容倒带并重新呈现书籍顺序：

宽度：100px;

高度：100px;

背景颜色： 红色 ;

位置：绝对;

当浏览器解析为位置时，它

突然发现元素是绝对定位的元素，需要从文档流中分离出来，之前是按照普通元素解析的，所以不得不重新渲染去掉元素在文档中的位置，但是因为元素的占用发生了变化css顺序，其他元素也可能受到其重排和重新排列的影响。最后，（3）步骤耗时过长，影响（4）步骤的显示，影响用户体验。

通常，我们可能会将HTML网页视为二维平面css顺序，因为页面上的文本，图像或其他元素按一定的顺序排列在页面上，并且每个元素之间都有一定的间隙并且不重叠。不过实际的网页似乎是三维的，元素之间可能会出现堆叠（重叠）css顺序，可以通过 CSS 中的 z-index 属性设置元素的堆叠顺序，如右图所示：

图：元素堆叠演示

每个元素都有一个默认的 z-index 属性，将 z-index 属性与位置属性组合在一起会产生类似于 Photoshop 中的视口效果。z-index 属性设置元素的级联级别（元素重叠时是高于还是低于其他元素），级联级别较高的元素将位于级联级别较低的元素的后面（或前面）。

z 索引属性

允许您创建越来越复杂的网页布局，z-index 属性的可选值如下表所示：

值说明

自动

默认情况下，堆叠顺序等于父元素

数

使用特定数值（整数）设置元素的堆叠顺序。

继承

从父元素继承 z-index 属性的值

关于元素的层次结构，有几点需要注意：

示例：下面是演示 z-index 属性使用的具体代码：

    
        .box-x {
            width: 150px;
            height: 350px;
            border: 1px dashed red;
            background-color: rgba(255, 153, 153, 0.7);
            float: left;
        }
        .box-y {
            width: 300px;
            height: 120px;
            border: 1px dashed green;
            background-color: rgba(179, 255, 153, 0.7);
        }
        .one {
            position: absolute;
            top: 5px;
            left: 5px;
            z-index: 4;
        }
        .two {
            position: relative;
            top: 30px;
            left: 80px;
            z-index: 3;
        }
        .three {
            position: relative;
            top: -10px;
            left: 120px;
            z-index: 2;
        }
        .four {
            position: absolute;
            top: 5px;
            right: 5px;
            z-index: 1;
        }
        .five {
            margin-left: 100px;
            margin-top: -50px;
            background-color: rgba(255, 255, 153, 0.7);
            z-index: 5;
        }
    


    
one
    
two
    
three
    
four
    
five

运行结果如右图所示：

图：z 指数属性的演示