【夯實基礎--CSS】=＞ 元素的顯示和隐藏(display / overflow/ visibility)

元素的顯示與隐藏

• 目的: 讓一個元素在頁面中消失或者顯示出來
• 場景: 類似網站廣告，當我們點選關閉就不見了，但是我們重新重新整理頁面，會重新出現！

1.1 display 顯示（重點）

display設定或檢索對象是否顯示或如何顯示。

• display: none 隐藏對象
  • 特點：

    隐藏之後，不再保留位置。

• display: block 除了轉換為塊級元素之外，同時還有顯示元素的意思。

實際開發場景：配合後面js做特效，比如下拉菜單，原先沒有，滑鼠經過，顯示下拉菜單， 應用極為廣泛

1.2 visibility 可見性

設定或檢索是否顯示對象

visibility：visible ;  對象可視

visibility：hidden;    對象隐藏
           

• 特點：

  隐藏之後，繼續保留原有位置。

1.3 overflow 溢出

檢索或設定當對象的内容超過其指定高度及寬度時如何管理内容。

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

實際開發場景

：

1. 清除浮動
2. 隐藏超出内容，隐藏掉, 不允許内容超過父盒子。

1.4 顯示與隐藏總結

屬性	差別	用途
display	隐藏對象，不保留位置	配合後面js做特效，比如下拉菜單，原先沒有，滑鼠經過，顯示下拉菜單， 應用極為廣泛
visibility	隐藏對象，保留位置	使用較少
overflow	隻是隐藏超出大小的部分	1. 可以清除浮動 2. 保證盒子裡面的内容不會超出該盒子範圍