設定元素隱藏的四種方式
阿新 • • 發佈:2018-11-04
問題描述:設定hid元素隱藏
<p>hahahahhhhhhahahahahah</p>
<p class="hid">agbasgedghfbhrgvvfng</p>
<p>bsecghwdefsvdfd</p>
沒有設定隱藏時顯示
方法一:visibility:hidden
.hid{ visibility: hidden; }
設定成功後顯示
特點:隱藏了某元素,但是元素佔的位置不變
方法二:opacity: 0
.hid{ opacity: 0; }
特點:元素隱藏但仍然佔位置,和visibility:hidden相比優點時可以設定transition和animate動畫
方法三:position:absolute;left:-1000px
.hid{ position: absolute; left:-1000px; }
設定後顯示:
特點:元素隱藏,不佔位置(原因:設定absolute之後脫離文件流)
方法四:position: relative;left:-1000px;
.hid{ position: relative; left:-1000px; }
設定後顯示:
特點:隱藏並佔位置
方法五:dispaly:none
.hid{ display: none; }
設定後顯示:
特點:隱藏不佔位置