顯示和隱藏 · web前端

[TOC] # 元素的顯示與隱藏在CSS中有三個顯示和隱藏的單詞比較常見，我們要區分開，他們分別是 `display visibility` 和 overflow。他們的主要目的是讓一個元素在頁面中消失，但是不在文檔源碼中刪除。最常見的是網站廣告，當我們點擊類似關閉不見了，但是我們重新刷新頁面，它們又會出現和你玩躲貓貓！！ ## display 顯示 display 設置或檢索對象是否及如何顯示。 display : none 隱藏對象與它相反的是 display:block 除了轉換為塊級元素之外，同時還有顯示元素的意思。 **特點：隱藏之后，不再保留位置。** ## visibility 可見性設置或檢索是否顯示對象。 visible : 　對象可視 hidden : 　對象隱藏 **特點：隱藏之后，繼續保留原有位置。（停職留薪）** ## overflow 溢出檢索或設置當對象的內容超過其指定高度及寬度時如何管理內容。 * visible : 　不剪切內容也不添加滾動條。 * auto : 　超出自動顯示滾動條，不超出不顯示滾動條 * hidden : 　不顯示超過對象尺寸的內容，超出的部分隱藏掉 * scroll : 　不管超出內容否，總是顯示滾動條 ## 鼠標經過顯示二維嗎 ~~~ <style> div { width: 100px; height: 100px; background-color: pink; text-align: center; line-height: 100px; margin: 100px auto; position: relative; /* 子絕父相 */ } div img { position: absolute; left: 110px; top: 0; display: none; /* 隱藏二維碼 */ } div:hover img { /* 我們鼠標經過div 的時候，里面的那個 img圖片會顯示出來 */ display: block; /* 顯示二維碼 */ } </style> </head> <body> <div> 掃二維碼 <img src="images/erweima.png" alt=""> </div> </body> ~~~