前端面试技巧

9月底秋招结束后，一直玩到今天。这篇博客在9月份就想写来着，可那段时间太忙了，一天最多做过四个笔试，面试三家公司，确实没有精力再写博客了。这篇博客主要针对前端面试高频问题，网上关于前端面试的题目有很多，但是很多题目过于陈旧，并不会被问到。以下内容是我亲身经历面试时经常被问到的点和如何回答的，希望给以后找工作的同学一点参考。在此也要感谢慕课网的《前端跳槽面试必备技巧》这门课程，如果有兴趣的同学可以购买视频课程学习。

页面布局

页面布局主要包括：三列布局、盒子水平垂直居中、BFC、浮动等内容。

三列布局

左中右三列布局实现的页面效果：左右宽度已知，中间宽度自适应。 实现方法很多，至少说出以下几种方法，除了实现以外，各种方法的优缺点也要知道。废话不多说，直接上代码。

1. 浮动

<div class="con">
	<div class="left">left</div>
	<div class="right">right</div>
	<div class="center">center</div>
</div>

    .con div{
   
		height: 500px;
	}
	.left{
   
		float: left;
		width: 300px;
		background: yellow;
	}
	.right{
   
		float: right;
		width: 300px;
		background: red;
	}
	.center{
   
		background: blue;
	}

缺点：浮动会脱离文档流
优点：兼容性好

2. 绝对定位

<div class="con">
	<div class="left">left</div>
	<div class="right">right</div>
	<div class="center">center</div>
</div>

    .con div{
   
		height: 500px;
	}
	.left{
   
		position: absolute;
		left: 0;
		width: 300px;
		background-color: red;
	}
	.right{
   
		position: absolute;
		right: 0;
		width: 300px;
		background-color: red;
	}
	.center{
   //宽度不设置
		position: absolute;
		left: 300px;//关键
		right: 300px;
		background-color: yellow
	}

优点：快捷
缺点：脱离文档流，可使用性较差

说到定位，很有可能问position属性值又哪些？有什么区别？

3. Flex布局

<div class="con">
	<div class="left">left</div>
	<div class="center">center</div>
	<div class="right">right</div>
</div>

    .con{
   
		height: 100px;
		display: flex;
	}
	.left{
   
		width: 300px;
		background-color: red
	}
	.right{
   
		width: 300px;
		background-color: blue;
	}
	.center{
   
		flex:1;//中间自适应原理
		background-color: yellow
	}

缺点：兼容性

4. table布局

<div class="con">
	<div class="left">left</div>
	<div class="center">center</div>
	<div class="right">right</div>
</div>

    .con{
   
		height: 100px;
		width: 100%;
		display: table;
	}
	.left{
   
		width: 300px;
		display: table-cell;
		background-color: red
	}
	.right{
   
		width: 300px;
		display: table-cell;
		background-color: blue;
	}
	.center{
   
		display: table-cell;
		background-color: yellow
	}

盒子水平垂直居中

1. 定位

父级相对定位，子级绝对定位，子级left\right\top\bottom设置为0，margin:auto

<div class="con">
	<div class="center">center</div>	
</div>

.con{
   
	width: 400px;
	height: 400px;
	position: relative;
	background-color: blue;
}
.center{
   
    width: 200px;
    height: 200px;
    background: green;
    position:absolute;
    left:0;
    top: 0;
    bottom: 0;
    right: 0;
    margin: auto;
}

2. margin 负间距法（必须知道子级元素的宽高）

<div class="con">
	<div class="center">center