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