css如何隐藏页面元素？css隐藏元素的四种实现方法以及之间的区别（代码实例）
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了css如何隐藏页面元素？css隐藏元素的四种实现方法以及之间的区别（代码实例），小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含3780字，纯文字阅读大概需要6分钟。
内容图文
在CSS中，让元素隐藏（指屏幕范围内肉眼不可见）的方法很多，有的占据空间，有的不占据空间；有的可以响应点击，有的不能响应点击。那么这些css方式是怎样实现隐藏元素的，之间又有什么区别。本章给大家介绍css如何隐藏页面元素？css隐藏元素的四种实现方法以及之间的区别（代码实例）。有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。一、css隐藏元素的四种实现
1. visibility: hidden，设置元素隐藏
代码实例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>元素隐藏--visibility: hidden</title>
<style>
.demo{
width: 800px;
height: 200px;
margin: 50px auto;
}
span{
visibility: hidden;
}
</style>
</head>
<body>
<div class="demo">
<p>元素隐藏1--visibility: hidden,元素隐藏2--visibility: hidden,元素隐藏3--visibility: hidden</p>
<p>元素隐藏1--visibility: hidden,<span>元素隐藏2--visibility: hidden</span>,元素隐藏3--visibility: hidden</p>
</div>
</body>
</html>效果图：
visibility属性规定元素是否可见。将它的值设为 hidden 只能从视觉上隐藏元素，被隐藏的元素本身依然占据它自己的位置并对我们的网页布局起作用。
2. opacity: 0，设置元素隐藏
代码实例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>元素隐藏--opacity: 0</title>
<style>
.demo{
width: 800px;
height: 200px;
margin: 50px auto;
}
span{
opacity: 0;
}
</style>
</head>
<body>
<div class="demo">
<p>元素隐藏1--opacity: 0,元素隐藏2--opacity: 0,元素隐藏3--opacity: 0</p>
<p>元素隐藏1--opacity: 0,<span>元素隐藏2--opacity: 0</span>,元素隐藏3--opacity: 0</p>
</div>
</body>
</html>效果图：
opacity 属性的意思是设置一个元素的透明度。它不是为改变元素的边界框（bounding box）而设计的。这意味着将 opacity 设为 0 只能从视觉上隐藏元素。而元素本身依然占据它自己的位置并对网页的布局起作用。这和上面的visibility: hidden 相似。
3. display:none，设置元素隐藏
代码实例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>元素隐藏--display:none</title>
<style>
.demo{
width: 800px;
height: 200px;
margin: 50px auto;
}
span{
opacity: 0;
}
</style>
</head>
<body>
<div class="demo">
<p>元素隐藏--display:none,元素隐藏--display:none,元素隐藏--display:none</p>
<p>元素隐藏--display:none,<span>元素隐藏--display:none</span>,元素隐藏--display:none</p>
</div>
</body>
</html>效果图：
display 属性依照词义真正隐藏元素。将 display 属性设为 none 确保元素不可见并且连盒模型也不生成。使用这个属性，被隐藏的元素不占据任何空间。不仅如此，一旦 display 设为 none 任何对该元素直接打用户交互操作都不可能生效。
4. position: absolute，设置元素隐藏
代码实现：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>元素隐藏--position: absolute</title>
<style>
.demo{
width: 800px;
height: 200px;
margin: 50px auto;
}
span{
position: absolute;
top: -9999px;
left: -9999px;
}
</style>
</head>
<body>
<div class="demo">
<p>元素隐藏1--position: absolute,元素隐藏2--position: absolute,元素隐藏3--position: absolute</p>
<p>元素隐藏1--position: absolute,<span>元素隐藏2--position: absolute</span>,元素隐藏3--position: absolute</p>
</div>
</body>
</html>效果图：
position: absolute，设置元素隐藏的主要原理是通过将元素的 top 和 left 设置成足够大的负数，使它在屏幕上不可见。
二、区别
1、visibility:hidden
元素会被隐藏，但是不会消失，依然占据空间，隐藏后不会改变html原有样式；
会被子孙继承，子孙也可以通过显示的设置visibility: visible;来反隐藏；
不会触发该元素已经绑定的事件， 动态修改此属性会引起重绘。
2、opacity:0
只是透明度为100%,元素隐藏，依然占据空间,隐藏后不会改变html原有样式；
会被子元素继承,且子元素并不能通过opacity=1，进行反隐藏；
opacity:0的元素依然能触发已经绑定的事件。
3、display:none
不占据空间，把元素隐藏起来，所以动态改变此属性时会引起重排（改变页面布局），可以理解成在页面中把该元素删除掉一样；
不会被子孙继承，但是其子孙是不会显示的，毕竟都一起被隐藏了。
4、position: absolute
position: absolute，通过将元素的 top 和 left 设置成足够大的负数，使它在屏幕上不可见， 具有动态交互效果。
以上就是css如何隐藏页面元素？css 隐藏元素的四种实现方法以及之间的区别（代码实例）的详细内容，更多请关注Gxl网其它相关文章！
内容总结
以上是互联网集市为您收集整理的css如何隐藏页面元素？css隐藏元素的四种实现方法以及之间的区别（代码实例）全部内容，希望文章能够帮你解决css如何隐藏页面元素？css隐藏元素的四种实现方法以及之间的区别（代码实例）所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。