css盒子显示隐藏问题

盒子的显示隐藏常用的属性display和visibility

  • display和visibility的相同点
    1.两者都是控制盒子的显示和隐藏,都是在css的属性定义
  • display和visibility的区别
    1.在value值上面,控制盒子显示的,display的是block,visibility的是visible,控制盒子隐藏,display的是none,visibility的是hidden
    2.在显示效果上,display控制盒子隐藏时,盒子不占位置,下方的盒子自动往上移动,显示的时候整体下方会往下方移动
    3.显示效果上,visibility控制盒子隐藏时,盒子还是占位置,只不过内容隐藏了,其余地方都是不动位置的

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

猜你喜欢

转载自blog.csdn.net/weixin_38242293/article/details/80004094