经典布局 双飞燕布局与圣杯布局

本篇文章是拜读掘金专栏两篇文章之后总结而来,如有侵权请联系删
参考文章一 《css经典布局——圣杯布局》
参考文章二 《浅谈面试中常考的两种经典布局——圣杯与双飞翼》
推荐阅读 《聊聊为什么淘宝要提出「双飞翼」布局》

两种布局区别

圣杯布局

双飞燕布局

(图@徐小武)

两种布局呈现的样子都是一样的,最主要的区别就是,圣杯布局因为左右有两个把手,所以左右是空的,双飞燕布局的话中间不变,内容区域为左右两边腾出位置

圣杯布局

方法一:float方式

1
2
3
4
5
6
7
8
9
<body>
<header>header</header>
<div class="content">
<div class="main">main</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
<footer>footer</footer>
</body>
  • 原理
    1. 因为主要内容都是靠float来进行浮动的,所以headerfooter一定要记得清除浮动clearfix
    2. .main要设置为width:100%这样就会自适应宽度
    3. .left.right就会被挤到下面
    4. .left设置margin-left: -100%就能回去
    5. .right设置margin-right: -200px;就能靠右侧

具体代码
代码演示

方法二:flex

1
2
3
4
5
6
7
8
9
<body>
<header>header</header>
<div class="content">
<div class="left">left</div>
<div class="main">main</div>
<div class="right">right</div>
</div>
<footer>footer</footer>
</body>
  • 原理
    1.最外层容器.content设置为display:flex默认横着排列
    2..left.right各设置好宽度
    3..main设置flex:1就是默认分配剩余的宽度

具体代码
代码演示

方法二:grid

1
2
3
4
5
6
7
<body>
<header>header</header>
<div class="left">left</div>
<div class="main">main</div>
<div class="right">right</div>
<footer>footer</footer>
</body>
  • 原理
    1.从上到下,从左往右的写html像个表格一样使用
    2.headerfooter都应该宽度100%,但是这里先看3
    3.main宽度是leftright的两倍,所以left从第一根线开始到第二根线结束(一个格子)grid-colum应该为1/2main是两倍,所以两个格子那么grid-colum就应该从第二根线开始,第四根线结束应该为2/4
    4.这里中间一共用了五根线所以headerfooter用的grid-colum就该为1/5

具体代码
代码演示
扩展阅读 | 阮一峰CSS Grid 网格布局教程

双飞燕布局

方法一:margin

1
2
3
4
5
6
7
<body>
<header>header</header>
<div class="main">main</div>
<div class="left">left</div>
<div class="right">right</div>
<footer>footer</footer>
</body>
  • 原理
    1.headerfooter没有什么问题正常设置为100%的宽度,撑满一行
    2.mainleftright都是要float:left浮动挨着
    3.main要在leftright前面(笔者个人理解:一部分原因是希望先渲染main内容,一部分原因为了能让left回一行)设置宽度100%
    4.leftright此时就被挤到第二行了,那么要让left回到第一行就要设置margin-left:-100%回到了第一行开头
    5.此时right也在第二行,100%是一行宽度,那么我们要在右边只需要回一个right的宽度就可以了,此时就设置margin-left:-300px(假设宽度300px)

具体代码
代码演示