css的继承属性

什么是继承呢？

• 一个子元素可以从祖先元素继承“可继承属性”的计算值。

• 子类的实例调用某方法show()时，如果子类中不存在，则会调用父类中的show()方法，如果父类中也没有，则调用父类的父类中的show()方法，这样依次查找，直到顶端。

<div class="par1">
   1
   <div class="par2">
       2
       <div class="par3">3</div>
   </div>
</div>

// css
.par1 {
   font-size: 20px;
}
.par2 {
   color: red;
}

并不是所有的CSS属性都是可以继承的，或者说是自动继承

<div class="par1">
      1
   <div class="par2" id="par2">
       2
   </div>
</div>

<style>
.par1 {
   display: inline-block;
   font-size: 20px;
}
.par2 {
   color: red;
}
</style>

<script>
const par2 = document.getElementById('par2');
const style2 = window.getComputedStyle(par2);
console.log(style2.display); // block
</script>

window.getComputedStye() ,这个方法可以获取某个元素“计算后的CSS属性”。

• 为什么par2的display是block，而不是inline-block？
• par2的display的属性值为“block”，但是其父元素par1是"inline-block"。
  形成这种现象的原理是“display为非自动继承的属性值”。

CSS能自动继承的属性

• border-collapse
• border-spacing
• color
• cursor
• direction
• empty-cells
• letter-spacing
• line-height
• list-style(-image | -position | -type)
• overflow-wrap
• pointer-events
• text-indent 缩进
• text-size-adjust
• text-underline-position
• text-shadow
• text-align
• text-align-last
• test-transform
• tab-size
• table-layout
• white-space
• visibility
• zoom