學習筆記，僅供參考，有錯必糾

參考自：pink老師學習筆記

---

文章目錄

• • 元素的隱藏與顯示
  • • display顯示
    • visibility可見性
    • overflow溢出
    • 顯示與隱藏總結(jié)

---

元素的隱藏與顯示

display顯示

語法：

display: none /*隱藏對象*/ display：block /*除了轉(zhuǎn)換為塊級元素之外，同時還有顯示元素的意思。*/

display可以設(shè)置或檢索是否顯示對象，display設(shè)置元素隱藏之后，將不再保留位置：

實際開發(fā)場景：配合js做特效，比如下拉菜單。

visibility可見性

語法：

visibility：visible ; 　/*對象可視*/ visibility：hidden; 　 /*對象隱藏*/

visibility可以設(shè)置或檢索是否顯示對象，display設(shè)置元素隱藏之后，繼續(xù)保留原有位置：

overflow溢出

檢索或設(shè)置當對象的內(nèi)容超過其指定高度及寬度時，應(yīng)該如何管理內(nèi)容：

屬性值描述

visible	不剪切內(nèi)容也不添加滾動條
hidden	不顯示超過對象尺寸的內(nèi)容，超出的部分隱藏掉
scroll	不管超出內(nèi)容否，總是顯示滾動條
auto	超出自動顯示滾動條，不超出不顯示滾動條

實際開發(fā)場景：清除浮動；隱藏超出內(nèi)容，不允許內(nèi)容超過父盒子。

顯示與隱藏總結(jié)

屬性區(qū)別用途

display	隱藏對象，不保留位置	配合后面js做特效，比如下拉菜單，原先沒有，鼠標經(jīng)過，顯示下拉菜單， 應(yīng)用極為廣泛
visibility	隱藏對象，保留位置	使用較少
overflow	只是隱藏超出大小的部分	1. 可以清除浮動 2. 保證盒子里面的內(nèi)容不會超出該盒子范圍

總結(jié)

以上是生活随笔為你收集整理的CSS基础(part15)--元素的隐藏与显示的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。