web前端html+css页面内容的六种隐藏方式

  • web前端html+css页面内容的六种隐藏方式已关闭评论
  • 128 次浏览
  • A+
所属分类:Web前端
摘要

一、使用透明度语法:opacity:0注意:元素消失,但是还会占据空间,只是视觉看不出来

一、使用透明度

语法: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>