CSS一个页面可写多个选择器，不同的选择器会匹配到同样的一个样式。

一、哪条规则生效

比如CSS里面，我们可以写很多的一些选择器啊，那一个页面里面我我可以写条选择器，那这些选择器呢，有可能会选择到同样的一个元素，比如说在这个例子里边，他会有一个article，里边有个H1 CLASS等于title 通过点title可以给他去写样式，我也可以通过那个标签选择器Article空格h1给他选中 那像在这个例子里边呢，我这两个选择器都都设置了这个颜色color这个属性，一个是BLUE一个是RED啊，那大家可以看一下，像这样的一个样式得在页面上他实际展示出来啊，会是什么样的一个效果呢？它到底是绿色呢，还是到底是蓝色呢，还是红色呢？这个就涉及到那个选择器的优先级问题，**那我们怎么样去在那个多个选择题都匹配到一个元素的时候，去决定这个元素最终采用哪个显示器里边的这个样式呢？

就是他其实是根据一个叫特异度这样的一个值来决定的啊，那所谓的特异度呢，就是选择器它的特殊的程度越特殊的选择器呢，他的优先级会越高

二、选择器的特异度（Specificity）

比如说我们看两个具体的例子，一个是第一个他有ID，有class，有标签，有各种各样的，那我们怎么计算一个选择题，他特异度呢？我们可以把它分一下类啊，比如说ID的啊，算一下ID有几个啊，再算一下那个类或者（伪）类有几个，算是标签有几个，我们得到一个数就是122， 这样的一个选择器，它里边定义的这种样式，它的优先级会更高一些，所以可以简单的把这三个数放在一块，比如说122就表示122，那个022就是22，很快的得出来一个结果。
选异度，或者叫特殊的一个程度。

三

如果说我们有了这样的一个特异图之后，我们怎么样去算出来啊，或者说那个决定出来，把我们页面中的样式到底该该长什么样？ 我们看这个例子，这里边有一个class等于button啊，然后下边又有一个button，不过他多了一个primary，对primary这样的一个class。那这个这个例子里边呢，我们可以看到这下面有两个选择期吧，一个是点button，一个是点button.primary好，那下边一个选择器，我们看点button.primary他有两个，他优先级肯定是要超过上一个，所以下边这个选择题里面写的color和background，就是颜色和背景颜色，这两个属性呢，他会覆盖上面的这个里边我也写了color和background，对吧，对他会覆盖啊，对，但这样的覆盖啊，就是对于对，但这样的覆盖啊，就是对于我们开发来说也有一些用途，就是我们可以写一些基础的一些样式，好的，当然我们要用到一些特殊样式的时候，我们可以给这个叫特殊样式的这种元素呢，一个额外的一个class，然后通过样式覆盖把他的那个样式给覆盖掉，对像这个例子里面就是点button，他是一个基础的一个一个按钮，那个primary呢，它是一种特殊的button样式，那我们写的时候就是就普通的按钮就是点button，特殊按钮就是点button，再加一个那个primary，这样的话，我们通过.btn.primary就把它覆盖掉了这是一个实现的一个复用的一个比较好的一个方式。

四、CSS继承

CSS里边的一些属性，就某一些属性他会自动的继承他的负元素的计算值，除非就是我们显示的再给他指定一个其他的一个值。

概念：相关的一些属性都是可以继承的，但是跟那个盒模型相关的一些属性都是不可继承。 比如文字相关的，比如说color，再比如说font-size这些它是可以继承的，就说你不给这元素特殊的去设这个font-size，那么他的font-size，就从副极去读取。

显式继承

有一些属性，它是不可继承的，那我们可以通过inherit关键词，让一个原本就不可继承的属性变成可继承的。

六、初始值

如果说我我我从这个元素法的副级一层一层往上找，都还是没有找到这个，这个有一个CSS去指定这个值，那 这种情况就要用到就是所谓初始值的概念。

初始值 CSS 中，每个属性都有一个初始值； background-color 的初始值为 transparent； margin-left 的初始值为0； 可以使用 initial 关键字显式重置为初始值； background-color: initial。

七、CSS求值过程

八、布局

一、布局（Layot）是什么？
1、确定内容的大小和位置的算法
2、依据元素、容器、兄弟节点和内容等信息来计算

二、布局相关技术
1、常规流：行级、块级、表格布局、FlexBox、Grid布局
2、浮动
3、绝对定位

九、CSS基础:盒模型

width
一、概念：
•指定 content box 宽度
•取值为长度、百分数、auto
•auto 由浏览器根据其它属性确定
•百分数相对于容器的 content box 宽度

height
一、概念：
•指定 content box 高度
•取值为长度、百分数、auto
。auto 取值由内容计算得来
•百分数相对于容器的 content box 高度
•容器有指定的高度时，百分数才生效

上图另外一个盒模型的计算模式（content-box）的概念。以下对盒模型的各个名词进行解析：

padding
一、概念
•指定元素四个方向的内边距
•百分数相对于容器宽度
例：10px、10px 20px、10px 20px 10px 20px

border
一、概念
指定容器边框样式、粗细和颜色

二、性质
1、三种属性
• border-width
• border-style
• border-color
2、四个方向
• border-top
• boder-right
• border-bottom
• border-left

三、技巧
当四条边框不同颜色时，各颜色间是沿着对角线分割的，当长宽高设置为0，得到四个不同颜色的三角形拼接成的正方形，再将其中三个三角形参数设为透明，就可以得到不同的各式各样的三角形，这就是CSS可以做各种形状的一个常用技巧。

margin
一、概念
指定元素四个方向的外边距
。取值可以是长度、百分数、auto
•百分数相对于容器宽度

二、属性
当使用margin:aoto时，得到水平居中的效果

margin collapse
外边距重叠，给排版带来方便（但不常用）

box-sizing:border-box（计算模式二）

content box和border-box区别：
content box算的是content宽和高，那对于border box，如果指定了宽度高度，其实指定的是包含那个border的padding在内整个的这个空间它所占的宽度和高度。里边的内容只能是把你指定的这个宽高减去border然后再减去padding之后的一个计算的一个结果。

overflow
如果如果你指定了宽度和高度，那其实他的宽高是限定死的，就是你指定的那个值，但是它里边会有一些内容，有可能是超越了这个容器本身的这个范围，它的宽度和高度，那这时候我们可以通过overflow这个属性去控制我溢出的这一部分内容怎么去展示，默认的就是visible（展示），hidden（隐藏），scroll（滚动）。