在盒模型里面有两种非常常见的布局规则一般是块级和行级 块级(Block Level Box):不和其他盒子并列摆放 适用于所有的盒模型属性 行级(Inline Level Box):和其他行级盒子一起放在一行或拆开成多行 盒模型中的with、height不适用 块级元素：生成块级盒子 body、article、div、main、section、h1-6、p、ul、li等 display：block 行级元素：生成行级盒子 内容分散在多个行盒（line box）中 span、em、strong、cite、code等 display:inine display属性：block 块级盒子 inline 行级盒子 inline-block 本身是行级，可以放在行盒中；可以设置宽高；作为一个整体不会被拆散成多行 nano 排版时完全被忽略
常规流 Normal Flow
- 根元素、浮动和绝对定位的元素会脱离常规流
- 其他元素都在常规流之内（in-flow）
- 常规流中的盒子，在某种排版上下文中参与布局
行级排版上下文
- lnline Formatting Context(IFC）
- 只包含行级盒子的容器会创建一个IFC
- IFC内的排版规则
- 盒子在一行内水平摆放
- 一行放不下时，换行显示
- text-align决定一行内盒子的水平对齐
- vertical-align决定一个盒子在行内的垂直对齐
- 避开浮动（flaot）元素
块级排版上下文
- Block FormattingContext(BFC)
- 某些容器会创建一个BFC
- 根元素
- 浮动、绝对定位、inline-block
- Flex子项和Grid子项
- overflow值不是visible的块盒
- display:floe-rool;
BFC内的排版规则
- 盒子从上到下
- 垂直margin合并
- BFC内盒子的margin不会与外面的合并
- BFC不会和浮动元素重叠
块级和行级只能实现一些简单的排版，不能实现更高级的排版
Flex Box是什么
- 一种新的排版上下文
- 它可以控制子级盒子的：
- 摆放的流向（上下左右）
- 摆放顺序
- 盒子宽度和高度
- 水平和垂直方向对齐
- 是否允许折行
Flexibility
-
可以设置子项的弹性；当容器有剩余空间时，会伸展；容器空间不够时，会收缩。
-
flex-grow有剩余空间时的伸展能力
-
flex-shrink容器空间不足时收缩的能力
-
flex-basis没有伸展或收缩时的基础长度
Flex Box已经是一个强大的功能多的布局但是一个单一的布局的方式，而Grid是一个二维的布局的方式 要将子级放在网格中要先标出网格线，首先给每个线标出编号，然后将编号写好就可以了。grid是在CSS布局是一个最强大的武器，基本上所有的一些布局的方式基本都能够通过grid布局这种方式来实现的，所以我们基本上是彻底解决了。还有一种布局是绝对定位
position属性 static(默认值，非定位元素) relative(相对于自身原本位置偏移，不脱离文档流) absolute(绝对定位，相对非static祖先元素定位) fixed(相对于视口绝对定位)
positiong:relative
-
在常规流里面布局
-
相对于自己本应该在的位置进行偏移
-
使用top、left、bottom、right设置偏移长度
-
流内其他元素当他没有偏移一样布局
position:absolue
- 脱离常规流
- 相对于最近的非static祖先定位
- 不会对流内元素布局造成影响
以上是我对这节课的笔记内容，CSS是如何布局的渲染的以及排版是怎么回事，老师讲的这些东西很丰富很有意思，让我对CSS的了解更加深发现也让我觉的CSS的学习不是很难，现在的发展很快CSS的一些新的特性也不断的涌现，我们要不断的去学习。
