浅谈布局那些事

掌握一些常用布局是一个前端必不可少的技能。养成看设计图就能大概规划出整体布局的前提是必须熟悉这些常用布局的特点与构造。曾经需结合很多属性才能完成一个布局，如今在现代属性的加持下能更好地快速实现各种布局，节约更多时间去做更重要的事情。

全屏布局

经典的「全屏布局」由顶部、底部和主体三部分组成，其特点为三部分左右满屏拉伸、顶部底部高度固定和主体高度自适应。该布局很常见，也是大部分Web应用主体的主流布局。通常使用<header>、<footer>和<main>三个标签语义化排版，<main>内还可插入<aside>侧栏或其他语义化标签。

<div class="fullscreen-layout">
    <header></header>
    <main></main>
    <footer></footer>
</div>

position + left/right/top/bottom

三部分统一声明left:0和right:0将其左右满屏拉伸；顶部和底部分别声明top:0和bottom:0将其吸顶和吸底，并声明俩高度为固定值；将主体的top和bottom分别声明为顶部高度和底部高度。通过绝对定位的方式将三部分固定在特定位置，使其互不影响。

.fullscreen-layout {
    position: relative;
    width: 400px;
    height: 400px;
    header,
    footer,
    main {
        position: absolute;
        left: 0;
        right: 0;
    }
    header {
        top: 0;
        height: 50px;
        background-color: #f66;
    }
    footer {
        bottom: 0;
        height: 50px;
        background-color: #66f;
    }
    main {
        top: 50px;
        bottom: 50px;
        background-color: #3c9;
    }
}

flex

使用flex实现会更简洁。display:flex默认会令子节点横向排列，需声明flex-direction:column改变子节点排列方向为纵向排列；顶部和底部高度固定，所以主体需声明flex:1让高度自适应。

.fullscreen-layout {
    display: flex;
    flex-direction: column;
    width: 400px;
    height: 400px;
    header {
        height: 50px;
        background-color: #f66;
    }
    footer {
        height: 50px;
        background-color: #66f;
    }
    main {
        flex: 1;
        background-color: #3c9;
    }
}

若<main>需表现成可滚动状态，千万不要声明overflow:auto让容器自适应滚动，这样做有可能因为其他格式化上下文的影响而导致自适应滚动失效或产生其他未知效果。需在<main>内插入一个<div>并声明如下。

div {
    overflow: hidden;
    height: 100%;
}

多列布局

两列布局

经典的「两列布局」由左右两列组成，其特点为一列宽度固定、另一列宽度自适应和两列高度固定且相等。以下以左列宽度固定和右列宽度自适应为例，反之同理。

<div class="two-column-layout">
    <div class="left"></div>
    <div class="right"></div>
</div>

float + margin-left/right

左列声明float:left和固定宽度，由于float使节点脱流，右列需声明margin-left为左列宽度，以保证两列不会重叠。

.two-column-layout {
    width: 400px;
    height: 400px;
    .left {
        float: left;
        width: 100px;
        height: 100%;
        background-color: #f66;
    }
    .right {
        margin-left: 100px;
        height: 100%;
        background-color: #66f;
    }
}

overflow + float

左列声明同上，右列声明overflow:hidden使其形成BFC区域与外界隔离。BFC相关详情请查看小册第4章盒模型。

.two-column-layout {
    width: 400px;
    height: 400px;
    .left {
        float: left;
        width: 100px;
        height: 100%;
        background-color: #f66;
    }
    .right {
        overflow: hidden;
        height: 100%;
        background-color: #66f;
    }
}

flex

使用flex实现会更简洁。左列声明固定宽度，右列声明flex:1自适应宽度。

.two-column-layout {
    display: flex;
    width: 400px;
    height: 400px;
    .left {
        width: 100px;
        background-color: #f66;
    }
    .right {
        flex: 1;
        background-color: #66f;
    }
}

三列布局

经典的「三列布局」由左中右三列组成，其特点为连续两列宽度固定、剩余一列宽度自适应和三列高度固定且相等。以下以左中列宽度固定和右列宽度自适应为例，反之同理。整体的实现原理与上述两列布局一致。

<div class="three-column-layout">
    <div class="left"></div>
    <div class="center"></div>
    <div class="right"></div>
</div>

为了让右列宽度自适应计算，就不使用float + margin-left的方式了，若使用margin-left还得结合左中列宽度计算。

overflow + float

.three-column-layout {
    width: 400px;
    height: 400px;
    .left {
        float: left;
        width: 50px;
        height: 100%;
        background-color: #f66;
    }
    .center {
        float: left;
        width: 100px;
        height: 100%;
        background-color: #66f;
    }
    .right {
        overflow: hidden;
        height: 100%;
        background-color: #3c9;
    }
}

flex

.three-column-layout {
    display: flex;
    width: 400px;
    height: 400px;
    .left {
        width: 50px;
        background-color: #f66;
    }
    .center {
        width: 100px;
        background-color: #66f;
    }
    .right {
        flex: 1;
        background-color: #3c9;
    }
}

圣杯布局与双飞翼布局

经典的「圣杯布局」和「双飞翼布局」都是由左中右三列组成，其特点为左右两列宽度固定、中间一列宽度自适应和三列高度固定且相等。其实也是上述两列布局和三列布局的变体，整体的实现原理与上述N列布局一致，可能就是一些细节需注意。

圣杯布局和双飞翼布局在大体相同下也存在一点不同，区别在于双飞翼布局中间列需插入一个子节点。在常规的实现方式中也是在这个中间列里做文章，如何使中间列内容不被左右列遮挡。

相同
- 中间列放首位且声明其宽高占满父节点
- 被挤出的左右列使用float和margin负值将其拉回与中间列处在同一水平线上
不同
- 圣杯布局：父节点声明padding为左右列留出空位，将左右列固定在空位上
- 双飞翼布局：中间列插入子节点并声明margin为左右列让出空位，将左右列固定在空位上

圣杯布局float + margin-left/right + padding-left/right

由于浮动节点在位置上不能高于前面或平级的非浮动节点，否则会导致浮动节点下沉。因此在编写HTML结构时，将中间列节点挪到右列节点后面。

<div class="grail-layout-x">
    <div class="left"></div>
    <div class="right"></div>
    <div class="center"></div>
</div>

.grail-layout-x {
    padding: 0 100px;
    width: 400px;
    height: 400px;
    .left {
        float: left;
        margin-left: -100px;
        width: 100px;
        height: 100%;
        background-color: #f66;
    }
    .right {
        float: right;
        margin-right: -100px;
        width: 100px;
        height: 100%;
        background-color: #66f;
    }
    .center {
        height: 100%;
        background-color: #3c9;
    }
}

双飞翼布局float + margin-left/right

HTML结构大体同上，只是在中间列里插入一个子节点<div>。根据两者区别，CSS声明会与上述圣杯布局有一点点出入，可观察对比找出不同地方。

<div class="grail-layout-y">
    <div class="left"></div>
    <div class="right"></div>
    <div class="center">
        <div></div>
    </div>
</div>

.grail-layout-y {
    width: 400px;
    height: 400px;
    .left {
        float: left;
        width: 100px;
        height: 100%;
        background-color: #f66;
    }
    .right {
        float: right;
        width: 100px;
        height: 100%;
        background-color: #66f;
    }
    .center {
        margin: 0 100px;
        height: 100%;
        background-color: #3c9;
    }
}

圣杯布局/双飞翼布局flex

使用flex实现圣杯布局/双飞翼布局可忽略上述分析，左右两列宽度固定，中间列宽度自适应。

<div class="grail-layout">
    <div class="left"></div>
    <div class="center"></div>
    <div class="right"></div>
</div>

.grail-layout {
    display: flex;
    width: 400px;
    height: 400px;
    .left {
        width: 100px;
        background-color: #f66;
    }
    .center {
        flex: 1;
        background-color: #3c9;
    }
    .right {
        width: 100px;
        background-color: #66f;
    }
}

均分布局

经典的「均分布局」由多列组成，其特点为每列宽度相等和每列高度固定且相等。总体来说也是最简单的经典布局，由于每列宽度相等，所以很易找到合适的方式处理。

<div class="average-layout">
    <div class="one"></div>
    <div class="two"></div>
    <div class="three"></div>
    <div class="four"></div>
</div>

.one {
    background-color: #f66;
}
.two {
    background-color: #66f;
}
.three {
    background-color: #f90;
}
.four {
    background-color: #09f;
}

float + width

每列宽度声明为相等的百分比，若有4列则声明width:25%。N列就用公式100 / n求出最终百分比宽度，记得保留2位小数，懒人还可用width:calc(100% / n)自动计算呢。

.average-layout {
    width: 400px;
    height: 400px;
    div {
        float: left;
        width: 25%;
        height: 100%;
    }
}

flex

使用flex实现会更简洁。节点声明display:flex后，生成的FFC容器里所有子节点的高度都相等，因为容器的align-items默认为stretch，所有子节点将占满整个容器的高度。每列声明flex:1自适应宽度。

.average-layout {
    display: flex;
    width: 400px;
    height: 400px;
    div {
        flex: 1;
    }
}

居中布局

「居中布局」由父容器与若干个子容器组成，子容器在父容器中横向排列或竖向排列且呈水平居中或垂直居中。居中布局是一个很经典的问题，所以笔者在小册中罗列了所有居中布局方式，详情请查看小册第6章布局方式。

在此直接上一个目前最简单最高效的居中方式。display:flex与margin:auto的强行组合，同学们自行体会。

<div class="center-layout">
    <div></div>
</div>

.center-layout {
    display: flex;
    width: 400px;
    height: 400px;
    background-color: #f66;
    div {
        margin: auto;
        width: 100px;
        height: 100px;
        background-color: #66f;
    }
}

1、本网站名称：潇湘博客
2、本站永久网址：https://xxlog.cn
3、本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系博主进行删除处理。
4、本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。
5、本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报
6、本站资源大多存储在云盘，如发现链接失效，请联系我们我们会第一时间更新。

THE END

CSS+文章收藏
# 浅谈布局 # 语义化标签 # 网页布局