当前位置：首页 > article >正文

前端知识速记 - CSS篇：可继承属性与不可继承属性

article 2025/2/23 22:37:35

前端知识速记 - 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`	设置元素的阴影效果。且子元素不会继承父元素的阴影样式。