先上结论 区别:最大区别是 display:none不占用原来的位置。visibility:hidden占用原来的位置
深入理解display:none
定义:将 display 设置为 none 会将元素从 可访问性树 accessibility tree 中移除。这会导致该元素及其所有子代元素不再被屏幕阅读技术 screen reading technology 访问。
浏览器的渲染原理:浏览器会 解析html生成DOM树,解析css生成css渲染树。DOM树和渲染树结合生成Render树,浏览器以盒子模型和信息布局渲染页面。每个元素在render tree中对应0个或者多个盒子,diaplay:none没有生成对应的盒子
,所以可以DOM操作,但是页面上不显示。
父元素为display:none。子元素也不显示
可以进行DOM操作,不能进行响应任何事件
深入理解visibility:hidden
定义:CSS属性 visibility 显示或隐藏元素而不更改文档的布局
隐藏元素,但是其他元素的布局不改变,相当于此元素变成透明。要注意若将其子元素设为 visibility: visible,则该子元素依然可见。
使用场景
- 隐藏表格的行和列
不触发布局的情况下隐藏元素
常用值- visible:显示
- hidden:不可视,保持位置
- collaose:用于表格元素
- inherit:继承父元素的visibility值
对比
- 设置为visibility:hidden的元素其子元素设置为
visibility:visible
还可以显示 - 两者都无法获得焦点
- 不会妨碍表单的提交
- transition的影响对表单的改变有效
- visibility不会触发reslow回流。只会重绘
拓展: display:inline-block会产生什么问题?
设置以后,元素当成行内元素排版,元素之间的 空格 等被浏览器处理,这里默认合并所有的空格,所以元素之间会出现空格。
解决方式:
- float:left
- 将上一个元素的结束标签与下一个元素的开始标签紧在一起
- 把父元素的font-size设置为0;子元素重新设置font-size值
今天的文章display:none和visibility:hidden区别详解分享到此就结束了,感谢您的阅读。
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/18532.html