（一） 盒模型
面试开篇之作，也是面试官第一印象，所以这个题目能否答对决定面试的成败。
- 盒模型从内到外是content、padding、border、margin。
- 盒模型分为W3C盒模型和IE盒模型，可以根据box-sizing来改变使用哪种盒模型。
- box-sizing是指浏览器怎样计算height和width值。
- W3C盒模型计算宽度（height）和高度（width）只包含content。如果加入padding和boder会增加盒子的大小。
- IE盒模型是指宽度和高度计算包含content和padding。
（二）flex布局
老生常谈，布局最舒服的方式。flex：1？？？
我们经常使用flex:1，工作原理是什么？
flex-grow属性
flex下的第一个属性，也就是我们常用的1就是flex-grow的值。
- flex-grow定义为项目放大属性的倍数，默认为0，不进行放大操作。
- 当所有的flex值为1时，项目就会平分所有的空间。如果有一个项目为2，那么设置为2的项目是其他设置为1项目的2倍。
flex-shrink属性
与第一个属性相反是指空间不足时，项目缩小的值。
- flex-shrink定义为项目缩小的值，指项目缩小空间不足以放下此项目就会进行缩小。默认为1，会进行缩小，
flex-basis属性
flex-basis属性定义了在分配多余空间之前，项目占据主轴空间。 默认为auto既属性本身的大小。
其他定义在父元素是子元素对齐的属性。
- justify-content定义主轴的对齐方式。
- align-items定义交叉轴的对齐方式。
- flex-direction定义主轴的方向。
- flex-wrap定义换行方式。
- flex-flow将3，4合起来。
- align-self定义到子盒子，定义为自己的对齐方式。
