元素隐藏方法
方法一: 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
- 建议:充分利用浏览器的开发者工具进行调试(增加、修改样式)、查错。