定位
- 相对定位：相对于自己的位置进行移动，不脱离文档流
- 绝对定位：脱离文档流，以自身为起点，一层一层往外找，找到第一个position的值为非static的父级元素做参照，否则以整个body作为参照
- 固定定位：脱离文档流，一般情况下，相对于浏览器显示窗口为定位，但是当其最近的父元素有transform属性时，就会以这个父级元素当参照
高度塌陷/盒子塌陷/外边距合并
- 什么时候会出现塌陷：当垂直方向给元素设置margin属性的时候；为什么水平方向不会出现，因为水平方向margin是叠加，而垂直方向是比较哪一个值更大，就以哪个为准
- 水平方向：margin会叠加（不存在塌陷的情况）
- 垂直方向：以两个margin值当中最大的做为margin值
- @1：同辈元素的垂直方向上margin会合并 （兄弟之间没有解决办法，只要设置一个方向即可）
- @2：（子元素想离父元素有一点距离）父子元素不一定出现margin合并，当父元素没有边框的时候，才会出现margin合并，（这时子元素离父元素没有距离）（1.给父元素设置内边距；2.父元素设置边框）
flex
- 设置了display：flex的元素叫做
容器，容器里面的子元素叫做项目 - main axios:
主轴cross axios:交叉轴 - 容器有6个属性：
flex-direction，flex-wrap，flex-flow，justify-content，align-items，align-content,order flex-flow(flex-direction , flex-wrap)flex(flex-grow , flex-shrking , flex-basis)-
改变主轴方向：
flex-direction:row/column/row-reverse/column-reverse
是否换行：
flex-wrap:nowrap/wrap/wrap-reverse; 主轴空间不足的时候，是否允许换行，默认不允许（在一行排列不下时，宽度失效）；wrap-reverse:往上换行，第一行位于下方
语法糖（改变主轴方向 是否换行）
flex-flow:column wrap; 语法糖(flex-direction,flex-wrap)
控制项目在主轴的排列方式
justify-content:flex-start/flex-end/center/space-around/space-between/space-evenly/baseline;（从主轴起点开始排列）/（从主轴终点开始排列）/（从主轴中间开始排列）/（项目离两边的距离等于项目之间距离的一半）/（贴靠两边，再设置padding,可以很精准的控制边距；项目之间的距离相等 99%）/（项目离两边的距离和项目之间的距离相等）/（好像没卵用）
@ 交叉轴的flex-start===交叉轴为垂直方向且项目设置高度/交叉轴的水平方向且设置项目宽度的stretch，也就是不设置align-items、align-content
控制单行(轴)项目在交叉轴的排列方式
align-items:stretch/flex-start/flex-end/center/baseline;（我们有一个值来约束项目高度大小，没有设置就会自动占满整个容器高度）/（以交叉轴起点排列）/（以交叉轴终点排列）/（以交叉轴中间排列）/（以第一列文字高度为基准，英文常用 前提：justify-content不是baseline）
控制多行(轴)项目在交叉轴的排列方式（align-items 失效）
-
align-content:stretch/flex-start/flex-end/center/space-around/space-between;（没有设置高度，均匀拉伸，直至拉满整个容器高度）/（以交叉轴起点排列）/（以交叉轴终点排列）/（以交叉轴中间排列）/（轴离两边距离等于轴与轴之间距离二分之一）/（贴靠两边，轴以轴之间的距离相等） -
项目有6个属性：
order，flex-grow，flex-shrink，flex-basis，flex，align-self
项目在主轴排列顺序
order:1; 值越小,越靠前
分配剩余空间的比例；前提：（主轴方向&单行&有剩余空间）
flex-grow:0;（当我们不设置宽度，想要设置他们均分，flex-grow:1，不能起到均分的作用（display:flex;行内块：内容撑开高度自身宽度不一，即使剩余宽度在均分，还是无法保证宽度均分）；解决方案：width:0;他们起点一样，剩余宽度均分）
在主轴空间不足的时候，项目压缩的分配比例 前提：（主轴方向&单行&超出容器宽度）
flex-shrink:1;（0：不压缩；1：所有项目同等比例压缩；减小宽度计算公式：分配到减小宽度 = 超出宽度*（自身宽度*（自身元素的flex-shrink值/所有子元素的flex-shrink值*自身宽度的和））
控制项目在主轴方向的固定大小 前提：（主轴方向&单行）
flex-basis:auto;优先级>高度和宽度
语法糖（占用剩余宽度多少比例 空间不足，压缩比例 固定大小）
flex:0 1 auto; 语法糖- 三列布局：(head:50,main:flex:1,foot:50)弊端:（中间高度为0，保证有剩余空间；溢出隐藏）如果中间高度占据整个容器高度（不换行flex-wrap，压缩flex-shrink），设置高度就会失效
单独设置某个项目在交叉轴上的对齐方式；
align-self:auto/stretch/center/flex-start/flex-end/baseline;
容器当中justify-content、align-items、align-content主要属性的区别
justify-content的默认值是flex-start，后两者默认值为stretchjustify-content存在是space-evenly，后两者没有justify-content、align-items均有baseline；align-content没有justify-content、align-content均有space-around、space-between；align-items没有
