这是我参与11月更文挑战的第3天，活动详情查看：2021最后一次更文挑战

CSS三大特性🎨

CSS三大特性是前端开发中所必用到的
下面来解释一下三大特性的概念与规则

拉架的层叠性

CSS的全名为层叠样式表，所以可见层叠性的重要性。

1. 特性：层叠性主要用于解决样式冲突, 也就是拉架。

样式冲突:一个元素被多种选择器添加了相同的属性，那么将按最底部的属性值来渲染

2. 原理：这与浏览器的渲染原理有关
   在打开一个网页时，浏览器会先下载文档（也就是我们的document），加载文档的head样式资源
   依次加载dom与样式，所以同权重情况下下面的样式会覆盖上面的样式
3. 案例时间：

<div>层叠</div>
<style>
    div{
      width: 300px;
      height: 150px;
      background-color: red;
      background-color: rgb(43, 159, 226);
      color:pink;
      color:#fff;
    }
    div{
      color:rgb(236, 240, 236);
    }
  </style>

如图所示：div的背景颜色：rgb(43, 159, 226)；字体颜色：color:rgb(236, 240, 236);

功名利禄的权重

因为层叠是对同权重的规则，所以权重的出现会直接打破层叠的规则，即谁的权重大谁就被渲染

1. 概念：CSS权重指的是样式的优先级，有两条或多条样式作用于一个元素，权重高的那条样式对元素起作用，权重相同的，后写的样式会覆盖前面写的样式

2. 规则：

   Name	0，0，0，0
   元素	0，0，0，1
   类/伪类	0，0，1，0
   ID	0，1，0，0
   行内式	1，0，0，0
   !import	无穷大

3. 案例时间：

<p id="txt" class="txt">CSS的权重</p>
<style>
    #txt{
        color: black;
    }
    p .txt{
        color: blue;
    }
</style>

图片所示：段落的颜色最后为黑色，而按层叠来讲颜色应该是蓝色，这就是因为id选择器的权重较大，所以最后渲染为黑色。

子承父业的继承

html标签拥有父子关系，那么在其元素上也有子承父业的规则

1. 概念：子标签会继承父标签的能继承的样式
2. 可继承的属性：字体，文本，元素可见性，等等
3. 不可继承的属性：盒子模型属性，北京属性，定位属性，outline，display
4. 案例时间

    <div class="father">
        父亲
        <p class="son">儿子</p>
    </div>
    <style>
        .father {
            width: 300px;
            height: 200px;
            font-size: 20px;
            font-weight: 700;
            text-align: right;
            background-color: rgb(0, 98, 128);
            color: rgb(241, 243, 239);
            position: relative;
        }

        .son {
            width: 50%;
            height: 90%;
            background-color: rgb(0, 183, 255);
            position: absolute;
            bottom: 0;
            left: 0;
            color: #fff;
        }
    </style>

图片所示：子标签继承了父元素的字体颜色，文本，没有继承定位等。

PS：

1. 子标签继承过来的元素的权重据文献表明为0.1，即我们用元素选择器就可以覆盖掉继承的属性
2. 为什么要用继承呢？因为继承减少了代码冗余，降低CSS的复杂性
3. 合理运用CSS三大特性，在开发大量中减少了样式bug，减少秃头。