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. 保證盒子里面的內容不會超出該盒子范圍

總結

以上是生活随笔為你收集整理的四、pink老师的学习笔记——元素的显示与隐藏的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。