子元素会继承父元素的可继承属性（如color、font-family），但不可继承属性（如border、margin）默认不继承，可通过inherit关键字强制继承，或用initial、unset重置属性值。
CSS继承机制，简单来说，就是子元素会默认“借用”父元素的一些样式属性，除非自己明确声明了不同的样式。这大大简化了样式管理，避免了重复定义，但并非所有属性都参与继承，理解哪些属性会继承，哪些不会，以及如何控制它，是前端开发的关键。
深入探讨CSS继承，我们会发现它远不止“子承父业”那么简单。它是一种节省代码、提高维护性的核心机制。想象一下，你设定了
body的字体颜色为黑色，那么页面上所有没有单独设置颜色的文本都会自动变成黑色，这就是继承在起作用。它遵循一个从上到下，从祖先到后代的规则链。
但这里有个误区，不是所有属性都继承。比如，
border属性就不会继承。如果父元素有边框，子元素不会自动拥有。这背后的逻辑很直观：如果边框也继承，那每个嵌套元素都会有边框，页面会变得非常混乱。所以，CSS规范将属性分为了“可继承属性”（inherited properties）和“不可继承属性”（non-inherited properties）。
可继承属性通常是那些与文本相关的，比如
color,
font-family,
font-size,
text-align,
line-height等等。这些属性的继承能让文本样式保持一致性，这在设计上是极其合理的。而不可继承属性，比如
margin,
padding,
border,
background,
width,
height等，它们更多是关于元素盒模型的布局和外观，如果它们继承，反而会带来意想不到的布局问题。
立即学习“前端免费学习笔记（深入）”；
当一个元素的某个属性没有被明确设置时，浏览器会向上查找其父元素，看父元素是否有这个属性。如果父元素也没有，就继续向上查找祖父元素，直到根元素
html。如果到
html元素都没有，那么就使用该属性的初始值（initial value）。这个查找过程就是继承链。
我们也可以通过
inherit关键字强制一个不可继承属性继承父元素的值，或者让一个可继承属性显式地继承父元素的值。例如，你可能想让一个子元素的
border和父元素完全一样，这时就可以使用
border: inherit;。反过来，
initial关键字可以将任何属性重置为其默认的初始值，而
unset则会根据属性是否可继承来决定是使用
inherit还是
initial。
/* 示例：继承的实际应用 */
body {
font-family: Arial, sans-serif;
color: #333;
line-height: 1.6;
}
.container {
/* color属性会从body继承 */
padding: 20px; /* padding不可继承 */
border: 1px solid #ccc; /* border不可继承 */
}
.text-block {
/* font-family, color, line-height都会从body继承 */
text-align: center; /* 这个属性会覆盖继承的text-align，如果body有设置的话 */
}
.special-border {
border: inherit; /* 强制继承父元素的border */
margin-top: initial; /* 将margin-top重置为初始值0 */
}理解这些，对于调试CSS问题，尤其是那些“为什么我的样式没生效？”的场景，至关重要。很多时候，不是样式没生效，而是继承规则导致了意想不到的结果。
哪些CSS属性会继承，哪些不会？（CSS属性继承的分类与常见误区解析）
这是一个非常实际且常见的疑问。搞清楚哪些属性会继承，哪些不会，是避免许多CSS陷阱的关键。
可继承属性（Inherited Properties） 这些属性通常与文本排版和视觉表现有关，它们的设计理念是让内容在默认情况下保持一致性。常见的可继承属性包括：
-
字体相关：
font-family
,font-size
,font-style
,font-weight
,font-variant
,font-stretch
,font
(简写属性) -
文本相关：
color
,text-align
,text-decoration-color
,text-indent
,text-transform
,line-height
,letter-spacing
,word-spacing
,white-space
,direction
,unicode-bidi
,vertical-align
(在表格单元格中) -
列表相关：
list-style-type
,list-style-position
,list-style-image
,list-style
(简写属性) -
表格相关：
border-collapse
,border-spacing
,caption-side
,empty-cells
-
其他：
visibility
,cursor
,quotes
举个例子，如果你在
body上设置了
font-size: 16px;，那么所有子元素中的文本，如果没有明确指定
font-size，都会是16px。这很方便，对吧？
不可继承属性（Non-inherited Properties） 这些属性通常涉及元素的盒模型、定位、背景、边框等，它们的默认行为是不继承，因为继承这些属性会导致布局混乱或视觉效果不符合预期。常见的不可继承属性包括：
-
盒模型相关：
margin
,padding
,border
,width
,height
,min-width
,max-width
,min-height
,max-height
-
背景相关：
background-color
,background-image
,background-position
,background-repeat
,background-size
,background-attachment
,background
(简写属性) -
定位相关：
position
,top
,right
,bottom
,left
,z-index
-
布局相关：
display
,float
,clear
,overflow
-
视觉效果相关：
opacity
,box-shadow
,text-shadow
,transform
,transition
,animation
-
其他：
outline
,clip
常见误区解析： 最大的误区就是认为“所有属性都继承”。当一个子元素没有显示定义
margin或
padding时，它并不会从父元素那里获得这些值。这常常导致开发者疑惑为什么元素没有按照预期保持间距，这时就需要手动为子元素设置这些属性。
另一个微妙的点是
vertical-align。它只在
inline或
table-cell元素上有效，并且在表格单元格中可以继承。但在其他块级元素或行内块元素中，它并不会像
text-align那样直接影响子元素的位置。
理解这些分类，能帮助我们更好地预测CSS的行为，减少不必要的调试时间。在写样式时，如果某个属性没有生效，首先要思考它是不是可继承属性，以及父元素是否有设置。
如何强制继承或阻止继承？（inherit
、initial
、unset
和revert
关键字的应用）
尽管CSS有其固定的继承规则，但我们并非完全被动。CSS提供了一些强大的关键字，让我们能够灵活地控制继承行为，甚至重置属性值。
inherit
关键字：强制继承
这是最直接的控制方式。当你想让一个不可继承属性表现出继承行为，或者想让一个可继承属性显式地继承父元素的值时，就可以使用
inherit。 例如，你可能有一个按钮，希望它的
border颜色和父容器的
color（文本颜色，可继承）保持一致，但
border本身是不可继承的。这时就可以这样写：
.parent {
color: blue; /* 这个color会继承给子元素文本 */
border: 1px solid green; /* 这个border不会继承 */
} 
