CSS元素的顯示和隱藏
1.display
display : none; //隱藏元素 ，隱藏元素后，不再占據原先的位置
display: block; //顯示隱藏的元素
做一個簡單的代碼測試，有兩個按鈕，點擊開的按鈕，div標簽的dispaly屬性改為 block，顯示出來，點擊關的按鈕，div標簽的dispaly屬性改為 none，隱藏出來
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>Document</title> 7 <style> 8 *{ 9 margin: 0; 10 padding: 0; 11 } 12 body{ 13 background-color: rgba(0, 0, 0, 0.8); 14 } 15 .b1{ 16 width: 150px; 17 height: 30px; 18 margin-top: 100px ; 19 margin-left: 500px; 20 } 21 .b2{ 22 width: 150px; 23 height: 30px; 24 margin-top: 100px ; 25 margin-left: 100px; 26 } 27 div{ 28 /* 隱藏元素 */ 29 display: none; 30 width: 300px; 31 height: 300px; 32 background-color: yellow; 33 border-radius: 50%; 34 margin: 50px auto; 35 } 36 </style> 37 </head> 38 <body> 39 <button class="b1"> 開</button> 40 <button class="b2">關</button> 41 <div></div> 42 43 <script> 44 var btn01 = document.querySelector(".b1"); 45 var btn02 =document.querySelector(".b2") 46 var div01 = document.querySelector("div") 47 48 btn01.addEventListener("click",function(){ 49 div01.style.display = "block"; 50 }) 51 btn02.addEventListener("click",function(){ 52 div01.style.display = "none"; 53 }) 54 </script> 55 </body> 56 </html>
2.visibility屬性
visibility : visible; //元素可視
visibility : hidden; //元素隱藏，元素隱藏后繼續占有原先的位置
元素隱藏前
將第一個div元素隱藏，元素隱藏后，繼續占有其位置
3.溢出屬性 overflow
overflow 屬性指定了 如果內容溢出了元素框（即超過了元素的指定高度和寬度），會發生什么事
（1）overflow : visible; //顯示超出的內容
（2）overflow : hidden; //隱藏超出的部分
（3）overflow : scroll; //超出的部分使用滾動條，即使沒有超出也會有滾動條
（4）overflow:auto; // 如果右超出的部分，則使用滾動條，如果沒有，則不使用