display:none和visibility:hidden两者的区别

微笑向日葵°

于 2021-03-09 11:07:47 发布

阅读量2.2k

点赞数 4

分类专栏： CSS 文章标签： css

本文链接：https://blog.csdn.net/weixin_43535265/article/details/114576197

版权

本文对比了CSS中display:none和visibility:hidden的相同点和不同点，包括是否影响布局、是否有继承属性以及是否影响计数器的运行。display:none会隐藏元素并释放其占据的空间，影响布局及计数器；而visibility:hidden则让元素保持空间但隐藏内容，不影响计数器，且具有继承性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、相同点

display:none和visibility:hidden 都能把网页上的某元素隐藏起来

二、不同点

示例代码如下：

<!DOCTYPE html>
<html>
	<head>
		<style>
			.hidden1 {
    
				display:none;
			}
			.hidden11 {
    
				display: inherit;
			}
			.hidden12 {
    
				display: block;
			}
			.hidden2{
    
				visibility: hidden;
			}
			.hidden21{
    
				visibility: inherit;
			}
			.hidden22{
    
				<

最低0.47元/天解锁文章