如何隐藏元素而不让页面占用空间？
我使用visibility:hidden来隐藏某些元素，但隐藏时仍占用页面上的空间。
我怎样才能使它们完全消失，好像它们根本不在DOM中（但是实际上并没有从DOM中移除它们）？
试试设置display:none来隐藏并设置display:block来显示。
用风格来代替
<div style="display:none;"></div>
要使用display:none是一个不错的select只是删除一个元素，但它也将被删除屏幕阅读器 。 也有讨论，如果它影响search引擎优化。 A List Apart上有一篇关于这个话题的好文章
如果你真的只想隐藏 而不删除一个元素，最好使用：
div { position: absolute; left: -999em; }
像这样，它也可以被屏幕阅读器阅读。
这种方法的唯一缺点是，这个DIV实际上是渲染的，可能会影响性能 ，特别是在手机上。
看，而不是使用visibility: hidden; 使用display: none; 。 第一个选项将隐藏，但仍占用空间，第二个选项将隐藏， 不占用任何空间。
display:none隐藏，并设置display:block显示。
在显示后把它们放回原处不同：无。 不要使用显示：块/内联等。相反（如果使用JavaScript）设置CSS属性显示为''（即空白）
这个问题的答案是说使用display：none和display：block，但是这对于尝试使用css转换来显示和隐藏使用visibility属性的内容的用户是没有帮助的。
这也使我疯狂，因为使用显示屏会杀死任何css转换。
一种解决scheme是将此添加到使用可见性的类中：
overflow:hidden
为了这个工作是取决于布局，但它应该保持它所在的div内的空白内容。
显示：没有解决scheme，这是完全隐藏元素与其空间。
有关display:none故事display:none和visibility: hidden
visibility:hidden表示标签不可见，但空间分配给页面。
display:none表示完全隐藏元素的空间。 （尽pipe你仍然可以通过DOM与它交互）
$('#abc').css({"display":"none"});
这隐藏了内容，也不留空的空间。
在我的知识之上，有四种可能
- HTML
<button style="display:none;"></button> - CSS
#buttonId{ display:none; }#buttonId{ display:none; } - jQuery
$('#buttonId').prop('display':'none');＆$("#buttonId").css('opacity', 0);
显示：没有什么是避免页面上的占用空白的最好的事情
