元素的显示与隐藏
前言
CCS中有三个显示和隐藏的单词比较常见，分别是display visibility和overflow。
他们的主要目的是让一个元素在页面中消失，但是不在文档源码中删除。最常见的是网站广告。
一、display显示
display设置或者检索对象是否以及如何显示。使用更多！
display: none; 隐藏对象，与它相反的是display: block; 除了转换为块级元素还有显示元素的意思。
特点：隐藏之后不保留位置。
二、visibility可见性
设置或检索是否显示对象。
visible: 对象可见
hidden: 对象隐藏
特点：隐藏之后，保留原有位置。
例一：鼠标经过显示二维码
html
<html>
<head>
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
text-align: center;
line-height: 50px;
}
div:first-child {
display: none;
/*隐藏元素，看不见但是存在代码
但不保留位置*/
display: block;
visibility: hidden;
/*隐藏元素，与display：none最大的区别是它保留位置*/
visibility: visible;
position: relative;
}
div:last-child {
background-color: purple;
}
div img {
position: absolute;
left: 100px;
top: 0;
display: none; /*隐藏二维码*/
}
div:hover img{
display: block; /*显示元素*/
}
</style>
</head>
<body>
<div>扫二维码
<img src="#.png" alt="wu">
</div>
<div></div>
</body>
</html>例二：下拉菜单
html
<html>
<head>
<style>
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
div {
width: 200px;
height: 200px;
background-color: pink;
position: relative;
}
div ul {
position: absolute;
left: 0;
top: 0;
display: none; /*隐藏元素*/
}
div:hover ul{
display: block; /*显示元素*/
margin-top: 20px;
}
</style>
</head>
<body>
<div>here
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
</body>
</html>三、overflow溢出
设置或检索当对象内容超过其指定高度及宽度时如何管理内容。
visible: 不剪切内容也不添加滚动条
auto: 超出自动显示滚动条，不超出不显示
hidden: 不超出显示对象尺寸的内容，溢出隐藏//新闻标题
scroll: 不管超出内容否，一直显示滚动条