关注互联网应用及运维技术的个人博客

如何在css中让一个元素在页面中隐藏或显示出来

display 属性

display 属性用于设置一个元素应如何显示

  • display: none;隐藏对象
  • display: block;除了转换为块级元素之外,同时还有显示元素的意思,inline-block 同理

display 隐藏元素以后,不再占有原来的位置


visibility 属性

visibility 属性用于指定一个元素应可见还是隐藏

  • visibility: visble;元素可见
  • visibility: hidden;元素隐藏

visibility 隐藏元素后,继续占有原来的位置

如果隐藏元素想要原来的位置,就用 visibility: hidden

如果隐藏元素不想要原来的位置,就用 display: none


overflow 溢出

overflow 属性指定了如果内容溢出一个元素的框(超过其指定高度计及宽度)时,会发生什么

  • overflow: visible;不剪切内容也不添加滚动条(内容超出盒子大小)
  • overflow: hidden;不显示超过盒子尺寸的内容,超出的部分隐藏起来
  • overflow: auto;超出自动显示滚动条,不超出不显示滚动条
  • overflow: scroll;不管是否超出内容,一直显示滚动条

一般情况下,我们都不想让溢出的内容显示出来,因为溢出的部分会影响页面布局

  • 但是如果是有定位的盒子,请慎用 overflow: hidden
  • 很多时候为了视觉效果,会故意让某个元素超出盒子一部分大小(例如边角上的小标签),如果使用 overflow: hidden 则超出的部分会被剪掉
赞(0)
未经允许不得转载:飞天狒狒 » 如何在css中让一个元素在页面中隐藏或显示出来

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址