display:none与visibility:hidden的区别，还有html5的新属性hidden

最新推荐文章于 2023-09-29 00:35:46 发布

原创最新推荐文章于 2023-09-29 00:35:46 发布 · 1.6k 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#html #隐藏元素 #display #visibility #hidden

html 专栏收录该内容

5 篇文章

订阅专栏

display:none与visibility:hidden的区别

还有html5的新属性hidden

①三者都能把网页上某个元素隐藏起来，

②display:none与 visibility:hidden他们不是html元素的属性，是css样式的属性，内联方式编辑要写在style属性里

③hidden 是html的属性，可以直接写在html元素。XML严格模式 hidden="hidden"

    style="display:none" --不为被隐藏的对象保留其物理空间，即该对象在页面上彻底消失。
                                 俗一点说：就是把主人赶走了占用他的地盘。

     style="visibility:hidden"--- 使对象在网页上不可见，但该对象在网页上所占的空间没有改变。
                                 俗一点说：主人离家出走了，但是主人还是主人，地盘还是他的。

     hidden="hidden"--是html5中元素的新属性，功能与style="display:none"  一致，鸠占鹊巢。
                                 不为被隐藏的对象保留其物理空间，即该对象在页面上彻底消失。
 

 以下为代码：
 <!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style>
	.p0,.p1,.p2,.p3,.p4,.p5,.p6{
		width:100px;
		height:20px;
		border:1px solid red;
		margin:0px;
	}
		
</style>
</head>
<body>
<p class="p0" >可见p0</p>
<p class="p1" hidden="hidden">隐藏p1</p>
<p class="p2" >可见p2</p>
<p class="p3" style="display:none">隐藏p3</p>
<p class="p4" >可见p4</p>
<p class="p5" style="visibility:hidden">隐藏p5</p>
<p class="p6" >可见p6</p>

</body>
</html>