元素的顯示與隱藏

元素的顯示與隱藏

1. 本質：讓一個元素在頁面中隱藏或顯示出來

2. display：顯示隱藏

   • 用於設置一個元素應如何顯示
   • display：none；隱藏對象
   • display：block；隱藏對象
   • 【註意】
     • display隱藏元素後，不在占有原來的位置

3. visibility：顯示隱藏

   • visibility：visible；元素可視
   • visibility：hidden：元素隱藏
   • 【註意】
     • visibility隱藏元素後，繼續占有原來的位置

4. overflow：溢出顯示隱藏

   • overflow屬性制定瞭如果內容溢出一個元素的框（超過其指定高度及寬度）時，會發生什麼

   • visible

   • hidden

   • scroll：溢出的部分顯示滾動條

     • 屬性值	描述
       visible	不剪切內容也不添加滾動條
       hidden	不顯示超過對象尺寸的內容，超過的部分隱藏掉
       scroll	不管超過內容否，總是顯示滾動條
       auto	超出自動顯示滾動條，不超出不顯示滾動條

     • 一般情況下，我們都不想讓溢出的內容顯示出來，因為溢出的部分影響佈局

     • 但是如果有定位的盒子，請慎用overflow：hidden；因為他會隱藏多餘的部分