29、css 哪些属性会继承

目录一、先给面试里的标准回答二、常见会继承的属性1. 字体相关2. 文本相关3. 列表相关4. 可见性/光标相关三、常见不会继承的属性1. 盒模型相关2. 背景相关3. 定位布局相关4. 弹性布局 / 网格布局相关四、最好记的一条规律会继承的不会继承的五、举个简单例子六、面试加分点inherit、initial、unset七、一个适合面试的回答模板八、简洁背诵版九、一句话总结这是前端面试高频基础题。先纠正一个小点不是“CSS 选择器哪些属性会继承”更准确说法是CSS 哪些属性会继承因为“继承”说的是属性不是选择器。一、先给面试里的标准回答CSS 并不是所有属性都会继承。一般来说和文字、字体、排版相关的属性大多数可以继承而和盒模型、布局、尺寸、边框、背景相关的属性通常不会继承。如果面试官继续问你再展开。二、常见会继承的属性可以重点记这一类文本类、字体类、颜色类、列表类、可见性类、光标类。1. 字体相关fontfont-sizefont-weightfont-familyfont-styleline-height2. 文本相关colortext-aligntext-indenttext-transformletter-spacingword-spacingwhite-spacedirectionwriting-mode3. 列表相关list-stylelist-style-typelist-style-positionlist-style-image4. 可见性/光标相关visibilitycursor三、常见不会继承的属性这类也很重要面试经常反问。1. 盒模型相关widthheightmarginpaddingborder2. 背景相关backgroundbackground-colorbackground-image3. 定位布局相关displaypositiontopleftrightbottomfloatclearz-index4. 弹性布局 / 网格布局相关flexjustify-contentalign-itemsgrid-template-columns四、最好记的一条规律你可以这样记会继承的通常是控制文本显示效果的属性比如字体颜色行高对齐方式不会继承的通常是控制盒子外观和布局的属性比如宽高边距边框定位背景五、举个简单例子div classparent span classchildhello/span /div.parent { color: red; font-size: 20px; border: 1px solid #000; }效果child会继承color: redchild会继承font-size: 20pxchild不会继承border: 1px solid #000六、面试加分点inherit、initial、unset如果想答得更好可以补一句inherit强制继承父元素该属性initial使用属性默认初始值unset如果该属性本身可继承就继承否则用初始值例如.child { color: inherit; }表示强制继承父元素颜色。七、一个适合面试的回答模板CSS 中不是所有属性都会继承。一般来说字体、文本、颜色、行高、列表样式、光标、可见性这些和内容展示相关的属性大多会继承而宽高、margin、padding、border、background、display、position这些和布局、盒模型、背景相关的属性通常不会继承。所以可以概括为文字排版类属性大多继承盒模型和布局类属性大多不继承。八、简洁背诵版CSS 里通常文字相关属性会继承比如color、font-size、line-height、text-align布局和盒模型相关属性一般不会继承比如width、height、margin、padding、border、display、position。九、一句话总结记住文本样式大多可继承盒模型和布局样式大多不可继承。