一文读懂CSS经典布局——圣杯与双飞翼，前端面试必备！

2023-12-01 10:11:43

说起 CSS 布局，圣杯布局和双飞翼布局绝对是绕不开的话题。它们都是经典的 CSS 布局方案，在实际开发中有着广泛的应用，也是大厂前端面试的高频考点。虽然这两个布局的实现方法并不复杂，但想要理解实现方法背后的原理却并不容易。

这篇文章将带你深入剖析圣杯布局和双飞翼布局，让你不仅仅是会用，还能透彻理解原理，在面试中脱颖而出。

圣杯布局

圣杯布局是一种典型的两栏布局，它将页面分为三个区域：头部、主体和底部。头部和底部通常是固定高度，主体部分则可以自由伸展。

圣杯布局的实现方法很简单，只需要使用浮动来让侧边栏和主体部分并排排列，再使用绝对定位来固定头部和底部的位置即可。

<div id="header">头部</div>
<div id="content">
    <div id="sidebar">侧边栏</div>
    <div id="main">主体</div>
</div>
<div id="footer">底部</div>

#header {
    height: 100px;
    background-color: #f0f0f0;
}
#content {
    position: relative;
}
#sidebar {
    float: left;
    width: 200px;
    height: 100%;
    background-color: #f5f5f5;
}
#main {
    margin-left: 200px;
}
#footer {
    height: 100px;
    background-color: #f0f0f0;
}

双飞翼布局

双飞翼布局也是一种两栏布局，但它与圣杯布局不同，双飞翼布局的主体部分位于侧边栏的中间，侧边栏位于主体部分的两侧。

双飞翼布局的实现方法也比较简单，只需要使用浮动来让侧边栏和主体部分并排排列，再使用绝对定位来固定头部和底部的位置即可。

<div id="header">头部</div>
<div id="content">
    <div id="left-sidebar">左侧边栏</div>
    <div id="main">主体</div>
    <div id="right-sidebar">右侧边栏</div>
</div>
<div id="footer">底部</div>

#header {
    height: 100px;
    background-color: #f0f0f0;
}
#content {
    position: relative;
}
#left-sidebar {
    float: left;
    width: 200px;
    height: 100%;
    background-color: #f5f5f5;
}
#main {
    margin-left: 200px;
    margin-right: 200px;
}
#right-sidebar {
    float: right;
    width: 200px;
    height: 100%;
    background-color: #f5f5f5;
}
#footer {
    height: 100px;
    background-color: #f0f0f0;
}