这是我参与「第四届青训营 」笔记创作活动的第3天
一、本堂课重点内容：
学习了布局技术，常规流排版上下文，float，绝对定位等知识。
二、详细知识点介绍：
布局技术
盒子模型：margin,border,padding,content
margin在左右都是auto时，可以水平居中
margin:collapse，定义边距不会相加，而是计算max
box-sizing:border-box，设置宽度是包括border的
overflow：visible/hidden/scroll
块级盒子不和其他盒子并排，独自占据一行。
| 名称 | 描述 |
|---|---|
| display:block | 块级盒子 |
| display:inline | 行级盒子 |
| display:inline-block | 可以设置宽高，不会被拆成多行，本身是行级 |
| display:none | 排版时完全被忽视 |
常规流排版上下文
在排版上下文中参与布局，根元素、浮动、绝对定位脱离常规流
行级排版上下文（IFC）
只包含行级盒子，text-align表示一行内盒子的水平对齐，vertical-align垂直对齐。遇到一整块长单词之类的不换行，这时可以设置overflow-wrap:break-word。
块级排版上下文(BFC)
根元素，浮动、绝对定位、inline-block，flex子项和grid子项,overflow不是visible的块盒，display:flow-root等都会创建BFC，BFC内盒子的margin不会和外面的合并。由于不允许一个盒子里又有块级又有行级，所以遇到这种情况会创建匿名的盒子包裹行级元素。
flex box
一种新的排版上下文，可以控制子级盒子的摆放的流向(flex-direction，默认是row)、摆放顺序、盒子宽度和高度、水平和垂直方向的对齐、是否允许折行。主轴是元素摆放的方向，侧轴是垂直于子轴的方向。
justify-content：水平对齐
flex-start/flex-end/center/space-between/space-around/space-evenly
align-items：垂直对齐
flex-start/flex-end/center/stretch(拉伸)/baseline(基准线对齐)
flexibility：可以设置子项的弹性，有剩余空间就伸展（flex-grow,数字越大，伸展越多），没有就收缩（flex-shrink）,定义没有伸展或收缩时的基础长度（flex-basis）
flex: flex-grow/flex-shrink flex-basis(px)
grid
display:grid使元素生成一个块级的grid容器，使用grid-template相关属性（grid-template-columns列，grid-template-rows行）（fr指的是一份）将容器划分为网格，设置每一个子项占哪些行/列
grid line 网格线，需要标好线的编号，然后针对编号进行设置。
grid-area:grid-row-start,grid-column-start,grid-row-end,grid-column-end
非常规流
float
绝对定位
| position属性 | 作用 |
|---|---|
| static | 默认值，非定位元素 |
| relative | 相对自身原本位置偏移，不脱离文档流 |
| absolute | 绝对定位，相对非static祖先元素定位 |
| fixed | 相对于视口绝对定位 |
三、课后个人总结：
对flex,grid等有了更多的认识，以后可以更好的进行布局。
