经典布局之圣杯布局&双飞翼布局

2017-03-22 本文已影响187人 kk少年

前言

所谓经典，说白了就是古老的东西，但是又是很有用的东西。大多数前端，还有本菜，都或多或少了解的圣杯布局和双飞翼布局。

本文只对这两种布局进行简单的探讨(毕竟本菜真的好菜啊)

不管怎样，写作的好处自然很多，可以巩固自己的知识，弘扬程序猿一贯的乐于分享的精神，也望日后能有温故而知新的效果。

概述

虽然两种布局名称不一样，但圣杯布局和双飞翼布局效果是一致的，都是三列布局，都是中间宽度自适应，左右宽度为定值的布局，且都是让浏览器将中间区块优先渲染。

效果图如下：

图1

两种布局采用的策略

1. 圣杯布局:

html结构

<div id="container">
    <div class="center">center</div>
    <div class="left">left</div>
    <div class="right">right</div>
</div>

1.1 父容器container设置左右margin 以容纳左右两列，container的width不设置，自适应
1.2 三列都设置左浮动，center块设置width为100%，占满父容器宽度；
1.3 然后利用浮动元素设置margin为一定负值时会跳到上一行的特性（注意：如果前面的元素不是浮动元素，负margin是不会起到跳到上一行的效果的），将左边列的margin-left设置为-100%，也就是父容器的宽度，即center那列的宽度，将right块的margin-left设置为负的right块的宽度，比如right块的宽度为100px,则设置margin-left为-100px；
1.4 设置左边列和右边列position为relative，并设置左边列的left为负的左边容器留白的宽度，设置右边列的right为容器右边留白的宽度

2. 双飞翼布局

html结构

<div id="container2">
    <div class="center2">
        <div class="wrap">center2</div>
    </div>
    <div class="left2">left2</div>
    <div class="right2">right2</div>
</div>

2.1 设置container2的width为100%
2.2 设置center2、left2和right2左浮动，center的width为100%；
2.3 设置left2 的margin-left为-100%，right2的margin-left为right2的宽度的负数
2.4 设置wrap 的左右margin分别为left2和right2的宽度，适当留出一点间隙，width不设置为自适应

完整实现代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>圣杯布局双飞翼布局</title>
    <style>
        *{
            margin: 0;
            padding:0;
        }
        body{
            text-align: center;
        }

        /*圣杯布局*/
        #container{
            padding:0 210px;
            overflow: hidden;
            font-size: 30px;
        }
        .left,
        .center,
        .right{
            float: left;
        }
        .center{
            width:100%;
            height: 50px;
            background: blue;
        }
        .left{
            position:relative;
            left: -210px;
            width:200px;
            height: 100px;
            margin-left: -100%;
            background: red;
        }
        .right{
            position: relative;
            right: -210px;
            width: 200px;
            height: 100px;
            margin-left: -200px;
            background: green;
        }
        
        /*双飞翼布局*/
        #container2{
            width:100%;

        }
        .left2,
        .right2,
        .center2{
            float: left;
        }
        .center2{
            width:100%;
            /*height: 200px;*/
            
        }
        .center2 .wrap{
            height: 200px;
            margin-left: 210px;
            margin-right: 210px;
            background: #392;
        }
        .left2{
            width:200px;
            height: 100px;
            background: red;
            margin-left: -100%;
        }
        .right2{
            width:200px;
            height: 100px;
            background: blue;
            margin-left: -200px;
        }
    </style>
</head>
<body>
    <h2>圣杯布局</h2>
    <div id="container">
        <div class="center">center</div>
        <div class="left">left</div>
        <div class="right">right</div>
    </div>

    <br><br>
    <h2>双飞翼布局</h2>
    <div id="container2">
        <div class="center2">
            <div class="wrap">center2</div>
        </div>
        <div class="left2">left2</div>
        <div class="right2">right2</div>
    </div>
</body>
</html>

效果：

图2

讨论两种布局的区别

从html上看，双飞翼布局多了一个标签
从css上看，明显地双飞翼布局的css代码更少

而且，圣杯布局暴露出一个问题：

图3

这个图为浏览器窗口缩小到一定大小的时候，圣杯布局出现排版错乱的现象，原因是圣杯布局的中间那块宽度是自适应的，浏览器缩小到中间的那块宽度小于左右两块时，左边的那块margin-left不足以跑到上一行，因此出现了排版错乱的现象。解决的办法为container 设置min-width为左右两块的宽度较大者。但是，这样看来，明显是使用双飞翼布局更优。本人推荐用双飞翼布局的方式。