这是我参与「第四届青训营 」笔记创作活动的的第1天，是我青训营发表的第一篇笔记
这篇是关于 CSS优先级 和 CSS布局 方面的内容。
CSS优先级
优先级是如何进行计算的？
优先级就是分配给指定的 CSS 声明的一个权重，它由 匹配的选择器中的 每一种选择器类型的 数值 决定。
而当优先级与多个 CSS 声明中任意一个声明的优先级相等的时候，CSS 中最后的那个声明将会被应用到元素上。
当同一个元素有多个声明的时候，优先级才会有意义。
选择器的类型
以下选择器的优先级依次递减：
- ID选择器。（#example）
- 类选择器（.example）、属性选择器（[type='radio']）、伪类（:action）
- 类型选择器（h1）、伪元素（::before）
计算方法：哪个值大那么优先级就越高
哪条规则起作用呢？ (1)
在下面的例子中，"黄石国家公园" 最终是什么颜色的呢？
<article>
<h1 class="title">黄石国家公园</h1>
</article>
<style>
.title {
color: red;
}
article h1 {
color: blue;
}
</style>
结果如下：
分析原因：
出现这样的结果的原因是类选择器 .title 计算出来的优先级的值 010 是大于 article h1 的优先级的值 002
哪条规则起作用呢？ (2)
执行下面这段代码后，"黄石国家公园" 是什么颜色呢？ 是红色？绿色？还是蓝色呢？
<article>
<h1 class="title" style="color:green">黄石国家公园</h1>
</article>
<style>
.title {
color: red;
}
article h1 {
color: blue;
}
</style>
结果是： 绿色
分析原因：
给元素添加的内联样式 (style="color:green") 总会覆盖外部样式表的任何样式， 因此 内联样式 可看作是具有 最高的优先级 。
CSS布局
盒子模型
display属性
display有4个属性值：
block 和 inline
| 行级元素 | 块级元素 |
|---|---|
| 和其他行级盒子一起放在一行或者被拆分成多行 | 不和其他盒子并列摆放 |
| 生成的是行级盒子 内容分散在多个行级盒子(line box)中 | 生成的是块级盒子 |
| span em strong cite code 等 | body article div main section h1 p ul li 等 |
| display: inline | display: block |
flex-box
flex-box即弹性盒子是一种用于按行或按列布局元素的一维布局方法。元素可以膨胀以填充额外的空间，收缩以适应更小的空间。
.example {
display: flex;
}
主轴与侧轴
flex-dirction
| 属性值 | 说明 |
|---|---|
| row(默认值) | 主轴为水平方向，起点在左端 |
| row-reverse | 主轴为水平方向，起点在左端 |
| column | 主轴为垂直方向，起点在上沿 |
| column-reverse | 主轴为垂直方向，起点在下沿 |
justify-content
| 属性值 | 说明 |
|---|---|
| flex-start(默认) | 左对齐 |
| flex-end | 右对齐 |
| center | 居中 |
| space-between | 两端对齐，项目之间的间隔都相等 |
| space-around | 每个项目两侧的间隔相等，因此项目之间的间隔比项目与边框的间隔大一倍 |
align-items (单根轴线)
| 属性值 | 说明 |
|---|---|
| stretch(默认值) | 如果项目没有设置高度或者设置为auto，那么将占满整个容器的高度 |
| flex-start | 交叉轴的起点对齐 |
| flex-end | 交叉轴的终点对齐 |
| center | 交叉轴的中点对齐 |
| baseline | 项目的第一行文字的基线对齐 |
align-content (多根轴线)
| 属性值 | 说明 |
|---|---|
| stretch（默认值） | 轴线占满整个交叉轴 |
| flex-start | 与交叉轴的起点对齐 |
| flex-end | 与交叉轴的终点对齐 |
| center | 与交叉轴的中点对齐 |
| space-between | 与交叉轴两端对齐，轴线之间的间隔平均分布 |
| space-around | 每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍 |
***以上是我在学习CSS方面觉得比较重要也是我觉得难点的地方***
