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

重点

```
选择器的优先级，继承原理
```
```
CSS求值过程
```
```
盒模型布局
```

常规流布局：行级排版，块级排版，flex box，grid

```
float布局
```
```
绝对定位布局
```

CSS深入

选择器优先级

根据选择器的特异度，特异度越高，优先级越高

特异度.JPG

先给基础的设置，特殊的则额外写来覆盖掉

属性的继承

某些属性会继承父元素的值
一般来说和文字相关的可以继承，如颜色 字体
如：例子里strong继承p，

继承.JPG

和模型相关的不能继承，如宽度，这里可以使用显示继承inherit

显示继承.JPG

初始值

初始值.JPG

CSS求值过程

求值过程一.JPG

求值二.JPG

求值三.JPG

计算值：分析css就可以得到的值，不能得到的值如设置body=100% 需要知道布局才能计算

layout布局

布局是什么

布局.JPG

布局的3钟技术

布局技术.JPG

盒模型

盒模型.JPG

width属性

height属性

padding属性

paading介绍.JPG

border属性（3钟属性，4个方向）

四条边框.JPG

margin属性

    margin auto：左右都auto则居中

margin居中.JPG

    margin collapse：选择两个中较大的值，代码

margin collapse.JPG

box-sizing属性

content-box：在宽度和高度之外绘制元素的内边距和边框。
border-box： 值包含border，margin，一般使用这个

overflow属性

visible 默认值。内容不会被修剪，会呈现在元素框之外。      
hidden  内容会被修剪，并且其余内容是不可见的。          
scroll  内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。 
auto    如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。

常规流

块级vs行级

块级行级.JPG

块级行级元素.JPG

display属性

常规流的几种方式

常规流.JPG

行级排版

行级排版.JPG

行级.JPG overflow-wrap换行

块级排版

块级排版.JPG 块级.JPG

flex box

 flex-direction，默认row

flex direct.JPG

主轴侧轴.JPG

 主轴对齐属性justify-content
 
flex-start|flex-end|center|space-between|space-around|initial|

 侧轴 align items属性

 侧轴align-self属性，特定元素的位置，覆盖 align-items

 order属性，给元素排序

 flexibility

     flex-grow：容器-300，按2：1分配给a,b, a不是b的两倍宽

     flex-shrink：

     flex组合

grid

 grid布局

grid布局.JPG

生成grid.JPG

grid设置.JPG

网格线.JPG

网格区域.JPG

float

绝对定位

position属性：static，relative，absolute，fixed

absolute定义.JPG

absolue代码例子

fixed 代码例子

总结

记住盒模型，常规流布局的几种应用，float布局 和绝对定位
查属性可以参考https://www.w3school.com.cn/cssref/pr_order.asp

CSS进阶 | 青训营笔记

重点