【前端基础】11、CSS的属性特性（继承、层叠、元素类型、隐藏元素的四种方式）

一、CSS属性的继承

CSS某些属性有继承性：

• 如果一个属性具备继承性，元素A设置之后，这个元素A的后代元素都可以继承这个属性。
• 元素A的后代元素如果设置相同的属性，则优先使用自身设置的内容（不管继承过来的属性权重有多高。）

1.1、CSS有那些属性可以继承？

有继承性的属性

另外，从浏览器的F12中看到， 有inherited from说明的就是说：属性继承于哪个元素。

1.2、对于有数值的继承，继承过来的是计算值。

1.3、强制继承

如果强行让内部元素继承一个没有继承性的属性。就是用以下方法：

二、CSS属性的层叠

• 同一个元素，相同的属性可以通过不同的选择器进行多次设置。
• 这时候属性就会被一层层覆盖上去。
• 但是最终只会有一个属性生效。
  
  结果只有一个生效：
  

2.1、多个属性覆盖，到底哪个会生效？

1. 选择器权重，权重大的生效，根据权重判断出优先级。
   
   
   

2. 先后顺序。权重相同，后设置的生效。

三、HTML元素的类型（行内级、块级）

为了区分那些元素需要独占一行，哪些元素不需要独占一行，因此HTML将元素分为两类：

1. 块级元素（block-level elements）：独占父元素一行，（可以自定义宽度和高度。）
2. 行内级元素（inline-level elements）：多个行内级元素可以在父元素的同一行显示。（宽度和高度只能根据内容多少来自动改变。
   →准确说是：行内级非替换元素（不能替换内容的），不能设置宽度和高度，例如span。
   →另外：行内级可替换元素（能替换内容的），能设置宽度和高度，例如img图片

3.1、如何通过CSS修改元素类型？

实际上，元素本身没有块级元素和行内级元素的区分的，之所以有，是因为浏览器给设置的display属性。

• 注意：浏览器看到有 user agent的，都是浏览器给设置的。

所以想修改元素类型，那就是：

利用浏览器的层叠特性，手动设置display属性，从而覆盖掉浏览器设置的display属性。

例子：

可以看到浏览器的display被覆盖掉了。

3.2、display的四个属性

1. 块级元素（block）
   独占父元素一行，（可以自定义宽度和高度。）
2. 行内级元素（inline）
   多个行内级元素可以在父元素的同一行显示。（宽度和高度只能根据内容多少来自动改变。
   →准确说是：行内级非替换元素（不能替换内容的），不能设置宽度和高度，例如span。
   →另外：行内级可替换元素（能替换内容的），能设置宽度和高度，例如img。
3. 行内级元素- 块级元素（inline-block）
   也可以称为：行内的块级元素。
   利用场景：某个元素，既要显示在一行，还能设置高度宽度。
   
   

总结：

四、HTML元素隐藏的四个方法

4.1、display设置为none

• 元素不显示出来。
• 不占位置，也没有任何空间。就不存在一样。

4.2、visibility设置为hidden

• 默认：visible。元素可见
• 设置为hidden：元素不可见，但是会占据这个元素应该占用的空间。

4.3、rgba设置颜色，将a的值设置为0

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

图片就很明显，没有改变透明度。

这就是隐藏的效果：不影响子元素。

4.4、opacity设置透明度，设置为0

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

4.5、rgba和opacity的效果对比