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值