display和visibility属性的比较

最新推荐文章于 2025-04-02 09:31:39 发布

yibox

最新推荐文章于 2025-04-02 09:31:39 发布

阅读量543

点赞数

文章标签： html css

本文链接：https://blog.youkuaiyun.com/u010728594/article/details/89929751

版权

前端总结专栏收录该内容

13 篇文章

订阅专栏

本文比较了CSS中`display`和`visibility`属性在隐藏元素时的区别，`display:none`会释放元素空间，影响周围元素布局，而`visibility:hidden`则保留元素空间但使其不可见。此外，文章还介绍了使用`display:inline-block`实现多栏布局的方法，强调在布局时要确保总width大于等于各栏width以避免元素换行。

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

display和visibility元素隐藏的比较

<input type="button" value="隐藏"
		onclick="document.getElementById('text1').style.display='none';"/>
<input type="button" value="显示"
		onclick="document.getElementById('text1').style.display='';"/>
<div id="text1">使用display控制对象显示和隐藏/div>
<input type="button" value="隐藏"
		onclick="document.getElementById('text2').style.visibility='hidden';"/>
<input type="button" value="显示"
		onclick="document.getElementById('text2').style.visibility='visible';"/>
<div id="text2">使用visible控制对象显示和隐藏</div>

元素显示时的状态

display=""
visibility=‘visible’

使用display元素隐藏后状态

使用display="none"隐藏元素时，元素所占空间也会被释放，这样该元素之下元素相应补齐失去的位置，会造成元素的移动。
在这里插入图片描述

使用visibility元素隐藏后状态

使用visibility="hidden"隐藏元素时，元素所占空间不会被释放，元素隐藏后所占空间为透明。

多栏布局的实现方式

<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
	<title>多栏布局</title>
	<style type="text/css">
		div#container{
			width:960px;
		}
		div>div{
			border:1px solid #aaf;
			display:inline-block;
			box-sizing:border-box;/*是盒子的外层宽度保持不变*/
			padding:10px;
			height:100px;
		}
	</style>
</head>
<body>
	<div id="container">
		<div style="width:220px;">style="width:220px;</div>
		<div style="width:500px;height:500px">style="width:500px;</div>
		<div style="width:220px">style="width:220px;</div>
	</div>
</body>