CSS (Cascading Style Sheets，层叠样式表）

层叠用来解决样式规则声明的集合产生的冲突。

层叠、优先级

像这段代码，三种不同方式的CSS样式作用在同一个元素上，所以会因为哪一个样式生效而产生冲突，因此我们用层叠三大规则进行判断。

样式表来源

像我们一般自己写的CSS样式，会覆盖用户代理样式（浏览器默认样式）

使用!important之后

现在我们来讲一下!important这个关键词

!important 与优先级无关，但它与最终的结果直接相关，使用一个 !important 规则时，此声明将覆盖任何其他声明。

选择器优先级

优先级判断规则

给每一个优先级设置值的意义是，两个元素进行比较，有更高的优先级的CSS样式就是这个，不会被后面的元素影响。

内联样式（style 属性）：优先级最高，为 1000。
ID 选择器：为 100。
类选择器、属性选择器和伪类选择器：为 10。
元素选择器、伪元素选择器和通配符选择器：为 1。

选择器的优先级计算规则如下：

将选择器拆分成单个选择器，比如 div p a:hover 拆分为 div、p、a:hover。
对于每个单个选择器，按照上述四个级别计算优先级并相加，形成一个优先级值。
如果两个或多个选择器具有相同的优先级值，则最后的规则是由它们在样式表中出现的顺序决定的。出现在后面的规则将覆盖出现在前面的规则。

源码位置

对于@import的样式，根据@import的顺序
对于link和style标签的样式，根据在document中的顺序决定（可以参考下面的图片）

好习惯

选择器尽量少用id（不利于后续的覆盖）
尽量不用!important（保证局部扩展和灵活性）
自己的样式加载在引用样式库后面（保证我们自己写的样式生效）

继承

继承属性

当元素的一个继承属性（inherited property）没有指定值时，则取父元素的同属性的计算值 computed value (en-US)。只有文档根元素取该属性的概述中给定的初始值（initial value）（这里的意思应该是在该属性本身的定义中的默认值）。

大部分具有继承特性的属性跟文本相关，color、font、font-family、font-size、font-weight、font-variant、font-style、line-height、letter-spacing、text-align、text-indent、text-transform、white-space以及word-spacing，还有少部分列表、表格属性。
可以使用inherit关键字显式指定一个属性值从其父元素继承

像这张图片，第三行的1标签的字体大学应该是24px，使用了inherit关键字后，第三行的1标签继承父元素div的字体大小属性，所以字体大小是24px，然后因为.card h1的优先级比h1元素选择器的优先级高，所以最终I am a inside Title的字体大小是24px，而不是28px。

非继承属性

当元素的一个非继承属性(在 Mozilla code 里有时称之为 eset property ) 没有指定值时，则取属性的初始值 initial value（该值在该属性的概述里被指定）。

盒模型

外边距（margin）： 可正可负可auto

提供4个数据：（如margin：20px 20% 0.2em 20px；）将依次作用于上，右，下，左。（顺时针）
提供3个数据：将依次作用于上，左右，下
提供2个数据：将依次作用于上下，左右
提供1个数据：将依次作用于上下左右

margin负值最终减少的是外界可感知的宽高。

不提倡使用负外边距，因为这会增加代码复杂度。

内边距（padding）： 不可为负，其余同上。

利用盒模型的border属性去实现，一开始竟然没理解意思，直到自己用笔画出来大概样子才明白

<div class="triangle2"></div>

.triangle2{
    width: 100px;
    height: 100px;
    border: 100px solid;
    border-color: orangered skyblue gold yellowgreen;
}

实现固定比例图形

<style>
    .zone{
        background-color: #ffb795;
        width: 100%;
        padding-bottom: 75%;
    }
</style>
<body>
<div class="zone"></div>

实现渐变边框

</style>
    .border-box {
      border: 4px solid transparent;
      border-radius: 16px;
      background-clip: padding-box, border-box;
      background-origin: padding-box, border-box;
      background-image: linear-gradient(to right, #222, #222), linear-gradient(90deg, #8F41E9, #578AEF);
}
</style>
<div class="border-box"></div>

[ 理解CSS | 青训营笔记 ]