在编写网页样式时，我们经常会发现给父元素设置了某种样式，子元素也跟着发生了变化，这背后就是CSS的继承机制在起作用。CSS确实有继承关系，它是指部分属性会从祖先元素自动传递给后代元素，不需要我们逐个去写。
什么是CSS继承
CSS继承指的是当某些属性应用在某个元素上时，它的后代元素会自动获得同样的属性值。这种机制可以避免重复声明，让样式结构更清晰。需要注意的是，并不是所有CSS属性都会继承，只有被规范定义为可继承的属性才会这样传递。
常见的可继承属性
下面列出一些常用的会被继承的CSS属性：
- color：文本颜色
- font-family：字体类型
- font-size：字体大小
- line-height：行高
- text-align：文本对齐方式
- visibility：可见性
常见的不可继承属性
多数与盒模型、定位相关的属性是不可继承的，例如：
- width、height
- margin、padding、border
- background
- position、top、left
- display
通过代码看继承效果
以下示例展示了父元素设置color和padding时，子元素的表现差异：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<style>
.parent {
color: red; /* 可继承 */
padding: 20px; /* 不可继承 */
font-size: 16px; /* 可继承 */
}
</style>
</head>
<body>
<div class="parent">
父元素文本
<p>子元素段落，颜色继承为红，但无20px内边距</p>
</div>
</body>
</html>使用inherit强制继承
如果某个属性默认不可继承，但你想让子元素继承父元素的值，可以使用关键字inherit。例如：
.child {
padding: inherit; /* 强制继承父元素的padding */
}继承与层叠的关系
CSS继承只是样式来源之一，最终显示的样式由层叠规则决定。如果子元素自身定义了某属性，就会覆盖继承来的值。理解继承有助于我们合理组织选择器，减少不必要的样式冲突。