CSS中元素隱藏的幾種方式
阿新 • • 發佈：2019-01-30
說一說CSS中關於元素隱藏的幾個小例子
1、overflow:hidden將超出部分隱藏
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> .one { width: 300px; height: 150px; background: pink; } </style> </head> <body> <div class="one"> 第一最好不相見，如此便可不相戀。 第二最好不相知，如此便可不相思。 第三最好不相伴，如此便可不相欠。 第四最好不相惜，如此便可不相憶。 第五最好不相愛，如此便可不相棄。 第六最好不相對，如此便可不相會。 第七最好不相誤，如此便可不相負。 第八最好不相許，如此便可不相續。 第九最好不相依，如此便可不相偎。 第十最好不相遇，如此便可不相聚。 但曾相見便相知，相見何如不見時。 安得與君相訣絕，免教生死作相思。 </div> </body> </html>
我們可以看到內容超出了div的區域
給one類中新增overflow:hidden後超出的部分就被隱藏了
.one {
width: 300px;
height: 150px;
background: pink;
overflow: hidden;
}
2 display:none 隱藏元素 不佔位置
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> .one { width: 100px; height: 100px; background: red; display: none; } .two { width: 100px; height: 100px; background: blue; } </style> </head> <body> <div class="one">1</div> <div class="two">2</div> </body> </html>
第一個盒子被隱藏起來了，而且下面的盒子跑到第一個盒子的位置，所以不佔據位置
3 visibility:hidden隱藏元素，佔位置
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> .one { width: 100px; height: 100px; background: red; visibility: hidden; } .two { width: 100px; height: 100px; background: blue; } </style> </head> <body> <div class="one">1</div> <div class="two">2</div> </body> </html>
第一個盒子雖然隱藏了，但是下面的盒子不會跑到第一個盒子的位置，說明第一個盒子還佔據著原來的位置。
