HTML+CSS扩展内容：div盒子隐藏常用的属性display和visibility的区别

知识点：盒子的隐藏属性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属性在控制元素隐藏时的效果。

	
盒子1
    
盒子2
	
盒子3
    
盒子4

结果演示：

 

第二步：验证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）

 

 

 

=======================这里是结束分割线=========================