使用css，让div消失在视野中的方法

使用css，让div消失在视野中的方法

• [display: none;](#display: none;)
• [visibility: hidden;](#visibility: hidden;)
• opacity:0;
• 通过定位隐藏元素
• 通过margin隐藏元素

display: none;

display:none是彻底消失，不在文档流中占位，浏览器也不会解析该元素；

如果给一个元素设置了display: none，那么该元素以及它的所有后代元素都会隐藏，它是前端开发人员使用频率最高的一种隐藏方式。隐藏后的元素无法点击，无法使用屏幕阅读器等辅助设备访问，占据的空间消失。

visibility: hidden;

visibility:hidden是视觉上消失了，在文档流中占位，浏览器会解析该元素；

给元素设置visibility: hidden也可以隐藏这个元素，但是隐藏元素仍需占用与未隐藏时一样的空间，也就是说虽然元素不可见了，但是仍然会影响页面布局。

使用visibility:hidden比display:none性能上要好，display:none切换显示时visibility，页面产生回流（当页面中的一部分元素需要改变规模尺寸、布局、显示隐藏等，页面重新构建，此时就是回流。所有页面第一次加载时需要产生一次回流），而visibility切换是否显示时则不会引起回流

CSS3的transition支持visibility属性，但是并不支持display，由于transition可以延迟执行，因此可以配合visibility使用纯css实现hover延时显示效果。提高用户体验。

opacity:0;

opacity:0;和visibility:hidden;有些类似，是视觉上消失了，在文档流中占位，浏览器会解析该元素；

opacity:0;不会引起回流；

visibility:hidden; display:none; 不会触发任何事件

opacity可以触发事件如点击事件

通过定位隐藏元素

通过定位隐藏元素会影响布局

通过margin隐藏元素

通过margin隐藏元素会影响布局