(自用面试题)CSS有哪些属性不可以被继承,有哪些属性可以被继承?

137 阅读1分钟

不可继承的属性

  • 布局定位属性:display、position、float、clear、overflow
  • 自身属性:width、height、margin、padding、border、background
  • 文本属性:text-decoration、vertical-align、white-space
  • 其他属性(CSS3):content、text-shadow

可继承的属性

  • 布局定位属性:visibility
  • 文本属性:color、font、text-align(文本水平对齐)、text-indent(文本缩进)、line-height(行高)、word-spacing(单词之间的间距)、letter-spacing(中文或者字母之间的间距)
  • 其他属性(CSS3):cursor

面试技巧:
此时还没回答完全,要把line-height详细说说。

line-height的继承

  • line-height: 200px;
    直接继承。
  • line-height: 1.5;
    根据自己的字体大小去计算。
  • line-height: 200%;
    根据父级的字体大小去计算。

eg:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<style>
    body {
        color: red;
        font-size: 20px;
        
        /* 21px */
        /* line-height: 1.5; */

        /* 40px */
        /* line-height: 200%; */
    }

    span {
        font-size: 14px;
    }
</style>

<body>
    <div>
        <p>
            <span>我们进行一个测试</span>
        </p>
    </div>
</body>
</html>