这是我参与「第五届青训营 」伴学笔记创作活动的第2天
CSS 作为前端技术栈中关键一环，对页面元素及样式呈现起到了直接作用；
今天的课程由浅入深，从最基础的CSS的基本语法使用，深入到CSS的一些高级特性以及CSS布局的几种常用布局，比较系统也比较全面，既可以当初步学习，也可以当一次系统CSS知识的复习。
Css基本构成
Css三种使用方法
<！--外链-->
<link rel="stylesheet"href="/assets/style.css
<！--嵌入-->
<style> li{margin：0；list-style:none；} p{margin:lem 0；} </style>
<！--内联-->
<p style="margin:lem 0">Example Content</p>
伪类（pseudo-classes）
- 不基于标签和属性定位元素
- 几种伪类
-
状态伪类
-
结构性伪类
-
CSS 选择器的特异度
可便于设置复用，改变样式
CSS 继承
某些属性会自动继承其父元素的计算值，除非显式指定一个值 CSS 求值过程解析
- 跟文字相关的属性，一般可继承，
- 和盒模型相关的，例如width等的一般不可继承。
找不到继承的值时，会使用初始值：
- CSS中，每个属性都有一个初始值
- background-color的初始值为transparent
- margin-left的初始值为0
- 可以使用initial 关键字显式重置为初始值background-color:initial
CSS求值过程：
完整过程：cdpn.io/webzhao/deb…
CSS 布局方式及相关技术
盒子模式：
块级
- Block Level
- 不和其它盒子并列摆放
- 开成多行
- 适用所有的盒模型属性
行级
- Box Inline Level Box
- 和其它行级盒子一起放在一行或拆
- 盒模型中的width、height不适用
display 属性：
- block块级盒子
- inline行级盒子
- inline-block 本身是行级，可以放在行盒中；可以设置宽高；作为一个整体不会被拆散成多行
- none排版时完全被忽略
行级排版上下文
- Iline Formating Context（IFC）
- 只包含行级盒子的容器会创建一个IFC
- IFC内的排版规则
- 盒子在一行内水平摆放
- 一行放不下时，换行显示
- text-align 决定一行内盒子的水平对齐
- vertical-align 决定一个盒子在行内的垂直对齐
- 避开浮动（float）元素*
块级排版上下文
- Block Formatting Context（BFC）
- 盒子从上到下摆放
- 垂直margin合并
- BFC内盒子的margin不会与外面的合并
- BFC不会和浮动元素重叠
- 某些容器会创建一个BFC
- 根元素
- 浮动、绝对定位、inline-block
- Flex子项和Grid子项
- overflow 值不是visible的块盒
- display:flow-root；
Flex Box是什么？
- 一种新的排版上下文
- 它可以控制子级盒子的：·摆放的流向（→一1l）
- 摆放顺序
- 盒子宽度和高度
- 水平和垂直方向的对齐
- 是否允许折行
主轴与侧轴
justify-content
align-items
Flexibility
- 可以设置子项的弹性：当容器有剩余空间时，会伸展；容器空间不够时，会收缩。
- flex-grow 有剩余空间时的伸展能力
- flex-shrink 容器空间不足时收缩的能力
- flex-basis 没有伸展或收缩时的基础长度
flex-grow 设置不同值的效果
Grid 布局
先画格子再把元素填进格子里
float浮动布局 把一个元素“浮动”(float)起来，会改变该元素本身和在正常布局流（normal flow）中跟随它的其他元素的行为；关键是会脱离文档流。
position属性
- static默认值，非定位元素
- relative相对自身原本位置偏移，不脱离文档流
- absolute绝对定位，相对非static祖先元素定位
- fixed相对于视口绝对定位
position: relative
position: absolute
