前端知识速记 - CSS篇：可继承属性与不可继承属性
可继承属性
特点：
-
文本相关性：大多数可继承属性与文本样式相关，用于定义文本的外观。比如
color、font-family和font-size等。 -
结构简化：通过继承父元素的样式，可以减少子元素上的样式设置，从而保持样式结构的简洁性。
-
适用于层级嵌套：当我们在一个文档中有多个嵌套的元素时，可继承属性能够有效地为整个树形结构提供一致性。
不可继承属性
特点：
-
布局相关性：大多数不可继承属性与元素的布局、尺寸和外观相关，如
margin、padding等，不同的元素通常有不同的布局需求。 -
元素独立性：这些属性要求子元素根据自身需求独立定义，不会自动延续父元素的样式，这可以避免不必要的样式干扰。
-
特定样式需求：不可继承属性更倾向于特定视图或参数的设置，确保元素在外观和行为上能够具备独特性。
| 继承类型 | 属性名称 | 描述 |
|---|---|---|
| 可继承属性 | color | 设置文本颜色。子元素将继承父元素的文本颜色。 |
font-family | 设置字体族。子元素将使用父元素指定的字体族。如果没有指定，浏览器将使用默认字体。 | |
font-size | 设置字体大小。子元素会继承父元素定义的字体大小，除非在子元素上重新定义。 | |
line-height | 设置行高。强烈推荐使用相对单位，确保子元素行高继承父元素定义的规格。 | |
text-align | 设置文本对齐方式。子元素在没有特定指定时，将继承父元素的对齐属性。 | |
text-indent | 设置文本缩进。子元素继承文本缩进属性。 | |
visibility | 设置元素的可见性。子元素会继承父元素的可见状态。 | |
white-space | 设置空白处理方式。影响子元素如何处理空白字符。 | |
border-collapse | 设置表格是否合并边框。用于表格时，子元素会继承父元素的此属性。 | |
list-style | 设置列表项的样式。子元素列表会继承父元素的样式设置。 | |
| 不可继承属性 | margin | 设置外边距。子元素不会继承父元素的外边距属性。 |
padding | 设置内边距。内边距属性不会被子元素继承。 | |
border | 定义元素边框。子元素不会自动继承父元素的边框样式。 | |
height | 设置元素高度。子元素将独立定义自己的高度，无法继承父元素高度。 | |
width | 设置元素宽度。子元素的宽度须自身定义，不会受父元素控制。 | |
display | 控制元素的显示类型（如block、inline等）。此属性不会被子元素继承。 | |
position | 设定元素的定位方式（如static、relative等）。子元素会根据自身规则定位。 | |
background | 设置背景样式。子元素不会继承父元素的背景属性，且可以独立设置自己的背景。 | |
overflow | 决定元素如何处理溢出内容。此属性不会被子元素继承。 | |
box-shadow | 设置元素的阴影效果。且子元素不会继承父元素的阴影样式。 |
