CSS特性与不生效调试技巧

CSS特性

CSS是一门非常特殊的语言，包含很多非常难以理解的特性，本文详细结构了一下CSS拥有的特性。

1.继承性

不仅JS中有继承性，CSS中也有继承性。
不同的CSS属性的继承性也不同，如color有继承性，但border没有继承性，具体是否可继承查阅MDN文档。https://developer.mozilla.org/zh-CN/docs/Web/CSS
特殊的是，也可以进行强制继承，border:inherit，就继承了边框属性

2.层叠性

对同一个元素通过不同的选择选择器进行多次设置时，只有一个会最终生效。
具体生效的是哪一个会根据权重计算
10000 -> 1000-> 100 ->10 -> 1 -> 0

• !important > 内联 > id > class > 元素 > 通配 *
• 相同的权重，后面的覆盖前面的
  多个选择器可以叠加，2个class+2个id = 220

3.HTML类型

为了区分哪些元素需要独占一行，哪些元素不需要独占一行，HTML将元素区分为了两类，但本质是通过CSS实现。
块级block元素：独占父元素的一行
行内inline元素；多个行内元素可以在父元素的同一行显示
事实上的元素没有本质区别
div之所以是块级元素，只是因为div设置了display属性display:block;

div{
	display:inline;
}
span{
	display:block;
}

这样div和span就互换了身份

4.display

• block 独占一行，可以设置宽高
• inline 一般不可设置宽高，宽高由内容决定；若为特殊的行内可替换元素img 则可以设置宽高；行内元素设置margin无效。
• inline-block 既可以在同一行显示，又可设置宽高，默认宽高由内容决定。当两个块变为行内块，会有一个换行符空格，产生间距，可以设置font-size:0;去除。
• none 元素隐藏 vue中的v-show指令为false时就使用了这个属性

5.元素隐藏

//隐藏且不占据空间
display:none;
//隐藏但占据空间
visiblity:hiddle;
//透明度设置为0
color:rgba(255,0,0,0) 
//携带所有的子元素，背景和前景一起变透明
opacity:0   

CSS不生效调试技巧

1、选择器优先级太低
2、选择器没有选中对应的元素
3、CSS属性使用形式不对

• 元素不支持该属性，如span设置width和height无效
• 浏览器不支持该属性
• 被同类型属性覆盖 如font覆盖font-size

4.充分利用浏览器开发者工具