【css】visibility:hidden和display:none有什么不同？

同样是控制元素不可见，visibility：hidden和display:none有什么不同呢？

看下面的代码，

普通展示

<div style="border: 1px solid; height: 300px; width: 300px; margin-top: 20px; background: silver;">
			<p>test a paragraph test test test test  
			<em style="color: red;">测试文本测试文本
			<em>abc</em>
			</em>
			应用应用
			</p>
</div>

设置visibility:hidden

<div style="border: 1px solid; height: 300px; width: 300px; margin-top: 20px; background: silver;">
			<p>test a paragraph test test test test  
			<em style="color: red; visibility: hidden;">测试文本测试文本<em>abc</em></em>
			应用应用
			</p>
			</div>

• 可以看到，仍然保留了此处的布局，只是元素不显示而已。
• “处于不可见状态时，元素还是会** 影响文档的布局 **，就好像它还可见一样。换句话说，元素还在那里，只不过你看不见它。”

设置display:none

<div style="border: 1px solid; height: 300px; width: 300px; margin-top: 20px; background: silver;">
			<p>test a paragraph test test test test  
			<em style="color: red; display:none;">测试文本测试文本<em>abc</em></em>
			应用应用
			</p>
			</div>

• 可以看到，元素不仅不显示，还会从文档中删除，所以对文档布局没有任何影响。

总结

• 控制元素不可见
• visibility:hidden 元素空间保留，仍然影响文档布局
• display:none 元素从文档中删除，不影响布局