面试官问：你有多少种方式实现三栏布局？

一、什么是三栏布局

　　三栏布局即左右元素固定宽度，中间元素自适应。代表布局有圣杯布局和双飞翼布局，当然还有其他方式可以实现，下面是详细介绍。

二、实现方式

　　1.自身浮动　　

　　　　元素顺序：中间盒子必须放在最后，左右元素任意排列
　　　　原理：左边元素左浮动 右边元素右浮动
　　　　缺点：当浏览器宽度不足以容纳三个元素时，中间元素不消失，最右侧的元素会被挤到第二排。浮动对后续元素影响较大（使用时一定要清除浮动）

　　2.绝对定位

　　　　元素顺序：任意摆放即可
　　　　原理：将左右两边使用absolute定位，中间元素使用margin预留左右元素的宽度
　　　　缺点：当浏览器页面不足以容纳三个元素时，中间元素会宽度减小（最小到0），右侧元素会覆盖到左侧元素上。两侧高度无法支撑总高度

　　3.函数计算　　　　

　　　　元素顺序：无要求
　　　　原理：使用calc函数，计算父元素的宽度减去左右元素的宽度
　　　　缺点：存在兼容性问题，需要IE9+才可以正常使用。元素采用了浮动，对后续元素有影响

	
		
		
		
	
	
		

			
left
	        
center
	        
right
	    
	

　　4.表格布局

　　　　元素顺序：中间元素必须在两个div之间
　　　　原理：父元素设置display:table,子元素设置display:table-cell
　　　　缺点：兼容性IE8+，不利于SEO

　　5.圣杯布局（重点，面试常问）

　　　　元素顺序：中间元素位于开头，左右元素无要求
　　　　原理：父元素使用padding预留左右元素的位置，三个元素浮动，左元素使用margin负值和相对定位调整位置，右元素用margin负值调整位置
　　　　缺点：中间部分宽度小于左侧时，布局混乱

	
		
		
		
	
	
		

		    
main
		    
left
		    right
		

　　6.双飞翼布局（重点，面试常问）

　　　　元素顺序：中间元素位于开头，左右元素无要求
　　　　原理：在中间元素内部创建子元素，子元素设置margin（值是左右元素的宽），用来预留左右元素的位置。左中右元素都设置浮动，左右元素设置margin负值
　　　　缺点：增加了DOM节点，加大了渲染树生成的计算量

	
		
		
		
	
	
		

		    

		        
 #main 
		    
		    
#left
		    
#right
		
	

　　7.flex布局（重点，面试常问）

　　　　元素顺序：无要求
　　　　原理：父元素设置flex，中心元素设置flex:1
　　　　缺点：flex有兼容性问题，IE11+支持较好

	
		
		
		
	
	
		

			
left
			
center
			
right
		
	

　　8.网格布局

　　　　元素顺序：中间元素必须在两个div之间
　　　　原理：父元素设置display:grid,使用grid-template-rows定义行高，使用grid-template-columns定义列宽即可
　　　　缺点：兼容性IE10+

三、总结

　　上面一共列举了8中方式去实现三栏布局，也列出了他们各自的缺点，效果图我就不放了，cv代码自己运行一下就可以了。博主个人觉得，如果在不考虑兼容性的情况下，肯定选择后四种是比较好的，当然还可能有其他实现方法，欢迎大家评论、留言

　　ps：面试可能会问你如果中间元素需要优先加载，最好是选择方式5、6、7。因为他们的中间元素都是在左右元素的前面的