1. 元素的顯示與隱藏
-
目的
讓一個元素在頁面中消失或者顯示出來
-
場景
類似網站廣告，當我們點擊關閉就不見了，但是我們重新刷新頁面，會重新出現！
1.1 display 顯示（重點）
-
display 設置或檢索對象是否及如何顯示。
display: none 隱藏對象 display：block 除了轉換爲塊級元素之外，同時還有顯示元素的意思。 -
特點： 隱藏之後，不再保留位置。
實際開發場景：
配合後面js做特效，比如下拉菜單，原先沒有，鼠標經過，顯示下拉菜單， 應用極爲廣泛
1.2 visibility 可見性 (瞭解)
-
設置或檢索是否顯示對象。
visibility：visible ; 對象可視 visibility：hidden; 對象隱藏 -
特點： 隱藏之後，繼續保留原有位置。（停職留薪）
1.3 overflow 溢出(重點)
- 檢索或設置當對象的內容超過其指定高度及寬度時如何管理內容。
| 屬性值 | 描述 |
|---|---|
| visible | 不剪切內容也不添加滾動條 |
| hidden | 不顯示超過對象尺寸的內容，超出的部分隱藏掉 |
| scroll | 不管超出內容否，總是顯示滾動條 |
| auto | 超出自動顯示滾動條，不超出不顯示滾動條 |
實際開發場景：
- 清除浮動
- 隱藏超出內容，隱藏掉, 不允許內容超過父盒子。
1.4 顯示與隱藏總結
| 屬性 | 區別 | 用途 |
|---|---|---|
| display | 隱藏對象，不保留位置 | 配合後面js做特效，比如下拉菜單，原先沒有，鼠標經過，顯示下拉菜單， 應用極爲廣泛 |
| visibility | 隱藏對象，保留位置 | 使用較少 |
| overflow | 只是隱藏超出大小的部分 | 1. 可以清除浮動 2. 保證盒子裏面的內容不會超出該盒子範圍 |
