display:none和visibility:hidden区别详解

display:none和visibility:hidden区别详解display:none和visibility:hidden区别详解 display:none不占用原来的位置。visibility:hidden占用原来的位置

先上结论 区别:最大区别是 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

(0)
编程小号编程小号

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注