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

一、使用透明度

语法：opacity:0

注意：元素消失，但是还会占据空间，只是视觉看不出来

 .box{ width: 100px; height: 100px; background-color: aquamarine; opacity: 0; }

二、使用display

语法：display:none

注意：元素消失，不会占据空间

 .box{ width: 100px; height: 100px; background-color: aquamarine; display:none; }

三、scale 缩放

语法：transform:scale(0) 值大于1放大，小于1缩小

注意：元素消失，但是还会占据空间

 .box{ width: 100px; height: 100px; background-color: aquamarine; transform:scale(0) }

四、使用visility

语法：visibility:hidden 隐藏 / visible显示

注意： 元素消失，但是还会占据空间

 .box{ width: 100px; height: 100px; background-color: aquamarine; visibility:hidden; }

五、使用宽高和overflow

语法：width:0;overflow:hidden;

注意： 元素消失，但是还会占据空间

 .box{ width: 0px; height: 0px; background-color: aquamarine; overflow:hidden; visibility:hidden; }

六、使用position定位

语法：position:absolute; top:-当前元素的高度；left：-当前元素的高度

注意： 元素消失，不会占据空间

 .box{ width: 100px; height: 100px; background-color: aquamarine; position:absolute; top:-100px; left:-100px; }