css中元素的隐藏方法及样式不生效的原因

一、display:none;元素不显示且不占据位置，不占据任何空间（和不存在一样）

二、visibility:hidden;元素不显示，但会占据元素应该占据的空间，默认visibility是可见的。

三、设置透明度：

1. opacity:0;会让元素里面的所有内容都不显示，但是会占据空间；

2. rgba,将最后一位的a（alpha）设置为0，默认不显示，但是鼠标选中会看到字，如果是对背景设置，则对里面内容不生效。

css样式不生效的常见情景：

1. 选择器的优先级太低；

2. 选择器没选中对应的元素；

3. css属性的使用形式不对

元素不支持此css属性，比如span默认不支持width和height;

浏览器不支持此css属性，比如旧版本的浏览器不支持一些css module3的某些属性

被同类型的css属性覆盖，如font覆盖font-size

建议：充分利用浏览器的开发者工具进行调试（增加、修改样式）、查询错误。