JavaEE
鸿蒙应用开发
HTML&JS+前端
Python+大数据开发
人工智能开发
电商视觉设计
软件测试
新媒体+短视频
产品经理
集成电路应用开发
C/C++
狂野架构师
IP短视频
Display：none与visibility：hidden有什么区别?
更新时间:2021年09月24日16时11分 来源:传智教育 浏览次数:
dispaly:none 设置该属性后，该元素下的元素都会隐藏，占据的空间消失
visibility:hidden 设置该元素后，元素虽然不可见了，但是依然占据空间的位置区别
Display：none与visibility：hidden的区别
1.visibility具有继承性，其子元素也会继承此属性，若设置visibility:visible，则子元素会显示
2.visibility不会影响计数器的计算，虽然隐藏掉了，但是计数器依然继续运行着。
3.在CSS3的transition中支持visibility属性，但是不支持display，因为transition可以延迟执行，因此配合visibility使用纯CSS实现hover延时显示效果可以提高用户体验
4.使用visibility: hidden比display: none性能上要好，display: none切换显示时，页面产生回流(当页面中的一部分元素需要改变规模尺寸、布局、显示隐藏等，页面重新构建，此时就是回流。所有页面第一次加载时需要产生一次回流)，而visibility切换是否显示时则不会引起回流。
猜你喜欢：
最新资讯
0
分享到：
江苏传智播客教育科技股份有限公司 版权所有Copyright 2006-2024 All Rights Reserved 苏ICP备16007882号营业执照增值电信业务经营许可证出版物经营许可证
苏公网安备 32132202001156号