display:none和visibility:hidden的区别

display：none 和visibility：hidden都可以实现让元素隐藏的效果，但原理是大不相同1.display:none是让这个元素失去块元素的效果，其本身这个元素也是直接消失，会影响到布局问题。2.visibility:hidden:可以让元素消失，属于css样式，它只是简单的让元素看不见，但本身的位置还在，如果对div进行hidden，那么div除了看不见，其他所有的样式都在。.

你好张淑芬

12090人浏览 · 2022-03-16 18:43:00

你好张淑芬 · 2022-03-16 18:43:00 发布

display：none 和visibility：hidden都可以实现让元素隐藏的效果，但原理是大不相同

1.display:none是让这个元素失去块元素的效果，其本身这个元素也是直接消失，会影响到布局问题。

2.visibility:hidden:可以让元素消失，属于css样式，它只是简单的让元素看不见，但本身的位置还在，如果对div进行hidden，那么div除了看不见，其他所有的样式都在。

	<body>
		<div style="background-color:#63A35C">
			<ol >
				<li>元素</li>
				<li style="visibility: hidden;">元素2</li>
				<li>元素</li>
				<li>元素</li>
			</ol>
		</div>
		
		<div style="background-color: #4390EE;">
			<ol>
				<li>元素</li>
				<li style="display: none;">元素2</li>
				<li>元素</li>
				<li>元素</li>
			</ol>
		</div>
		
	</body>

运行截图：