实现三栏布局的十种方式

本文节选自我的博客:实现三栏布局的十种方式

  • 作者简介:大家好,我是MilesChen,偏前端的全栈开发者。
  • CSDN主页:爱吃糖的猫
  • 我的博客:爱吃糖的猫
  • Github主页: MilesChen
  • 支持我:点赞+收藏⭐️+留言
  • 介绍:The mixture of WEB+DeepLearning+Iot+anything

前言

实现三栏布局也是一道经典的面试题,如果你能侃侃而谈这十种实现三栏布局的方式,一定会令面试官眼前一亮。三栏布局即左右固定中间伸缩,将三栏布局的方式按照中间栏的渲染顺序可以分为三种:float实现的三种(中间栏最后渲染),flex、grid、绝对定位实现的三种(中间栏中间渲染),双飞翼圣杯实现的四种(中间栏最后渲染)

float实现的三种

float实现的方式优点是兼容性好;缺点是需要将中间栏放在最后渲染,网速慢的情况下可能会影响用户体验。

float+BFC



	
		
		
		CSS实现三栏布局
		
	
	
		
左栏
右栏
中间栏

float+margin



	
		
		
		CSS实现三栏布局
		
	
	
		
左栏
右栏
中间栏

float+calc()



	
		
		
		CSS实现三栏布局
		
	
	
		
左栏
右栏
中间栏

flex、grid、绝对定位实现的三种

这三种方式都是将中间栏放在中间渲染。

flex



	
		
		
		CSS实现三栏布局
		
	
	
		
左栏
中间栏
右栏

grid



	
		
		
		CSS实现三栏布局
		
	
	
		
左栏
中间栏
右栏

绝对定位



	
		
		
		CSS实现三栏布局
		
	
	
		
左栏
中间栏
右栏

双飞翼圣杯实现的四种

这四种方式都是将中间栏放在最前面渲染,保证中间栏最先渲染。

felx实现圣杯双飞翼效果



	
		
		
		CSS实现三栏布局
		
	
	
		
左栏
右栏
中间栏

圣杯布局




    
    
    CSS实现三栏布局
    


    
middle
left
right

注意:圣杯布局中间列的宽度不能小于两边任意列的宽度,而双飞翼布局则不存在这个问题。
父级padding+子绝父相+负边距:三栏都使用float:left;父级标签padding: 0 200px; ,结合下面这张图理解
实现三栏布局的十种方式_第1张图片

将left和right使用子绝父相,再调整定位的方式弄上去
左边:margin-left: -100%;(切换到上一行起始位置)left: -200px;(相对定位,向左移动200px)
右边:margin-left: -200px;(向左移动一个身位,移动到middle的右侧)left:200px; (向右移动200px)
还有种方法也能挤上去:margin-right: -200px;

双飞翼布局




    
    
    CSS实现三栏布局
    


    
中间
左边
右边

中间栏的子标签margin+左右负边距:三栏都使用float:left;中间栏子标签margin: 0 200px; HTML中将中间栏放前面;结合下面这张图去理解
实现三栏布局的十种方式_第2张图片

双飞翼圣杯复合写法




    
    
    CSS实现三栏布局
    


    
middle
left
right

中间标签内减模式padding+负数边距:三栏都使用float:left;中间栏标签padding: 0 200px; 且要设置box-sizing: border-box;左边:margin-left: -100%;右边:margin-left: -200px;
实现三栏布局的十种方式_第3张图片

总结

  1. float+BFC:左右两栏float到左右;中间 overflow: hidden; 清除浮动显示第二栏 ;注意:HTML需要将中间块放在right之后;
  2. float+margin:左右两栏float到左右;中间设置margin-leftmargin-right;注意:HTML需要将中间块放在right之后;
  3. float+calc() :先使用浮动将三栏水平排列,然后对中间栏使用calc(100% - 400px);来计算去除左右两栏宽度后剩余的宽度;
  4. flex;将中间设定值为1,最简单的方式;
  5. grid:display: grid;grid-template-columns: 200px auto 200px;左右两栏固定宽度,中间自适应宽度;
  6. 子绝父相:三栏全部绝对定位;中间栏left: 200px;right: 200px;保持伸缩居中
  7. felx实现圣杯双飞翼效果:left {order: -1;} right{order: 1;} 中间块默认为0;所以显示顺序了-1、0、1;
  8. 圣杯布局:父级padding+子绝父相+负边距
  9. 双飞翼布局:中间栏的子标签margin+左右负边距
  10. 双飞翼圣杯复合写法:中间标签内减模式padding+负数边距

感谢小伙伴们的耐心观看,本文为笔者个人学习记录,如有谬误,还请告知,万分感谢!如果本文对你有所帮助,还请点个关注点个赞~,您的支持是笔者不断更新的动力!

你可能感兴趣的:(前端,前端,css)