web前端html+css页面内容的六种隐藏方式,
3672Js.Com2023-10-17 00:11 来源:未知 阅读:8569 关注度4
web前端html+css页面内容的六种隐藏方式,
一、使用透明度
语法:opacity:0
注意:元素消失,但是还会占据空间,只是视觉看不出来
<style> .box{ width: 100px; height: 100px; background-color: aquamarine; opacity: 0; }</style><div class="box"></div>
二、使用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>
本站文章为3672js教程网友分享投稿,版权归原作者,欢迎任何形式的转载,但请务必注明出处。同时文章内容如有侵犯了您的权益,请联系我们处理。
评论已被关闭