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个小盒子，分别设置宽高属性࿰