前端面试笔记（CSS篇）——CSS的哪些样式可以继承？ CSS面试题1：CSS的哪些样式可以继承？本文主要介绍CSS中

可以这么说，在css中，所有跟文字相关的都是可以继承的

接下来我们通过代码来演示一下代码如下

<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>css前端面试01</title>
</head>
<style>
  body{
    font-size: 20px;
    color: blueviolet;
    font-style: italic;
    font-weight: bold;
    text-indent: 2em;
    text-align: center;
    word-spacing: 5px;
    letter-spacing: 10px;
    line-height: 200px;
  }
</style>
<body>
  <div>
    <p>
      <span>身处井隅，心向璀璨</span>
    </p>
  </div>
</body>
</html>

结果如下

可以看到，只需要给body加上对应的样式，span中的内容就能继承这些样式

关于可继承的CSS样式这个问题中还有一个比较大的坑，就是line-height这一属性。可以从代码上看到，当我们给line-height设置具体的像素值时，并不会出现什么问题，但如果我把line-height设成具体的倍数，再单独给span标签设置一下font-size，像下面这样

<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>css前端面试01</title>
</head>
<style>
  body{
    font-size: 20px;
    color: blueviolet;
    font-style: italic;
    font-weight: bold;
    text-indent: 2em;
    text-align: center;
    word-spacing: 5px;
    letter-spacing: 10px;
    line-height: 1.5;
  }
  span{
    font-size:14px;
  }
</style>
<body>
  <div>
    <p>
      <span>身处井隅，心向璀璨</span>
    </p>
  </div>
</body>
</html>

那此时line-height是根据父级的1.5倍去计算还是以自己的呢？我们打开调试工具看一下

可以看到当前sapn的line-height是21px，是根据span的font-size（14px）*1.5得到的

另外，如果我设置line-height为200%时，此时又是根据父级还是自己的去计算的呢？

可以看到此时span的line-height是40px，很明显是根据body的font-size（20px）*200%得到的

总结

line-height：200px 直接继承
line-height: 1.5 根据自己的宇体大小计算
line-helght:200% 根据父级的字体大小计算

注：本笔记初心为帮助自己更好的学习前端，目的在于自学，请多多包涵！