一、使用透明度
语法：opacity:0
注意：元素消失，但是还会占据空间，只是视觉看不出来
<style> .box{ width: 100px; height: 100px; background-color: aquamarine; opacity: 0; }</style><div class="box"></div>文章来源地址https://www.toymoban.com/news/detail-710752.html
二、使用display
语法：display:none
注意：元素消失，不会占据空间
<style> .box{ width: 100px; height: 100px; background-color: aquamarine; display:none; }</style><div class="box"></div>
三、scale 缩放
语法：transform:scale(0) 值大于1放大，小于1缩小
注意：元素消失，但是还会占据空间
<style> .box{ width: 100px; height: 100px; background-color: aquamarine; transform:scale(0) }</style><div class="box"></div>
四、使用visility
语法：visibility:hidden 隐藏 / visible显示
注意： 元素消失，但是还会占据空间
<style> .box{ width: 100px; height: 100px; background-color: aquamarine; visibility:hidden; }</style><div class="box"></div>
五、使用宽高和overflow
语法：width:0;overflow:hidden;
注意： 元素消失，但是还会占据空间
<style> .box{ width: 0px; height: 0px; background-color: aquamarine; overflow:hidden; visibility:hidden; }</style><div class="box"></div>
六、使用position定位
语法：position:absolute; top:-当前元素的高度；left：-当前元素的宽度
注意： 元素消失，不会占据空间
<style> .box{ width: 100px; height: 100px; background-color: aquamarine; position:absolute; top:-100px; left:-100px; }</style><div class="box"></div>文章来源：https://www.toymoban.com/news/detail-710752.html
到了这里，关于web前端html+css页面内容的六种隐藏方式的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
![[HTML]Web前端开发技术13（HTML5、CSS3、JavaScript ）横向二级导航菜单 Web页面设计实例——喵喵画网页](https://imgs.yssmx.com/Uploads/2024/02/797403-1.png)
