CSS的隐藏方式

afishhhhh 发布于2019-08-01 14:51 / 2547人阅读

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等属性、在循环之前把他们存储起来

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

云服务器 GPU云服务器隐藏联系方式 html css隐藏 css引入方式 html按钮的隐藏

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/49624.html

CSS中隐藏元素的几种方法

摘要：使用这种方法来隐藏元素，是否可以触发事件要根据具体的情况来分析。其他的方式只作了解即可，并不推荐使用它们来隐藏元素，它们的真正用途应该不在隐藏元素，而是通过了解这些方法的特点，挖掘出其真正的使用场景几种方法的简单介绍 display:none 最常用的隐藏元素的方法 .hidden{ display:none } 将元素设置为display:none后，元素在页面上将彻底...

vvpvvp 2019-08-29 11:33 评论0 收藏0
【CSS】CSS 世界 -- 元素的显示与隐藏学习总结

摘要：应用场景用户上传头像，实时显示并裁减实现方式模块外部容器设置，剪裁区域里面放一个加载效果，设置。图片尺寸获取成功后，再正常初始化，然后让外部容器属性重置为。这样体验就会好很多，用户只会看到加载中剪裁界面，而不是占位界面加载中最终操作界面。一、Display 几种隐藏方式 1、希望元素不可见、不占据空间、辅助设备无法访问、不渲染使用标签：

wyk1184 2019-08-29 17:20 评论0 收藏0
CSS的隐藏方式

display:none和visibility:hidden的区别 // 1、空间占据 display:none;// 隐藏的元素不占文档流 visibility:hidden;// 隐藏的元素空间存在(占茅坑、不拉屎) // 2、回流和重绘(reflow/repaint) display:none;// 引发回流和重绘 visibility:hidden;// 无回流和重绘 // 3、株连九族 ...

URLOS 2019-08-28 18:17 评论0 收藏0
【CSS】隐藏元素总结

摘要：本文旨在加深对隐藏元素方法的理解，资料均来源于网络，文章结尾附有参考链接。如果祖先元素设置了该样式，该元素及其子孙元素都将隐藏，并且没有其它让其子孙元素恢复显示的办法。四和组合溢出隐藏，也就是说盒子以外的元素都会隐藏掉。本文旨在加深对css隐藏元素方法的理解，资料均来源于网络，文章结尾附有参考链接。一、CSS中隐藏元素的常用方法有以下几种： 1. {display: none; /...

testbird 2019-08-30 12:56 评论0 收藏0
jQuery的show/hide性能测试

摘要：原文地址这篇文章是各种方式的性能测试。但由于未能找问明原因，所以作者就自己去做了这个测试。主要原因在于方法必须先保存元素的属性，这样才能把元素恢复到原来的状态。根据源代码上的注释，这样做是为了防止浏览器在每个循环上进行重新渲染。原文地址：http://www.php100.com/html/webkaifa/javascript/2012/0927/11164.html 这篇文章是j...

canger 2019-08-19 18:38 评论0 收藏0