CSS会继承文字类属性与自定义属性 不会继承盒模型和布局类属性

在 CSS 中，某些属性会自动从父元素传递给子元素，这就是“继承”。

即使 <p> 没有直接设置 --primary，它也会沿着 DOM 树向上查找，最终在 :root 找到。

CSS 引擎会自动沿继承链向上查找变量值。

✅ 1. 可继承属性（子元素会自动继承父元素）

主要是 文字、文本、行高、字体、可见性 等和排版相关的属性。

📌 常见可继承属性列表（重要）

分类	可继承属性
字体	font-size, font-family, font-weight, font-style, line-height
文本	color, text-align, text-indent, text-shadow, white-space
可见性	visibility, cursor
列表	list-style, list-style-type, list-style-position
表格	border-collapse
CSS 变量	--custom-property（CSS 变量默认是继承的！！）

---

❌ 2. 不可继承属性（不会从父元素继承）

这些属性不继承，因为每个元素需要自己独立的布局或行为。

包括：

📌 布局类（全部不可继承）

属性	原因
width, height	每个元素需要自己的盒子大小
margin, padding	与外层无关
border	每个盒子自己的边框
display	每个元素自己决定类型
position, top, left, etc	位置独立
flex, grid 系列	容器级别属性不可能继承

---

🔍 3. “部分继承”属性（默认不继承，但可被设为 inherit）

某些属性默认不继承，但你可以强制继承：

 

div { border: 1px solid red; } span { border: inherit; /* 强制继承 */ }

这些属性包括：

• border

• background

• margin

• padding

• transform

• opacity

---

🧠 4. 最简单记忆法（超好用）

会继承（inherited）	不会继承（non-inherited）
字体	宽高
文字颜色	margin / padding
文本相关	border
可见性	background
列表样式	position
CSS 变量	display、flex、grid

一句话：

CSS 会继承“文字类属性”，不会继承“盒模型和布局类属性”。