css继承属性和不可继承属性

有没有在面试中被问到过css的继承属性和不可继承属性？

今天就来记录一下css哪些属性是可以继承的，哪些属性是不可以继承的。

可继承的属性

• 可继承的属性：
  • 字体系列属性：font、font-family、font-weight、font-size、font-style、font-variant、font-stretch、font-size-adjust。
  • 文本系列属性：text-indent、text-align、line-height、word-spacing、letter-spacing、text-transform、direction、color。
  • 元素可见性：visibility。
  • 表格布局属性：caption-side、border-collapse、border-spacing、empty-cells、table-layout。
  • 列表布局属性：list-style-type、list-style-image、list-style-position、list-style。
  • 生成内容属性：quotes。
  • 光标属性：cursor。
  • 页面样式属性：page、page-break-inside、windows、orphans。

不可继承的属性

• 不可继承的属性：

  • 文本属性：vertical-align、text-decoration、text-shadow、white-space、unicode-bidi。
  • 盒子模型的属性：width、height、margin、margin-top、margin-right、margin-bottom、margin-left、border、border-style、border-top-style、border-right-style、border-bottom-style、border-left-style、border-width、border-top-width、border-right-right、border-bottom-width、border-left-width、border-color、border-top-color、border-right-color、border-bottom-color、border-left-color、border-top、border-right、border-bottom、border-left、padding、padding-top、padding-right、padding-bottom、padding-left。
  • 背景属性：background、background-color、background-image、background-repeat、background-position、background-attachment。
  • 定位属性：float、clear、position、top、right、bottom、left、min-width、min-height、max-width、max-height、overflow、clip、z-index。
  • 生成内容属性：content、counter-reset、counter-increment。
  • 轮廓样式属性：outline-style、outline-width、outline-color、outline。
  • 页面样式属性：size、page-break-before、page-break-after。
  • 声音样式属性：pause-before、pause-after、pause、cue-before、cue-after、cue、play-during。

  这只是一个大致的分类，实际上每个属性的继承性可能会因浏览器和 CSS 版本的不同而有所差异。在实际开发中，最好参考具体的 CSS 规范和文档。

怎样快速区分一个属性是否可以被继承

在css中，有些属性是可继承的，意味着子元素会从父元素继承该属性的值；有些属性是不可继承的，子元素不会继承父元素的该属性值。快速区分一个css属性是否可以被继承的方法如下：

• 有继承性的属性：
  • 字体系列属性：
    • font：组合字体；
    • font-family：规定元素的字体系列；
    • font-weight：设置字体的粗细；
    • font-size：设置字体的尺寸；
    • font-style：定义字体的风格；
    • font-variant：设置小型大写字母的字体显示文本，这意味着所有的小写字母均会被转换为大写，但是所有使用小型大写字体的字母与其余文本相比，其字体尺寸更小；
    • font-stretch：允许你使文字变宽或变窄，所有主流浏览器都不支持；
    • font-size-adjust：为某个元素规定一个 aspect 值，字体的小写字母"x"的高度与"font-size"高度之间的比率被称为一个字体的 aspect 值，这样就可以保持首选字体的 x-height。
  • 文本系列属性：
    • text-indent：文本缩进；
    • text-align：文本水平对齐；
    • text-shadow：设置文本阴影；
    • line-height：行高；
    • word-spacing：增加或减少单词间的空白（即字间隔）；
    • letter-spacing：增加或减少字符间的空白（字符间距）；
    • text-transform：控制文本大小写；
    • direction：规定文本的书写方向；
    • color：文本颜色；
  • 元素可见性：visibility；
  • 表格布局属性：caption-side、border-collapse、empty-cells；
  • 列表属性：list-style-type、list-style-image、list-style-position、list-style；
  • 设置嵌套引用的引号类型：quotes；
  • 光标属性：cursor；
  • 其他属性：speak，page等。
• 无继承性的属性：
  • display；
  • 文本属性：vertical-align、text-decoration；
  • 盒子模型的属性：宽度、高度、内外边距、边框等；
  • 背景属性：背景图片、颜色、位置等；
  • 定位属性：浮动、清除浮动、定位 position 等；
  • 生成内容属性：content、counter-reset、counter-increment；
  • 轮廓样式属性：outline-style、outline-width、outline-color、outline；
  • 页面样式属性：size、page-break-before、page-break-after。

在实际项目中，如何应用CSS的继承和不可继承属性？

在实际项目中，应用CSS的继承和不可继承属性，可以根据具体需求和设计要求来选择合适的属性。以下是一些应用CSS的继承和不可继承属性的示例：

• 继承属性的应用：
  • 字体系列属性：通过设置父元素的字体系列属性，如font-family，子元素会自动继承该字体系列，从而统一整个页面的字体风格。
  • 文本系列属性：通过设置父元素的文本系列属性，如text-align，子元素会自动继承该文本对齐方式，从而实现整个页面的文本对齐。
  • 元素可见性：通过设置父元素的visibility属性，子元素会自动继承该可见性，从而控制元素的显示或隐藏。
• 不可继承属性的应用：
  • 盒子模型属性：通过设置父元素的盒子模型属性，如width、height、padding、margin等，可以定义元素的大小和布局，而子元素不会继承这些属性，从而实现不同元素的独立布局。
  • 背景属性：通过设置父元素的背景属性，如background-color、background-image等，可以定义元素的背景样式，而子元素不会继承这些属性，从而实现不同元素的背景样式。
  • 定位属性：通过设置父元素的定位属性，如position、float等，可以定义元素的定位方式，而子元素不会继承这些属性，从而实现不同元素的定位。

在实际应用中，需要根据具体情况选择合适的属性来实现所需的效果。同时，为了保持代码的简洁和可维护性，建议尽量减少不必要的继承和重复设置。