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

结果演示:HTML+CSS扩展内容:div盒子隐藏常用的属性display和visibility的区别_第1张图片

 

第二步:验证display属性取值为none的效果。

方法:给盒子1添加display属性

.box1 {
	display:none;/*设置盒子1的显示属性为none,此时盒子1不再显示,同时盒子1的位置也被解除*/
	}

结果演示:HTML+CSS扩展内容:div盒子隐藏常用的属性display和visibility的区别_第2张图片

 

第三步:验证visibility属性为hidden的效果。

方法:给盒子1添加visibility属性。

.box1 {
	visibility:hidden/*设置盒子1的显示属性为hidden,此时盒子1不显示,但是盒子1的位置被保留*/
	}

结果演示:HTML+CSS扩展内容:div盒子隐藏常用的属性display和visibility的区别_第3张图片

 

4、display属性和visibility属性到底用哪一个?

  • display属性由于更符合我们对于显示隐藏的理解,在显示上也更符合我们的审美,因此比较常用。在自定义的轮播,大块数据的交叉使用,循环播放图片等的时候,原生的css和js就可以实现的时候,大多采用了display属性。 
  • 在一些特定的场合下,visibility可能更符合设计的审美,例如一个位置排版好了的行内块内元素,所占位置不大,整体前移影响美观的时候,或者一些小网站的登录页面错误提醒的时候,会使用visibility属性。

 

思考:当我们制作下拉菜单的时候,display属性和visibility属性,我们使用哪一个?

HTML+CSS扩展内容:div盒子隐藏常用的属性display和visibility的区别_第4张图片

参考文章:HTML+CSS项目实践二:单纯利用CSS制作导航栏下拉菜单效果(不使用JS)

 

 

 

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

你可能感兴趣的:(HTML+CSS网页设计)