双飞翼布局和圣杯布局

圣杯布局和双飞翼布局是前端工程师需要日常掌握的重要布局方式。两者的功能相同,都是为了实现一个两侧宽度固定,中间宽度自适应的三栏布局。(中间先加载渲染)
双飞翼布局
代码如下



	
		
		css
	
	 
	
	
中间
左边
右边

效果
在这里插入图片描述

圣杯布局
(使用float布局框架 , 用margin为负值 , position: relative定位)



	
		
		css
	
	 
	
		
	
头部
中间中间中间中间中间中间中间后
左边
右边

效果
双飞翼布局和圣杯布局_第1张图片
优点**
(1)兼容性好,兼容若有主流浏览器,包括万恶的IE6
(2)可以实现主要内容的优先加载
双飞翼布局和圣杯布局_第2张图片
个人还是推荐使用双飞翼布局

附:
其实三列布局的方式还有很多 ,但也有各自的缺点
1 如果左右两列用position: absolute定位布局做外层设计需要有个包含块设置(否则是相对浏览器可视区域)这样会层级,页面控制相对麻烦
2 用浮动布局的话, 中间层要做到先加载实现不了
3 flex布局低版本浏览器有些还不支持

你可能感兴趣的:(css)