这是我参与「第五届青训营」伴学笔记创作活动的第29天
一、本节课重点内容
在了解 CSS 基本原理后，本节课进一步深入讨论，通过具体案例对于选择器的特异度展开讲解，在此基础上进一步引出 CSS 继承与布局的话题，对其定义及相关技术分别作出介绍。
课程重点内容归纳总结如下：
- CSS 选择器的特异度
- CSS 继承
- CSS 求值过程解析
- CSS 布局方式及相关技术
二、详细知识点介绍
display属性
- block 块级盒子
- inline 行级盒子
- inline-block 本身是行级，可以放在行盒中，可以设置宽高，作为一个整体不会被拆散成多行
- none 完全被忽略
常规流Normal Flow
- 根元素、浮动和绝对定位的元素会脱离常规流
- 其它元素都在常规流之内(in-flow)
- 常规流中的盒子，在某种排版上下文中参与布局
行级排版上下文
- Inline Formatting Context (IFC)
- 只包含行级盒子的容器会创建一个IFC
- IFC内的排版规则
- 盒子在一行内水平摆放
- 一行放不下时，换行显示
- text-align 决定一行内盒子的水平对齐
- vertical-align决定一个盒子在行内的垂直对齐
- 避开浮动(float)元素*
块级排版上下文
- Block Formatting Context (BFC)
- 某些容器会创建个BFC
- 根元素
- 浮动、绝对定位、inline-block
- Flex子项和Grid子项
- overflow值不是visible 的块盒
- display: flow-root;
BFC内的排版规则
- 盒子从上到下摆放
- 垂直margin合并
- BFC内盒子的margin不会与外面的合并
- BFC不会和浮动元素重叠
Flex Box是什么?
- 一种新的排版.上下文
- 它可以控制子级盒子的:
- 摆放的流向(→←↑↓)
- 摆放顺序
- 盒子宽度和高度
- 水平和垂直方向的对齐
- 是否允许折行
Flexibility
可以设置子项的弹性:当容器有剩余空间时，会伸展;容器空间不够时，会收缩。
- flex-grow有剩余空间时的伸展能力
- flex-shrink容器空间不足时收缩的能力
- flex-basis没有伸展或收缩时的基础长度
**flex **
flex: 1 - flex-grow: 1
flex: 100px - flex-basis: 1 00px
flex: 2 1 - flex-grow: 2; flex-shrink: 1
flex: 1 100px - flex-grow: 1; flex- basis: 100px
flex: 2 0 100px - flex-grow: 2; flex-shrink: 0; flex-basis: 100px
flex: auto - flex: 1 1 auto
flex: none - flex: 0 0 auto
position属性
- static - 默认值，非定位元素
- relative - 相对自身原本位置偏移，不脱离文档流
- absolute - 绝对定位，相对非static祖先元素定位
- fixed - 相对于视口绝对定位
三、总结
了解了css中的许多变量属性，对css的语法有了全新的认识与了解。
