课程内容

深入CSS

块级vs.行级

display
block 块级盒子
inline 行级盒子
inline-block 本身是行级，可以放在行盒中；可以设置宽高；作为一个整体不会被拆散成多行
none 排版时完全被忽略
常规流 Normal Flow
·根元素、浮动和绝对定位的元素会脱离常规流
·其他元素都在常规流之内（in-flow）
·常规流中的盒子，在某种排版上下文 中参与布局 行级排版上下文

inline Formatting Content（IFC）
只包含行级盒子 的容器会创建一个IFC
IFC内的排版规则
·盒子在一行内水平摆放
·一行放不下时，换行显示
·text-align决定一行内盒子的水平对齐
·vertical-align决定一个盒子在行内的垂直对齐
·避开浮动（float）元素*

块级排版上下文

Block Formatting Content（BFC）
某些容器会创建一个BFC
·根元素
·浮动、绝对定位、inline-block
·Flex子项和Grid子段
·overflow值不是visible的块盒
·display：flow-root

BFC内的排版规则
·盒子从上到下摆放
·垂直margin合并
·BFC内盒子的margin不会与外面的合并
·BFC不会和浮动元素重叠

Flex Box

一种新的排版上下文
它可以控制子级盒子的：
·摆放的流向（← → ↑ ↓）
·摆放顺序
·盒子的宽度和高度
·水平和垂直方向的对齐
·是否允许拆行

flex-direction 主轴与侧轴

justify-content

align-items

align-self
order

Flexibility
·可以设置子项的弹性：当容器有剩余空间时，会伸展；容器空间不够时，会收缩
·flex-grow有剩余空间时的伸展能力
·flex-shrink容器空间不足时收缩的能力
·flex-basis没有伸展或收缩时的基础长度
lex

Grid布局

display：grid
·display：grid使元素生成一个块级的Grid容器
·使用grid-template相关属性将容器划分为网格
·设置每一个子项占哪些行/列

grid line网格线

grid area网格区域

float浮动
position属性

static 默认值，非定位元素
relative 相对自身原本位置偏移，不脱离文档流
·在常规流里面布局
·相对于自己本应该在的位置进行偏移
·使用top、left、bottom、right设置偏移长度
·流内其它元素当它没有偏移一样布局
absolute 绝对定位，相对非static祖先元素定位
·脱离常规流
·相对于最近的非static祖先 定位
·不会对流内元素布局造成影响
fixed 相对于视口绝对定位

总结及感悟

这部分笔记主要记录了CSS的一些行块级布局，常规流，flex box和grid布局及相关元素，CSS还有很多很多东西值得我们不断去探索学习发现。

CSS (2)｜ 青训营笔记