开发者学堂课程【前端开发CSS基础：CSS visibility 与 overflow 属性 】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/361/detail/4267
CSS visibility 与 overflow 属性
内容介绍：
一、visibility
二、overflow
一、visibility
（1）简介
1、设置是否显示对象。与 display：none；不同，此属性为隐藏的对象保留其占据的物理空间.
2、如果希望对象为可视，其父对象也必须是可视的。
3、属性值：
thisible：设置对象可视
hidden：设置对象隐藏
（2）演示实例
代码1：
<!DOCTYPE html>
<html lang=″en″>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.content{
width:100px;
height:100px;
background -color: aquamarine ;
}
</style>
</head>
<body>
<div class="content">大家好</div>
</body>
</html>
运行结果为：
代码2：
<!DOCTYPE html>
<html lang=″en″>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.content{
width:100px;
height:100px;
background -color: aquamarine ;
visibility：hidden；
}
</style>
</head>
<body>
<div class="content">大家好</div>
</body>
</html>
运行结果为：
此时结果为空。
看不见此时的 div，在刷新的页面中选择审查元素可以看到这个 div 是在的，为他保留的空间 100*100 的位置
代码3为其添加一个父级元素
<!DOCTYPE html>
<html lang=″en″>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.content{
width:100px;
height:100px;
background -color: aquamarine ;
visibility:visible；
}
.container{
width:200px;
height:200px;
background -color:burlywood;
visibility:hidden；
}
</style>
</head>
<body>
<div class="container">
<div class="content">大家好</div>
</div>
</body>
</html>
运行结果为：
此时他能可视的原因是因为设置了 visible ，让其具有可视性，但如果将 visibility:visible ；这行代码注释掉，这时候就不能显示了，但是他所占的大小还在.
二、overflow
（1）简介
1、复合属性。设置对象处理溢出内容的方式。效果等同于 overflow-x+overflow-y-
2、如果希望对象为可视，其父对象也必须是可视的。
3、属性值：
visible：对溢出内容不做处理，内容可能会超出容器。(默认)
hidden：隐藏溢出容器的内容且不出现滚动条。
scroll：隐藏溢出容器的内容，溢出的内容将以卷动滚动条的方式呈现。
auto：当内容没有溢出容器时不出现滚动条，当内容溢出容器时出现滚动条，按需出现滚动条。此为 body 对象和 textarea 的默认值。
（2）演示实例
创建新的 HTML 文件，并以 overflow 命名
代码1 -visible：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<tite></title>I
<style>
.content{
width:200px;
height:100ρχ;
background -color: antiquewhite ;
}
</style>
</head>
<body>
<div class="content">大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好
</div>
</body>
</htmL>
运行结果：
可以看出内容溢出了容器，并且visible情况下对内容不做处理
代码2- hidden：
<!DOCTYPE html>
<html lang="en">
<head>
meta charset="UTF-8">
<title></title>
<style>
.content{
width:200px;
height:100px;
background -color: antiquewhite ;
overflow：hidden
}
</style>
</head>
<body>
<div class="content">大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好
</div>
</body>
</htmL>
运行结果：
此时可以看到超出的部分被隐藏了。
代码3- scroll：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.content{
width:2θθpx;
height:1θθρχ;
background -color: antiquewhite ;
overflow：scroll
}
</style>
</head>
<body>
div class="content">大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好大家好
</div>
</body>
</htmL>
运行结果：
可以观察到溢出的内容将以卷动滚动条的方式呈现。
auto：当内容没有溢出容器时不出现滚动条，当内容溢出容器时出现滚动条，按需出现滚动条。此为 body 对象和 textarea 的默认值。
代码4- auto：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.content{
width:200px;
height:100ρχ;
background -color: antiquewhite ;
overflow：auto
}
</style>
</head>
<body>
<div class="content">大家好
</div>
</body>
</htmL>
运行结果：
代码5- auto：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.content{
width:200px;
height:100ρχ;
background -color: antiquewhite ;
overflow-x：auto
}
</style>
</head>
<body>
<div class="content">
大家好 大家好 大家好 大家好 大家好 大家好 大家好 大家好 大家好
</div>
</body>
</htmL>
运行结果：此时是对横向进行设置
代码6- auto：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.content{
width:200px;
height:100ρχ;
background -color: antiquewhite ;
overflow-y：hidden
}
</style>
</head>
<body>
<div class="content">
大家好 大家好 大家好 大家好 大家好 大家好 大家好 大家好 大家好 大家好 大家好 大家好 大家好 大家好 大家好 大家好 大家好 大家好 大家好 大家好 大家好 大家好 大家好 大家好 大家好 大家好 大家好
</div>
</body>
</htmL>
运行结果：此时是对竖向进行隐藏设置
