版权声明：王迪 https://blog.csdn.net/dnruanjian/article/details/87513733
知识点：盒子的隐藏属性display和visibility
1、display属性和visibility属性的相同点：
display和visibility都是CSS属性，都可以控制盒子的显示和隐藏。
2、display属性和visibility属性的不同点：
（1）属性取值不一样：
- display属性的取值有：block和none。其中block取值控制元素以块状形式显示，none取值控制元素不显示，即隐藏。
- visibility属性的取值有：visible和hidden。其中visible取值控制元素正常显示，hidden取值控制元素不显示，即隐藏。
（2）控制元素隐藏时，原理不一样：
- display控制盒子隐藏时，盒子不占原位置，下方的盒子自动往上移动。
- visibility控制盒子隐藏时，盒子原位置保留，只不过内容隐藏了，其余地方都是不动位置的。
3、display属性和visibility属性隐藏效果验证
第一步：在一个div盒子里有4个小盒子，分别设置宽高属性，并控制4个小盒子同时向左浮动，形成初始效果，用来验证display属性和visibility属性在控制元素隐藏时的效果。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
.box { /*设置外部盒子的宽高，以及边框样式和内填充*/
width:210px;
height:210px;
border:1px solid black;
padding:10px;
}
.box1,.box2,.box3,.box4 { /*同时设置4个小盒子的宽高和边框样式，以及浮动属性*/
width:100px;
height:100px;
border:1px dashed red;
float:left; /*设置向左浮动*/
}
</style>
</head>
<body>
<div class="box">
<div class="box1">盒子1</div>
<div class="box2">盒子2</div>
<div class="box3">盒子3</div>
<div class="box4">盒子4</div>
</div>
</body>
</html>
结果演示：
第二步：验证display属性取值为none的效果。
方法：给盒子1添加display属性
.box1 {
display:none;/*设置盒子1的显示属性为none，此时盒子1不再显示，同时盒子1的位置也被解除*/
}结果演示：
第三步：验证visibility属性为hidden的效果。
方法：给盒子1添加visibility属性。
.box1 {
visibility:hidden/*设置盒子1的显示属性为hidden，此时盒子1不显示，但是盒子1的位置被保留*/
}结果演示：
4、display属性和visibility属性到底用哪一个？
- display属性由于更符合我们对于显示隐藏的理解，在显示上也更符合我们的审美，因此比较常用。在自定义的轮播，大块数据的交叉使用，循环播放图片等的时候，原生的css和js就可以实现的时候，大多采用了display属性。
- 在一些特定的场合下，visibility可能更符合设计的审美，例如一个位置排版好了的行内块内元素，所占位置不大，整体前移影响美观的时候，或者一些小网站的登录页面错误提醒的时候，会使用visibility属性。
思考：当我们制作下拉菜单的时候，display属性和visibility属性，我们使用哪一个？
参考文章：HTML+CSS项目实践二：单纯利用CSS制作导航栏下拉菜单效果（不使用JS）
=======================这里是结束分割线=========================