CSS的隐藏方式_html/css_WEB-ITnose

php中文网
发布: 2016-06-21 09:07:02
原创
926人浏览过

display:none和visibility:hidden的区别

// 1、空间占据display:none;// 隐藏的元素不占文档流visibility:hidden;// 隐藏的元素空间存在(占茅坑、不拉屎)// 2、回流和重绘(reflow/repaint)display:none;// 隐藏参数回流和重绘visibility:hidden;// 无回流和重绘// 3、株连九族display:none;// 其内的标签元素全部隐藏、无论如何挣扎都无济于事visibility:hidden;// 其元素若添加visibility:visible;则会显示出来
登录后复制

height:0;overflow:hidden;

overflow:hidden;// 溢出隐藏//若父级被添加了position属性、子级内添加了绝对定位、则不会被隐藏//火星人在地球触发了法律,如果火星人的老爸在这法律之外,则这个火星人啥事没有;否则,坐牢!
登录后复制
position:absolute;top:-999em;// 不占空间、无法点击position:relative;top:-999em;// 占内存、无法点击position:absolute;visibility:hidden;// 不占空间、无法点击opacity:0;filter:Alpha(opacity=0);// 占内存、可以点击
登录后复制

那些原因引起浏览器的回流

  • 改变字体大小

  • 样式表改动

  • DOM操作

  • CSS伪类

  • 元素内容变化、尤其是输入控件

    立即学习前端免费学习笔记(深入)”;

  • 调整窗口大小( resize )

  • width、clientWidth(内容可视区大小)、offsetWidth(border+clientWidth)、scrollTop/scrollHeight(元素内容高度/包括溢出内容)

  • 会使浏览器将渐进回流队列Flush、立即执行回流
    如何减少页面回流

    • 避免逐项更改样式、最好一次性更改style属性cssText、或者定义class一次性添加className

    • 避免循环操作DOM、创建一个documentFragment或div在上面应用所有DOM操作、最后在添加到指定的元素中

    也可以在一个display:none;的元素上进行操作、因为display:none;上的DOM操作不会引发回流(reflow)和重绘(repaints)
    • 避免循环读取offsetLeft等属性、在循环之前把他们存储起来

    • 进行复杂动画的元素运动时、使用绝对定位、使其脱离文档流。
      否则会引起父元素以及后续元素大量的回流

    HTML速学教程(入门课程)
    HTML速学教程(入门课程)

    HTML怎么学习?HTML怎么入门?HTML在哪学?HTML怎么学才快?不用担心,这里为大家提供了HTML速学教程(入门课程),有需要的小伙伴保存下载就能学习啦!

    下载
    来源:php中文网
    本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
    最新问题
    开源免费商场系统广告
    热门教程
    更多>
    最新下载
    更多>
    网站特效
    网站源码
    网站素材
    前端模板
    关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
    php中文网:公益在线php培训,帮助PHP学习者快速成长!
    关注服务号 技术交流群
    PHP中文网订阅号
    每天精选资源文章推送
    PHP中文网APP
    随时随地碎片化学习
    PHP中文网抖音号
    发现有趣的

    Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号