本文為大家帶來了CSS控制p層顯示和隱藏的方法，是前端學習必須要掌握的基礎知識，非常不錯，具有參考借鑒價值，感興趣的小伙伴一起學習吧
#CSS中的display和visibility屬性
css中display和visibility可以隱藏和顯示html元素包含p層。看起來兩者非常類似，很多人會搞混。以下分別介紹兩者的屬性：
display:none|block;
display:none;
隱藏該html元素，確切的說，是在瀏覽器中消除該元素，不佔螢幕的空間。若其下有其他元素，就會上移到該空間區域（好像桌子上有100塊錢，現在我把它放在抽屜裡藏起來，桌子上放100錢的地方可以放在其他任何東西）。
dispaly:block;
顯示已經隱藏的html元素，如果別的元素佔有了該空間時，他將下移，空間重新別原來的元素佔有。 （把100塊重新從抽屜裡那出來放回桌上）。
visibility：hidden|visible;
visibility:hidden;
隱藏該元素，正真的隱藏，但他仍佔有那塊空間。這時，（桌上有100塊錢，這是我蓋了桌布把他藏起來，錢還在那裡）。
visibility:visible;
讓元素顯示（拿掉了桌布，看到了100塊）。
所以display和visibility控制的分別是html元素是否存在和是否顯示，display的屬性定義該元素存在或不存在，而visibility的屬性只是控制該元素是否顯示出來，實際上還是存在的。
接下來用程式碼來舉個例子，程式碼：
<html>
<head>
<script type="text/javascript">
function testDisplay()
{
var pD = document.getElementById("testD");
if(pD.style.display=="none")
{
pD.style.display = "block";
}
else
{
pD.style.display = "none";
}
}
function testVisibility()
{
var pV = document.getElementById("testV");
if(pV.style.visibility =="hidden")
{
pV.style.visibility ="visible";
}
else
{
pV.style.visibility = "hidden";
}
}
</script>
</head>
</body>
<p id="testD" style="border:#ddd 1px solid">
<p style="display:block;border:#ccc 2px solid">
<p style="visibility:visible;border:#aaa 2px solid">
Display
</p>
</p>
</p>
<p id="testV" style="border:#ddd 1px solid">
<p style="display:block;border:#ccc 2px solid">
<p style="visibility:visible;border:#aaa 2px solid">
Visibility
</p>
</p>
</p>
<input type="button" value="TestDisplay" onclick="testDisplay()"/>
<input type="button" value="TestVisibility" onclick="testVisibility()"/>
</body>
</html>以上就是本文的全部內容，希望對大家的學習有所幫助，更多相關內容請關注PHP中文網！
相關建議：
##
以上是如何實現CSS控制DIV層顯示與隱藏的詳細內容。更多資訊請關注PHP中文網其他相關文章！
