CSS常用布局方案

上中下一栏式布局

上中下各一栏

<style>
body {
    margin: 0;
}
#header {
    height: 64px;
    background-color: firebrick;
}
#content{
    height: 600px;
    background-color: moccasin;
}
#footer {
    height: 80px;
    background-color: grey;
}
</style>
<body>
    <header id="header">header</header>
    <section id="content">content</section>
    <footer id="footer">footer</footer>
</body>

左右两栏式布局

左侧固定，右侧自适应

float + calc：左侧浮动，右侧宽度的剩余宽度减去左侧宽度。

<style>
body {
    margin: 0
}
.left {
    float: left;
    width: 200px;
    height: 600px;
    background-color: orange;
}
.right {
    float: left;
    width: calc(100% - 200px);
    height: 600px;
    background-color: pink;
}
</style>
<body>
    <div class="main">
        <div class="left">左侧</div>
        <div class="right">右侧</div>
    <div>
</body>

float：左侧浮动即可。

<style>
body {
    margin: 0
}
.left {
    float: left;
    width: 200px;
    height: 600px;
    background-color: orange;
}
.right {
    width: 200px;
    height: 600px;
    background-color: pink;
}
</style>
<body>
    <div class="main">
        <div class="left">左侧</div>
        <div class="right">右侧</div>
    </div>
</body>

flex：左侧宽度，右侧填满剩余。

<style>
body {
    margin: 0;
}
.main {
    display: flex;
}
.left {
    flex: 0 0 200px;
    height: 600px;
    background-color: orange;
}
.right {
    flex: 1;
    height: 600px;
    background-color: pink;
}
</style>
<body>
    <div class="main">
        <div class="left">左侧</div>
        <div class="right">右侧</div>
    </div>
</body>

position + margin：左侧固定，右侧空出左侧宽度。

<style>
body {
    margin: 0
}
.left {
    position: absolute;
    left: 0;
    top: 0;
    width: 200px;
    height: 600px;
    background-color: orange;
}
.right {
    margin-left: 200px;
    height: 600px;
    background-color: pink;
}
</style>
<body>
    <div class="main">
        <div class="left">左侧</div>
        <div class="right">右侧</div>
    </div>
</body>

左右三栏式布局

左右固定，中间自适应

flex：左右给宽度，中间填满剩余空间。

<style>
body {
    margin: 0;
}
.main {
    display: flex;
}
.left {
    width: 200px;
    background-color: orange;
}
.center{
    flex: 1 0 auto;
    background-color: gray;
}
.right {
    width: 200px;
    background-color: firebrick;
}
</style>
<body>
    <div class="main">
        <div class="left">左侧</div>
        <div class="center">中间</div>
        <div class="right">右侧</div>
    </div>
</body>

position：三栏固定，中间空出左右的宽度。

<style>
body {
    margin: 0;
}
.left {
    position: absolute;
    left: 0;
    width: 300px;
    height: 100px;
    background-color: orange;
}
.center {
    position: absolute;
    left: 300px;
    right: 300px;
    background-color: seagreen;
}
.right {
    position: absolute;
    right: 0;
    width: 300px;
    height: 100px;
    background-color: brown;
}
</style>
<body>
    <div class="main">
        <div class="left">左侧</div>
        <div class="center">中间</div>
        <div class="right">右侧</div>
    </div>
</body>

float：左右浮动，空出 margin 值，清除浮动即可。

<style>
body {
    margin: 0;
}
.left {
    float: left;
    width: 200px;
    height: 600px;
    background-color: orange;
}
.right {
    float: right;
    width: 200px;
    height: 600px;
    background-color: seagreen;
}
.center {
    margin-left: 200px;
    margin-right: 200px;
    height: 600px;
    background-color: gray;
}
.center::after {
    content: '';
    display: block;
    clear: both;
}
</style>
<body>
    <div class="main">
        <div class="left">左侧</div>
        <div class="right">右侧</div>
        <div class="center">中间</div>
    </div>
</body>

grid：网格布局

<style>
body {
    margin: 0
}
.layout-grid .main {
    display: grid;
    width: 100%;
    grid-template-columns: 300px auto 300px;
    grid-template-rows: 600px;
}
.layout-grid .left {
    background: orange;
}
.layout-grid .center {
    background: gray;
}
.layout-grid .right {
    background: pink;
}
</style>
<body>
    <div class="layout-grid">
        <div class="main">
            <div class="left">左侧</div>
            <div class="center">中间</div>
            <div class="right">右侧</div>
        </div>
    </div>
</body>

圣杯布局

两边固定宽度，中间自适应，唯一区别是 dom 结构必须是先写中间列部分，这样实现中间列可以优先加载。

<style>
body {
    margin: 0;
}
.main {
    padding-left: 200px;
    padding-right: 200px;
}
.center {
    float: left;
    width: 100%;
    height: 600px;
    background-color: gray;
}
.left {
    float: left;
    margin-left: -100%;
    position: relative;
    left: -200px;
    width: 200px;
    height: 600px;
    background-color: orange;
}
.right {
    float: left;
    margin-left: -200px;
    position: relative;
    right: -200px;
    width: 200px;
    height: 600px;
    background-color: firebrick;
}
</style>
<body>
    <div class="main">
        <div class="center">中间</div>
        <div class="left">左侧</div>
        <div class="right">右侧</div>
    </div>
</body>

双飞翼布局

同样也是三栏布局，在圣杯布局基础上进一步优化，解决了圣杯布局错乱问题，实现了内容与布局的分离。而且任何一栏都可以是最高栏，不会出问题。

<style>
body {
    margin: 0;
}
.main {
    min-width: 400px;
}
.center {
    float: left;
    width: 100%;
    height: 600px;
    background-color: gray;
}
.inner {
    margin: 0 200px;
}
.left {
    float: left;
    margin-left: -100%;
    width: 200px;
    height: 600px;
    background-color: orange;
}
.right {
    float: left;
    margin-left: -200px;
    width: 200px;
    height: 600px;
    background-color: firebrick;
}
</style>
<body>
    <div class="main">
        <div class="center">
            <div class="inner">中间</div>
        </div>
        <div class="left">左侧</div>
        <div class="right">右侧</div>
    </div>
</body>

圣杯布局实现步骤
- 三个部分都设定为左浮动，否则左右两边内容上不去，就不可能与中间列同一行。
- 设置 center 的宽度为 100%(实现中间列内容自适应)，此时，left 和 right 部分会跳到下一行。
缺点
- center 部分的最小宽度不能小于 left 部分的宽度，否则会 left 部分掉到下一行。

双飞翼布局实现步骤
- 三个部分都设定为左浮动，然后设置 center 的宽度为 100%，此时，left 和 right 部分会跳到下一行.
- 通过设置 margin-left 为负值让 left 和 right 部分回到与 center 部分同一行。
- center 部分增加一个内层 div，并设 margin: 0 200px。
缺点
- 多加一层 dom 树节点，增加渲染树生成的计算量。
圣杯布局和双飞翼布局实现方式对比:
- 两种布局方式都是把主列放在文档流最前面，使主列优先加载。
- 两种布局方式在实现上也有相同之处，都是让三列浮动，然后通过负外边距形成三列布局。
- 两种布局方式的不同之处在于如何处理中间主列的位置：圣杯布局是利用父容器的左、右内边距+两个从列相对定位; 双飞翼布局是把主列嵌套在一个新的父级块中利用主列的左、右外边距进行布局调整