/*1 (display)顯示-block/inline/inline-block, 隱藏-none, 不保留位置*/ display: block; /*2 (visibility)可視化, hidden-隱藏, visible-可視, 保留位置*/ visibility: hidden; visibility: visible; /*3 (opacity)透明度設(shè)置(位置一直都在)*/ opacity: 0;

1.visibility屬性

visibility, 常用方法, 在css樣式中可先設(shè)置visibility: hidden; 隱藏標(biāo)簽, 再用偽類(lèi)選擇器hover去設(shè)置visibility: visible; 顯示隱藏的內(nèi)容 (visibility方法會(huì)保留原標(biāo)簽的文檔流位置)
推薦使用!!!

2.opacity屬性

opacity, 本意是用來(lái)設(shè)置透明度, 當(dāng)設(shè)置為opacity: 0; 時(shí), 也具有隱藏標(biāo)簽效果, 同樣, 在偽類(lèi)選擇器hover中設(shè)置opacity: 1; 時(shí)則可以顯示出所隱藏的內(nèi)容 (opacity方法可以理解為完全透明化, 同樣保留原標(biāo)簽位置)
一般推薦!

3.display屬性

display屬性, 本意為設(shè)置標(biāo)簽為行–塊元素, 但當(dāng)取display: none; 時(shí), 原有的標(biāo)簽則會(huì)消失, 后面同樣可以用hover偽類(lèi)選擇器去設(shè)置display: block/inline/inline-block; 去完成 隱藏–顯示效果 (因?yàn)閐isplay: none; 是完全消除標(biāo)簽, 更像刪除, 所以設(shè)為none時(shí)不能保留原有標(biāo)簽位置)
慎用!!

/*這里用了visibility屬性, 注釋里是display屬性*/ .hidden {position: absolute;width: 400px;height: 222px;background-color: rgba(0, 0, 0, 0.4);border-radius: 5% 5% 0 0;top: 0px;left: 0px;/*display: none;*/visibility: hidden; } .hidden h1 {text-align: center;margin-top: 80px;color: white; } /*致命點(diǎn)*/ .content:hover .hidden{/*display: block;*/visibility: visible; }

總結(jié)

以上是生活随笔為你收集整理的css三种标签隐藏方法(及它们用法区别), css显隐性问题的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。