元素转换/回流与重绘

和蔼的阿木木o

已于 2022-06-27 15:20:07 修改

阅读量180

点赞数

分类专栏： css html 文章标签： html 前端 css css3

于 2022-06-24 13:57:41 首次发布

本文链接：https://blog.csdn.net/m0_59642141/article/details/125442913

版权

html 同时被 2 个专栏收录

28 篇文章 0 订阅

订阅专栏

css

16 篇文章 0 订阅

订阅专栏

本文详细介绍了CSS中的display属性，包括block、inline、inline-block和none四种常见类型，以及它们对元素布局的影响。此外，还探讨了display属性在实现文字垂直居中和表格单元格效果时的应用。同时，文章强调了回流与重绘的概念，分析了导致回流的原因，并提供了减少回流的优化策略。通过对display属性的深入理解，可以更好地优化页面性能。

摘要由CSDN通过智能技术生成

    <style>
        div{
            display: inline;  /* 转化为行内元素   加宽高没有作用，只受内容影响*/
            display: inline-block;  /*行内块元素 可以调整宽高*/
            background-color: red;
        }
        span{
            display: block;   /*转化为块元素*/
            display: inline-block;  /*转化为行内块元素 可以设置宽高*/
        }
        img{
            display: block;    /*转化为块元素，可以独占一行*/
        }
    </style>
</head>
<body>

    <div>hello div</div>
    <span>hello span</span>
    <img src="mn1.jpg" alt="" width="200">

    <!-- 块元素  display：block 
    行内（内联）元素
    行内元素块元素 -->
     <!-- 1.display:none   隐藏后位置不见  visibility:hidden 隐藏后位置可见
    2.display:none  不能被子元素继承,但visibility 子元素可继承
    3.display:none  css3的transition无法过度display,但visibility可以通过css3过渡
    4.visibility: hidden不会影响计数器的计数,如图所示,visibility: hidden虽然让一个元素不见了,但是其计数器仍在运行。这和display: none完全不一样
    5.visibility:hidden  不会引起回流，只会引起重绘 -->
        <!--回流与重绘-->
        <!--重绘:当页面元素祥式改变不影响元素在文档流中的位置时，如background-color. border-color.         visibility等， 浏览器只会将新的样式赋予元素并进行重新绘制操作。
        <!--回流:当渲染树(render tree) 中的一部分或全部因为元素的尺丈 布局、隐藏等改变时，浏览        器重新渲染部分DOM或者全部DOM的过程-->
        <!--页面至少进行次回流-->
        <!-- ps:回流必将引起重绘，而重绘不一定会引起回流-->

</body>

标签的两种常见”display”属性
CSS使用display设置的标签的显示方式
block“块”元素
inline“行内”元素
inline-block 行内块元素
none 隐藏

<div>主要用于HTML文档中独立的“大块”内容
<span>主要用于HTML文档中需要特别定义的内容

display:table-cell属性简介

display：table-cell；会使元素表现的类似一个表格中的单元格td，利用这个特性可以实现文字的垂直居中效果。同时它也会破坏一些CSS属性，使用table-cell时最好不要与float以及position: absolute一起使用，设置了table-cell的元素对高度和宽度高度敏感，对margin值无反应，可以响应padding的设置，表现几乎类似一个td元素。
1. 不要与float：left; position:absolute; 一起使用
2. 可以实现大小不固定元素的垂直居中
3. margin设置无效，响应padding设置
4. 对高度和宽度高度敏感
5. 不要对display：table-cell使用百分比设置宽度和高度

重新渲染页面需要重新计算元素的几何大小和位置，这个计算的过程称之为回流。

回流的原因

初始化的时候，第一次回流
窗口大小变化
字体改变
增加或者移除样式表
内容变化
操作class属性
操作Dom
html设置行内样式
offsetWidth, width, clientWidth, scrollTop/scrollHeight的计算

避免/减少回流的方式

添加class样式
修改样式直接更换class名称，不是改变某一个特定的属性
操作块级元素时，可使其脱离文档流，设置position: fixed position: absolute
操作块级元素时，可先隐藏元素，设置display: none
避免循环操作元素
避免使用table布局