这是我参与「第五届青训营 」伴学笔记创作活动的第 2 天。 行级排版上下文（IFC） 只包含行级盒子的容器会创建一个IFC。 IFC内的排版规则：1.盒子在一行内水平摆放； 2.一行放不下时，换行显示； 3.text-align决定一行内盒子的水平对齐； 4.vertical-align决定一个盒子在行内的垂直对齐； 5.避开浮动（float）元素。 6.
overflow-wrap:break-word,超出行的单词断开换行块级排版上下文（BFC） 某些容器会创建一个BFC：1.根元素； 2.浮动、绝对定位、inline-block; 3.Flex子项和Grid子项； 4.overflow值不是visible的块盒； 5.display：flow-root。 BFC内的排版规则：1.盒子从上到下摆放； 2.垂直margin合并； 3.BFC内盒子的margin不会与外面的合并； 4.BFC不会和浮动元素重叠。
在常规流中，一个盒子的一个子集盒子只能都是块级或都是行级，若都是块级则从上到下摆放，若都是行级则从左到右一个行盒一个行盒摆放，若一个盒子里既有块盒又有行盒，则会创建两个匿名的盒子把文字包裹起来。
Flex Box:1.一种新的排版上下文； 2.它可以控制子集盒子的：A.摆放的流向；B.摆放顺序；C.盒子宽度和高度；D.水平和垂直方向的对齐；E.是否允许折行。
设置主轴对齐：justify-content 1.flex-start 2.flex-end 3.center 4.space-between 5.space-around 6.space-evenly space-between:元素与两边的空格距离较小 space-around:元素之间和元素与两边的空格距离相同
设置侧轴对齐：align-items 1.flex-start 2.flex-end 3.center 4.stretch 5.baseline(基线对齐，按元素的基线对齐，如文字)
Flexibility 1.可以设置子项的弹性：当容器有剩余空间时会伸展，容器空间不够时会收缩 2.flex-grow:有剩余空间时的伸展能力 3.flex-shrink:容器空间不足时收缩的能力 4.flex-basis:没有伸展或收缩时的基础长度
flex:1.flex-grow 2.flex-shrink 3.flex-basis
Grid布局：1.display:grid,使元素生成一个块级的Grid容器 2.使用grid-template相关属性将容器划分为网格（二维） 3.设置每一个子项占哪些行/列 4.grid-template-column划分列，grid-template划分行，grid-line网格线，grid-area网格区域。（例：grid-area:1/1/3/3）
float浮动（文字环绕图片）
position属性：1.static默认值，非定位元素（常规流中） 2.relative相对自身原本位置偏移，不脱离文档流（原本空间还是会被占据） 3.absolute绝对定位，相对非static祖先元素定位（完全脱离常规文档流） 4.flexed相对于视口绝对定位（脱离常规流，如滚动时某些元素相对于窗口页面定位不动）
position:relative 1.在常规流里面布局 2.相对于自己本应该在的位置进行偏移 3.使用top、left、bottom、right设置偏移长度 4.流内其他元素当它没有偏移量一样布局
position:absolute(用top、left、right、bottom相对于非static祖先定位) 1.脱离常规流（常规流、grid布局等无视它进行布局） 2.相对于最近的非static祖先定位 3.不会对流内元素布局造成影响。
