问题描述:设置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;
}
设置后显示:
特点:隐藏不占位置