前端 CSS的继承性

css有两大特性：继承性和层叠性

继承性

继承：给父级设置一些属性，子级继承了父级的该属性，这就是我们的css中的继承。

记住：有一些属性是可以继承下来： color 、 font-*、 text-*、line-* 。主要是文本级的标签元素。

但是像一些盒子元素属性，定位的元素（浮动，绝对定位，固定定位）不能继承

有一些属性不能被继承，如：border,margin,padding,background等。

<!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">
    <title>Title</title>
    <style type="text/css">
        .father{
            color: red;
        }
    </style>
</head>
<body>
    <!--
       继承：给父级设置一些属性，子级继承了父级的该属性，这就是我们的css中的继承。
       记住：有一些属性是可以继承下来 ： color 、 font-*、 text-*、line-* 。主要是文本级的标签元素。
        
       但是像一些盒子元素属性，定位的元素（浮动，绝对定位，固定定位）不能继承。
    -->
    <div class="father" id="user">
        <p>mike</p>
    </div>
</body>
</html>

inherited from 继承

前端 CSS的继承性

继承性

相关文章