html+css中的四種隱藏方式

來源:互聯網
上載者:User
這次給大家帶來html+css中的四種隱藏方式,html+css中隱藏方式的注意事項有哪些,下面就是實戰案例,一起來看一下。

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

<p class="p1">snda:opacity:0隻是把元素隱藏起來了 ,但是還是佔有布局,所以還是對布局有影響</p><p>ppskdkad</p>
.p1{opacity: 0;width:200px;height:200px;border:1px solid red;}

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

<p class="p2">這是第二個p visibility:hidden還是只是把元素隱藏了,但是還是佔有布局</p><p>看看效果</p>
.p2{visibility: hidden;width:200px;height:200px;border:1px solid red;}

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

<p class="p3">這是第三個p display:none不會影響到布局 </p><p>不信你看</p>
.p3{display: none;width:200px;height:200px;border:1px solid red;}

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

<p class="p4">
這個是第四個p 我覺得也不會影響到布局 但是到底會不會 一起來看看吧 果然這個也不會影響到布局
</p>
<p>看看</p>v
.p4{position: absolute;top:-9999px;left:-9999px;width:200px;height:200px;border:1px solid red;}

相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!

推薦閱讀:

清除浮動的幾種方法

怎樣隱藏文本的超出部分

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.