flex布局

标准的CSS的盒子模型？与低版本IE的盒子模型有什么不同的？

标准盒子模型：宽度=内容的宽度（content）+ border（边框） + padding（内边距） + margin（外边距）
低版本IE盒子模型：宽度=内容宽度（content+border+padding）+ margin

绝对定位的劣势

会让中心的元素脱离文档流，高度就会不存在，不利于页面的布局

.container {
  position: relative;   //这是为了让 `.box` 相对于 `.container` 定位。
}

.box {
  position: absolute;              //这是为了脱离文档流，让其可以自由定位
  top: 50%;                //分别将 `.box` 相对于 `.container` 的顶部和左侧移动到容器的中心位置。
  left: 50%;
  transform: translate(-50%, -50%);                 // 将 `.box` 元素自身的宽度和高度的一半分别向左和向上移动，从																							而实现了水平和垂直居中。
}

布局的传统解决方案，基于盒状模型，依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。

flex布局

flex布局也称为弹性布局，flexbox有