1、display顯示與隱藏
（1）display的屬性值
none：隱藏元素
block：轉換為塊級元素、顯示元素
（2）隱藏
不添加隱藏盒子的屬性
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>test</title> <style type="text/css"> .test1 { background-color: yellow; width: 200px; height: 200px; } .test2{ background-color: red; width: 200px; height: 200px; } </style> </head> <body> <div class="test1"></div> <div class="test2"></div> </body> </html>
添加屬性隱藏第一個黃色的盒子：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>test</title> <style type="text/css"> .test1 { background-color: yellow; width: 200px; height: 200px; display: none; } .test2{ background-color: red; width: 200px; height: 200px; } </style> </head> <body> <div class="test1"></div> <div class="test2"></div> </body> </html>
隱藏元素后，不再占有原來的位置
（3）顯示
將屬性的值改為block即可：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>test</title> <style type="text/css"> .test1 { background-color: yellow; width: 200px; height: 200px; display: block; } .test2{ background-color: red; width: 200px; height: 200px; } </style> </head> <body> <div class="test1"></div> <div class="test2"></div> </body> </html>
2、visibility顯示隱藏
（1）屬性的值
inherit：繼承上一個父對象的可見性
visible：顯示
hidden：隱藏
（2）隱藏
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>test</title> <style type="text/css"> .test1 { background-color: yellow; width: 200px; height: 200px; visibility: hidden; } .test2{ background-color: red; width: 200px; height: 200px; } </style> </head> <body> <div class="test1"></div> <div class="test2"></div> </body> </html>
隱藏元素后繼續占有原來的位置，與hidden最大的區別就是是否保留原來的位置。
3、overflow溢出顯示隱藏
對溢出的內容做一個設定。
（1）先設置一個存在溢出現象的盒子，對溢出的文字不做處理：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>test</title> <style type="text/css"> .test1 { background-color: yellow; width: 200px; height: 200px; } </style> </head> <body> <div class="test1">大道如青天，我獨不得出。 羞逐長安社中兒，赤雞白雉賭梨栗。 彈劍作歌奏苦聲，曳裾王門不稱情。 淮陰市井笑韓信，漢朝公卿忌賈生。 君不見昔時燕家重郭隗，擁篲折節無嫌猜。 劇辛樂毅感恩分，輸肝剖膽效英才。 昭王白骨縈蔓草，誰人更掃黃金台？ 行路難，歸去來！</div> </body> </html>
（2）不顯示，默認是顯示的：
<style type="text/css"> .test1 { background-color: yellow; width: 200px; height: 200px; overflow: hidden; } </style>
多出來的文字是隱藏的。
（3）顯示：
.test1 {
background-color: yellow;
width: 200px;
height: 200px;
overflow:visible;
}
（4）滾動條：
<style type="text/css"> .test1 { background-color: yellow; width: 200px; height: 200px; overflow:scroll; } </style>
以滾動條的形式來查看所有的內容
（5）滾動條auto：
<style type="text/css"> .test1 { background-color: yellow; width: 200px; height: 200px; overflow:auto; } </style>
只有在超出區域的時候顯示滾動條，而scroll不管超出了沒有都是以滾動條的形式顯示。