前端 CSS的继承性

最新推荐文章于 2025-09-10 11:07:46 发布

转载最新推荐文章于 2025-09-10 11:07:46 发布 · 148 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/mingerlcm/p/10803192.html

文章标签：

#前端 #ViewUI

博客介绍了CSS的两大特性之一——继承性。继承是指父级设置的一些属性可被子级继承，如color、font-*等文本级标签元素属性；而盒子元素属性、定位元素属性以及border、margin等属性不能被继承。

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>