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不管超出了没有都是以滚动条的形式显示。