在 CSS 中,哪些属性可以被继承,哪些属性不能被继承?请分别举例说明。
考察说明
考查对 CSS 属性继承机制的理解和记忆。
回答思路
- 【回答框架 1】CSS 属性继承是指当父元素设置某属性后,子元素会自动获得该属性值。可继承属性主要分为几类:文本相关属性如 color、font-family、font-size、font-style、font-weight、line-height、text-align、text-indent、visibility 等;列表相关属性如 list-style;表格相关属性如 border-collapse;其他如 cursor、quotes 等。
- 【回答框架 2】不可继承属性包括盒模型相关属性如 width、height、margin、padding、border、box-sizing;定位相关属性如 position、top、right、bottom、left、z-index;背景相关属性如 background、background-color、background-image;显示相关属性如 display、overflow、float、clear;以及 flex 和 grid 布局相关属性等。
- 【回答框架 3】继承机制的核心是当属性可继承时,子元素若未显式设置,则使用父元素的计算值;若不可继承,则使用初始值。但可以通过设置 inherit 关键字强制继承,或设置 initial 恢复初始值。
- 【回答框架 4】实际开发中,常利用继承设置全局字体和颜色,但需注意不可继承属性不会自动传递,需显式设置。
- 【关键点 1】可继承属性主要包括文本、列表、表格等类别,如 color、font-size、line-height。
- 【关键点 2】不可继承属性主要包括盒模型、定位、背景、显示等类别,如 width、margin、position。
- 【关键点 3】继承机制基于计算值,可通过 inherit 和 initial 关键字控制。