CSS 中哪些属性是可以继承的，你知道吗？
站长
· 阅读数 13
CSS 中的属性继承是我们面试中的一个高频考题。
将会从三个方面来介绍 CSS继承：
- 首先第一个什么是继承。
- 第二个什么是 CSS 继承。
- 最后一个 CSS中哪些属性是可以继承的。
什么是继承
下面通过一个生活中的场景来理解一下什么是继承。在中国家族中，姓氏继承，比如小米家族，他的姓李，他的父亲继承了爷爷的姓也姓李，自然而然他也姓李，所以说在小明的整个家族中，李这个姓氏是从爷爷辈儿，然后到父亲，然后到他，一个一个挨个继承下来的，这样说应该理解吧。
什么是 CSS 继承
接下来看一下什么是 CSS 继承。通过下面这张图简单了解一下 CSS 的继承。
上图这张图是一个 HTML 文档结构图，在这个文档结构中，body 作为我们的根元素，body 元素下边有 p 和 section 两个子元素，p 有 span 和 em 两个子元素，section 同样有span 和 em 两个子元素。把我们的这张结构图转化成代码的形式，就是我们右边这样的玻璃元素作为我们的根节点，
//body 标签
<body>
<!--p 标签-->
<p>
<span>span 标签</span>
<em>em 标签</em>
</p>
<!--section 标签 -->
<section>
<span>span 标签</span>
<em>em 标签</em>
</section>
</body>
给 body 标签设置 CSS 样式。
body{
font-size: 50px;
color:blue;
}
在浏览器中输入地址，结果如下：
按 F12 打开浏览器开发者工具，可以看到如下图。
选中 p 节点，可以看到 p 节点有两个部分的样式，一部分是浏览器引擎给我们默认的一个样式，这部分不是关注内容。主要关注的是 Inherited from body 下的内容，这部分样式是 p 标签，从 body 标签继承过来的一些样式，包括字体大小和字体颜色。同样的 span 和 em 元素也基础 body 元素的样式。
CSS 中哪些属性是可以继承的
前面通过一段代码来简单看了一下关于继承的一个概念。哪些 CSS 这些属性都可以被继承呢？这里总结出了一下常见被继承的 CSS 属性。
- 字体属性：font、font-family、font-size、font-style、font-variant、font-weight
- 字母间距属性：letter-spancing
- 可见性属性：visibility
- 文字展示属性：line-height、text-align、text-indent、text-transform
- 字间距属性：word-spacing
这些属性都是需要我们熟悉并掌握的。