1. 元素的顯示與隱藏

• 目的

  讓一個元素在頁面中消失或者顯示出來

• 場景

  類似網(wǎng)站廣告，當(dāng)我們點(diǎn)擊關(guān)閉就不見了，但是我們重新刷新頁面，會重新出現(xiàn)！

1.1 display 顯示（重點(diǎn)）

• display 設(shè)置或檢索對象是否及如何顯示。

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

• 特點(diǎn)： 隱藏之后，不再保留位置。

實(shí)際開發(fā)場景：

配合后面js做特效，比如下拉菜單，原先沒有，鼠標(biāo)經(jīng)過，顯示下拉菜單， 應(yīng)用極為廣泛

1.2 visibility 可見性 (了解)

• 設(shè)置或檢索是否顯示對象。

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

• 特點(diǎn)： 隱藏之后，繼續(xù)保留原有位置。（停職留薪）

1.3 overflow 溢出(重點(diǎn))

• 檢索或設(shè)置當(dāng)對象的內(nèi)容超過其指定高度及寬度時如何管理內(nèi)容。

屬性值描述

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

實(shí)際開發(fā)場景：

清除浮動

隱藏超出內(nèi)容，隱藏掉, 不允許內(nèi)容超過父盒子。

1.4 顯示與隱藏總結(jié)

屬性區(qū)別用途

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

總結(jié)

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

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