css元素隐藏方法

130 阅读1分钟

元素隐藏方法

方法一: display设置为none

  • 元素不显示出来, 并且也不占据位置, 不占据任何空间(和不存在一样)

方法二: visibility设置为hidden

  • 设置为hidden, 虽然元素不可见, 但是会占据元素应该占据的空间
  • 默认为visible, 元素是可见的

方法三: rgba设置颜色, 将a的值设置为0

  • rgba的a设置的是alpha值, 可以设置透明度, 不影响子元素

方法四: opacity设置透明度, 设置为0

  • 设置整个元素的透明度, 会影响所有的子元素

CSS属性 - overflow

overflow用于控制内容溢出时的行为

  • visible:溢出的内容照样可见
  • hidden:溢出的内容直接裁剪
  • scroll:溢出的内容被裁剪,但可以通过滚动机制查看。会一直显示滚动条区域,滚动条区域占用的空间属于width、height。
  • auto:自动根据内容是否溢出来决定是否提供滚动机制。

CSS样式不生效技巧

为何有时候编写的CSS属性不好使,有可能是因为:

  • 选择器的优先级太低
  • 选择器没选中对应的元素
  • CSS属性的使用形式不对:元素不支持此CSS属性,比如span默认是不支持width和height的;浏览器不支持此CSS属性,比如旧版本的浏览器不支持一些css module3的某些属性;被同类型的CSS属性覆盖,比如font覆盖font-size
  • 建议:充分利用浏览器的开发者工具进行调试(增加、修改样式)、查错。