一、使用透明度
語法：opacity:0
注意：元素消失，但是還會占據(jù)空間，只是視覺看不出來
<style> .box{ width: 100px; height: 100px; background-color: aquamarine; opacity: 0; }</style><div class="box"></div>?文章來源地址http://www.zghlxwxcb.cn/news/detail-710752.html
二、使用display
語法：display:none
注意：元素消失，不會占據(jù)空間
<style> .box{ width: 100px; height: 100px; background-color: aquamarine; display:none; }</style><div class="box"></div>?
三、scale 縮放
語法：transform:scale(0)? ? 值大于1放大，小于1縮小
注意：元素消失，但是還會占據(jù)空間
<style> .box{ width: 100px; height: 100px; background-color: aquamarine; transform:scale(0) }</style><div class="box"></div>??
四、使用visility
語法：visibility:hidden 隱藏 / visible顯示
注意： 元素消失，但是還會占據(jù)空間
<style> .box{ width: 100px; height: 100px; background-color: aquamarine; visibility:hidden; }</style><div class="box"></div>?
五、使用寬高和overflow
語法：width:0;overflow:hidden;
注意： 元素消失，但是還會占據(jù)空間
<style> .box{ width: 0px; height: 0px; background-color: aquamarine; overflow:hidden; visibility:hidden; }</style><div class="box"></div>
??
六、使用position定位
語法：position:absolute; top:-當前元素的高度；left：-當前元素的寬度
注意： 元素消失，不會占據(jù)空間
<style> .box{ width: 100px; height: 100px; background-color: aquamarine; position:absolute; top:-100px; left:-100px; }</style><div class="box"></div>- ?
- ?
?文章來源：http://www.zghlxwxcb.cn/news/detail-710752.html
- ?
- ?
?
到了這里，關(guān)于web前端html+css頁面內(nèi)容的六種隱藏方式的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
![[HTML]Web前端開發(fā)技術(shù)13（HTML5、CSS3、JavaScript ）橫向二級導航菜單 Web頁面設(shè)計實例——喵喵畫網(wǎng)頁](https://imgs.yssmx.com/Uploads/2024/02/797403-1.png)
