面试 之 css布局常考题

目录：
1、flex布局
2、垂直居中
3、经典css三栏布局

PS：持续更新中

1、flex布局

参考阮一峰 - flex布局

简述：

背景：传统布局：display+position+float布局，复杂麻烦，尤其垂直居中比较困难。

元素词：

1.容器：指进行处理布局的代码块，管理全部小块（项目）

.block {
	display: flex; // inline-flex行内
}

2.项目：容器内部的元素，管理每个小块内部及小块间的关系

属性（各6个）：

1.容器

// 布局换行类
flex-direction: row; // row row-reverse column column-reverse
flex-wrap: nowrap; // nowrap wrap wrap-reverse
flex-flow: <flex-direction>  <flex-wrap>; // 两者结合
// 对齐类
justify-content: flex-start; // 水平（主轴）对齐  flex-start  flex-end  center  space-between  space-around;
align-items: stretch; // 垂直（交叉轴）对齐  flex-start  flex-end  center  baseline(第一行文本) stretch(占满容器);
align-content: stretch; // 多轴情况下，指垂直（交叉轴）对齐（个人理解）  flex-start  flex-end  center space-between  space-around stretch(占满容器);

2.项目

order: 0; // 排序，越小越靠前，可为负值；
flex-grow: 0; // 是否变大，相同1等分； 其他为1，某为2，则后者翻倍
flex-shrink: 1; // 是否缩小，1为不缩小；相同为1，等比缩小；其他为1，某为0，后者不缩小。
flex-basis: <length> | auto; // 占据主轴的空间大小；
flex: <flex-grow>  <flex-shrink>  <flex-basis>; // 三者结合，后两者可选；快捷auto: 1 1 auto、none: 0 0 auto;
align-self: auto; // 可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。
                  // auto  flex-start  flex-end  center  baseline  stretch;

2、垂直居中

参考
简述：
1.使用绝对定位和负外边距对块级元素进行垂直居中
2.使用绝对定位和transform
3.绝对定位结合margin:auto
4.使用padding实现子元素的垂直居中
5.使用flex弹性布局
6.使用line-height对单行文本进行垂直居中
7.使用 display：table-cell 和 vertical-align 对容器里的文字进行垂直居中

3、经典css三栏布局

参考
圣杯布局：中间固定大小两边自适应；两边自适应中间固定；
双飞翼布局：圣杯布局的中间结构体再加一层inner用于放置元素；
简单来讲，主要是自适应为中间还是两边的问题。(或者说是，中间100%，inner margin空出两边大小)

中间固定大小两边自适应

传统思路：

定位 + 浮动：
1、父元素设置高度
2、三个元素均设置浮动
3、中间main部分定宽100%：width: 100%，左右两边按产品需求设置宽高
4、左边设置margin-left: -100%；右边设置margin-right: -右盒子宽
5、父元素设置padding-left: 左盒子宽；padding-right: 右盒子宽
6、左右盒子相对定位
（当浏览器屏幕缩小的一定程度时，左右两侧的内容会掉下来，或发生重叠现象。解决方案，给body加一个最小宽度（大于左右两侧宽度之和））

纯浮动：
1、左盒子左浮动，右盒子右浮动
2、中间部分设置margin或padding值

还可以有：纯定位、表格布局、网格布局（不大熟悉）参考

flex布局：

1、父元素设置宽度为100%，display: flex；
2、main中间部分设置flex: 1；
3、左右两则按产品需求设置宽高；
4、left设置order: -1；

两边自适应中间固定

传统思路：

1、左右两边各占50%的宽度
2、左边负边距 margin-left 占中间div宽度的一半
3、右边负边距 margin-right 也占中间div宽度的一半

flex布局：

1、父元素设置display: flex；flex-direction: row；
2、左右设置flex-grow: 1，平分剩余空间

补充：CSS3特性 calc(四则运算)

用于动态计算长度值
1、父元素设置100%宽；
2、左右设置width: calc(50%, - 中间宽/2)