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>
以上就是本文的全部內容，希望對大家的學習有所協助，更多相關內容請關注topic.alibabacloud.com！
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
