这是我参与「第四届青训营」笔记创作活动的第一天

CSS的权重和优先级

了解 css 除了要了解基本语法规范以外还要了解 css 的样式权重，CSS权重指的是 css 选择器的优先级, 优先级高的 css 样式会覆盖优先级低的 css 样式, 优先级越高说明权重越高, 反之亦然。

好比如这段代码

    <ul>
        <li id="hello">你好</li>
        <li class="byte">字节跳动</li>
        <li style="color: red;">青训营</li>
    </ul>

每一个li上都有对应的样式选择器，这时候我们将li的颜色设置为蓝色，然后将对应选择器的颜色分别设置橙色和绿色，最后一个li用内联样式设置为红色

   li {
        color: blue;
    }

    #hello {
        color: orange;
    }

    .byte {
        color: green;
    }

页面显示效果如下

显而易见的是蓝色的样式不生效了，因为按css优先级蓝色的标签选择器，优先级为最低，所以后面的选择器权重会覆盖前面的，使得蓝色失效。

权值的计算

那么css的权值对于新手来说到底怎么区分？

第一等级：内联样式，如最后一个li里的style=""，简记为1,0,0,0
第二等级：ID选择器，如 #id=""，简记为0,1,0,0
第三等级：class|伪类|属性选择器，如 .byte | :hover | [target]，简记为0,0,1,0
第四等级：标签|伪元素选择器，如 li | ::after，简记为0,0,0,1
通用选择器（*），子选择器（>），兄弟选择器（+）的权值都为0,0,0,0

权值的优先级

!important>内联样式>ID选择器>类选择器>标签选择器>通用选择器

CSS布局

css的布局可分为行级，块级，表格布局，FlexBox，Grid布局。一个容器的布局包括margin|padding|border|width|height。

由此组成一个容器，为了容器不会因为设置高度或者边框后影响内容，也会将容器划分为两种不同的模型：标准盒子模型和怪异盒子模型。

标准盒子模型：采用的W3C标准，盒子的content内容部分由width宽度和height高度决定，添加padding内边距或border外边框后，宽高都会进行相应增长。

怪异盒子模型：也称为IE盒子模型，是IE浏览器设计元素时遵循的规则。怪异盒模型的宽高在div盒子初次设置时就已经规定，添加padding或者border，会从中减少content内容的占据区域，来为padding和border制造空间，宽高不会相对应的进行增长。

标准盒子模型(content-box)的计算方法是
盒子的总宽度=width+padding（左右）+margin（左右）+border（左右）

怪异盒子模型(border-box)的计算方法是
盒子的总宽度=width+margin（左右）
此时的width宽度已经包含了padding和border的值；

在使用的过程中使用box-sizing来切换使用

box-sizing = border-box|content-box

.....

理解与深入CSS | 青训营笔记

CSS的权重和优先级

权值的计算

权值的优先级

CSS布局