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