flex布局总结
- justify-content：属性用于定义如何沿着主轴方向排列子容器（水平）
- align-items：属性定义如何沿交叉轴排列（垂直)，定义单个items
- align-content：定义多个items在交叉轴的排列方式
- 子元素的flex属性的属性值可以是无单位的数字，也可以是有单位的数字还可以是none，子容器会按照flex定义的尺寸比例自动伸缩，如果取值为none则不伸缩
- flex-dedication：决定主轴的方向，交叉轴的方向由主轴确定
- flex-flow：设置子容器沿着那个方向流动，流动到终点是否换行，是一个复合属性，相当于flex-depiction和flex-wrap的组合
- flex-basis：表示在不伸缩的情况下子容器的原始尺寸。主轴为横向代表宽度，主轴为纵向代表高度
- flex-grow：子容器弹性伸展的比例
- flex-shrink： 子容器收缩的比例
- order： order是子容器的属性，它可以更改子元素出现的顺序，数值越小，布局越排在前面
盒模型
- 可以认为每个html标签都是一个方块，然后这个方块又包着几个小方块，如同盒子一层层的包裹着，这就是所谓的盒模型
- 盒模型分为W3C标准盒模型和IE盒模型，可以通过box-sizing设置
- W3C盒模型：属性width、height不包含border和padding，只包含content
- IE盒模型：属性width、height包含border和padding，指的是content+padding+border
- content-box：标准盒模型，width=content height= content
- border-box：IE盒模型，width = border + padding + content ; height = border + padding + content
- css的盒子模型由content、padding、border、margin组成。但盒子的大小由content+padding+border这几部分决定，把margin算进去的是盒子占据的位置，而不是盒子的大小
- 外边距重叠：当两个垂直外边距相遇时，它们将形成一个外边距，合并后的外边距高度等于两个发生合并的外边距的高度中的较大者。注意：只有普通文档流中块框的垂直外边距才会发生外边距合并，行内框、浮动框或绝对定位之间的外边距不会合并
- BFC（块级格式化上下文）渲染规则：
- BFC元素垂直方向的距离会发生重叠，属于不同BFC外边距不会发生重叠
- BFC的区域不会与浮动元素的布局重叠‘
- BFC元素是一个独立的容器，外面的元素不会影响里面的元素。里面的元素也不会影响外面的元素
- 计算BFC高度的时候，浮动元素也会参与计算（清除浮动）
10. 如何创建BFC：
- overflow为visible
- float值不为none
- position值不为static或relative
- display属性为inline-block、table、table-cell、table-caption、flex、inline-flex
水平垂直居中
-
单行的行内元素使用：line-height=height、margin：0 auto；
-
多行元素可以使用table、flex等
-
水平居中固定宽度：
- margin：0 auto；对float和absolute元素无效
- position：absolute； top：50%； left：50%；margin-top：-1/2height；margin-left：-1/2width (水平垂直居中）
- position：absolute；top：50%； left：50%；transform：translate（-50%，-50%）；（水平垂直居中）
4. 水平居中宽度未知：
- 将子元素设置为行内元素，然后父元素设置text-align：center；
- position: absolute; left:50%; margin-left：-1/2height；
- display:flex; justify-content:center;
- float：left； position： relative；left：-50%；
5. 垂直居中
- 单行行内元素居中，只需要将子元素的行高等于高度就ok
- display：flex； align-contetn：center；
- display：table：valign：middle；
- position: absolute; top:50%; margin-top：-1/2height；