display:none和visibility:hidden的区别和用法

<style>
	#div1 {
			width: 200px;
			height: 200px;
			visibility:hidden;
			/* display: none; */
			background-color: red;
		}
</style>

display:none; 在网页中不占用位置，也不会产生box，然而其实是存在的。

visibility:hidden; 在网页中是存在的，只不过是一片空白，会产生box。