版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
flex布局总结
- justify-content：属性用于定义如何沿着主轴方向排列子容器（水平）
- align-items：属性定义如何沿交叉轴排列（垂直)，定义单行排列items
- align-content：定义整个容器items在交叉轴的排列方式，对只有单行排列的items不起作用
- 子元素的flex属性的属性值可以是无单位的数字，也可以是有单位的数字还可以是none，子容器会按照flex定义的尺寸比例自动伸缩，如果取值为none则不伸缩
- flex-dedication：决定主轴的方向，交叉轴的方向由主轴确定
- flex-flow：设置子容器沿着那个方向流动，流动到终点是否换行，是一个复合属性，相当于flex-depiction和flex-wrap的组合
- flex-basis：表示在不伸缩的情况下子容器的原始尺寸。主轴为横向代表宽度，主轴为纵向代表高度
- flex-grow：子容器弹性伸展的比例
- flex-shrink： 子容器收缩的比例
- order： order是子容器的属性，它可以更改子元素出现的顺序，数值越小，布局越排在前面
参考资料：
https://juejin.im/post/58e3a5a0a0bb9f0069fc16bb
https://segmentfault.com/a/1190000008823763
盒模型
- 可以认为每个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
参考资料：
https://juejin.im/post/59ef72f5f265da4320026f76
https://segmentfault.com/a/1190000013069516
https://segmentfault.com/a/1190000013069516
水平垂直居中
-
单行的行内元素使用：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. 垂直居中
- 单行行内元素居中，只需要将子元素的line-height= height就ok
- display：flex； align-contetn：center；
- display：table：valign：middle；
- position: absolute; top:50%; margin-top：-1/2height；
关于line-height
- line-height是可以继承的
- normal：同number一样，会在每个后代元素中计算出实际值：后代元素的font-size*1.2
- inherit：继承父元素和line-height
- number：当line-height为纯数字无单位的时候，子元素的line-height的值会从父元素继承line-height值与自己本身的font-size值计算后成为自己的line-height值
line-height:2---->2*16=32px
line-height:2---->2*17=34px
line-height:2---->2*18=36px
line-height:3---->3*18=54px5.number+em/px/rem：当line-height为纯数字带单位时，子元素的line-height的值会直接继承父元素的line-height值
line-height:16px---->16px
line-height:20px---->20px
line-height:24px---->24px
line-heithg:2em ---->2*16=32px有单位数字line-height，如果子元素又跟父元素不一样子号大小的情况，会有意想不到的效果，例如文字间的遮挡问题
备注：
- %同number+px/em/rem单位效果一样，后代元素会直接继承父元素的line-height计算结果值
- 当一个元素使用带单位的值声明的，那么它的后代元素会继承其父元素line-height计算结果值：行高属性是用类型px、em、rem等单位来声明时，它的值会被先计算，然后计算后的值会传到任何继承它的后代元素
- 当一个元素是使用不带单位的数字，声明的值会被继承，也就是说这个值会在子元素中用来与子元素本身的font-size重新计算子元素line-height
- 通常使用不带单位的line-height，在父元素设定无单位数字的line-height，其子元素会默认继承，如果想在子元素上有额外的样式，则在子元素上写line-height覆盖即可
参考资料：
https://developer.mozilla.org/zh-CN/docs/Web/CSS/line-height