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>