面试必备干货-css篇

总结一下我上一次去面试的时候面试官问的几个关于css的相关问题。
下一篇，我会总结下问的js以及vue相关的面试问题。

1、position:absolute 和 float 属性的异同

共同点：对内联元素设置 float 和 absolute 属性，可以让元素脱离文档流，并且可以设置其宽高。
不同点：float会占据位置，absolute不占位，会覆盖文档流中的其他元素。

2、块级元素如何居中定位

(1)、不定宽高

flex布局

// 外层
display: flex;
justify-content: center;
align-items: center;

利用table-cell

//外层
display: table-cell;
text-align: center;
vertical-align: middle;

//内层
vertical-align: middle;
display: inline-block;

使用css3 transform

// 外层
position: relative;

// 内层
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);

(2)、定宽高

width: 200px;
height: 300px;
position: absolute;
top: 50%;
left: 50%;
margin-left: -100px;
margin-top: -150px;

3、flex: 1的含义

flex 是 flex-grow, flex-shrink, flex-basis 的缩写

flex-grow: 当父控件还有剩余空间时，是否进行放大（grow）。数值代表放大比例，为0表示不放大；
flex-shrink: 当父控件空间不够时,是否进行缩小（shrink）。数值代表的是与控件大小有关的缩小比例；
flex-basis: 当子空间含有这个属性时，代表了子空间占主轴的大小。主轴就是flex的主方向。row是横向，column是竖向

默认flex属性是 0 1 auto，【父控件有剩余控件也不放大，父控件空间不足按1缩小，保持本身的空间大小】
flex:1; 的值是1 1 0%，【父控件有剩余空间占1份放大，父控件空间不足按1缩小，自身的空间大小是0%】