css的四種隱藏方式代碼詳解

1.opacity:0隻是把元素隱藏起來了 ，但是還是佔有布局，所以還是對布局有影響

<pclass="p1">snda:opacity:0隻是把元素隱藏起來了 ，但是還是佔有布局，所以還是對布局有影響</p><p>ppskdkad</p>

.p1{opacity:0;width:200px;height:200px;border:1pxsolidred;}

2.visibility:hidden還是只是把元素隱藏了，但是還是佔有布局

<pclass="p2">這是第二個p visibility:hidden還是只是把元素隱藏了，但是還是佔有布局</p><p>看看效果</p>

.p2{visibility:hidden;width:200px;height:200px;border:1pxsolidred;}

3.display:none不會影響到布局

<pclass="p3">這是第三個p display:none不會影響到布局</p><p>不信你看</p>

.p3{display:none;width:200px;height:200px;border:1pxsolidred;}

4.position:absolute不會影響到布局

<pclass="p4">這個是第四個p 我覺得也不會影響到布局 但是到底會不會 一起來看看吧 果然這個也不會影響到布局</p><p>看看</p>v

.p4{position:absolute;top:-9999px;left:-9999px;width:200px;height:200px;border:1pxsolidred;}

以上這四種隱藏方式大家學會了嗎？趕緊動手嘗試一下吧。