display和visibility隐藏元素的区别

介绍

也是最近几个月才接触到前端开发的，过程中遇到过一些问题，对于一些概念也有部分自己的观点，不完全正确，纯为知识交换。

display隐藏元素

对于display这个属性大家应该不会陌生，block常用来定义元素的类型，常用的属性值如block,inline-block,none等
当给元素的display属性设置为none值后，元素不可见，不占文档流，且若不审查根本找不到该元素
图中cell1设置为display:none;表示该元素不可见，在审查元素中，点击该元素页面中也无任何显示。
并且cell1的子元素p中并未继承来自父级的diaplay属性，如图：

由此可得，display隐藏元素的特点有：
1、不占文档流，及不会影响其他元素的布局
2、display属性不会继承给后代

visibility隐藏元素

visibility通过设置属性值为hidden，达到对元素的隐藏效果

如图已经给cell1设置了visibility:hidden；
细心你应该已经发现了这张图与上面设置display:none时的不同之处。似乎cell2元素被“挤”下来了，那这又是为什么呢
审查元素后发现，cell1仍然在当前位置，只不过看不到了而已

再看看该属性的继承性
由图可见，cell1中的p标签继承了来自父级的visibility属性，所以自身也一起隐身了，所以这里与display:none，不同的就是前者是将隐藏继承给子代，而display:是将该元素及元素内的一切全部设为不显示，那如果我给cell1中的p标签设置一个visibility:visible呢？，让我们来看一下
我们发现只有p标签中的内容显示了，而父级cell1此时仍旧只是占了个位置罢了

总结

对比两种隐藏元素的方法，我们可以得出以下结论：
1、display隐藏元素会脱离文档流，visibility则不会。
2、display属性不会遗传给后代，visibility会。
3、display:none后会影响当前布局，visibility:hidden不会。（实际上这一条可以与第一条合并）

以上是我对这两种隐藏元素方式的理解，大家如果有补充或不同意见也可以一起交流一下。