CSS布局整理（单列布局、几种常见的双列布局&三列布局）

最新推荐文章于 2023-04-15 17:32:30 发布

要加油哦～

最新推荐文章于 2023-04-15 17:32:30 发布

阅读量2k

点赞数 1

分类专栏：笔记文章标签： css html 前端

本文链接：https://blog.csdn.net/weixin_42479421/article/details/126379968

版权

笔记专栏收录该内容

43 篇文章 0 订阅

订阅专栏

单列布局

单列布局是将头部、内容区、底部在页面上垂直排列，是非常实用的一种布局方式。主要对三个区域的宽度进行统一，然后通过设置自动外边距进行居中

<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
            }
            body {
                width: 500px;
            }
            header,section,footer{        /*宽度统一*/
                margin:10px auto;
                width:360px;
                border:1px solid black;
            }
            header,footer{
                height:32px;
            }
            header{
                background:pink;
            }
            section{
                background:skyblue;
            }
            footer{
                background:green;
            }
        </style>
    </head>
    <body>
    	<header></header>
        <section><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /></section>
        <footer></footer>
    </body>
</html>

双列布局

浮动
绝对定位
Flexbox弹性盒
Grid网格布局

1. 浮动

利用浮动、外边和触发父级BFC即可实现，这种方法主要是因为BFC的高度计算会包含其内的浮动元素的高度，父盒子会被撑开。

给类名为"container"的父盒子添加"overflow: hidden"属性，使该父盒子成为BFC。继续给类名为"left"的盒子设置"float: left"和"width: 100px"属性，使该盒子成为浮动元素并且需要一个固定的宽度。最后再给类名为"right"的盒子设置左外边距"margin-left: 100px"属性，该属性值需要和左浮动的盒子宽度一致。

此时父盒子的高度会根据左边浮动元素、右边内容区中高度较高的一方进行计算，并且右边内容区的宽度自适应，最好是根据需要，配合最大或最小宽度进行设置。

<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
            }
            .container {
                overflow:hidden;     /*使之成为容器*/
                border: 1px solid black;
            }
            .left {
                float:left;        /*浮动*/
                width:100px;
                border: 1px solid black;
            }
            .right{
                min-width:100px;
                max-width:1500px;
                margin-left:100px;    /*与左盒子宽度一致*/
            }
        </style>
    </head>
    <body>
    	<section class="container">
            <article class="left"><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /></article>
            <article class="right"></article>
        </section>
    </body>
</html>

2. 绝对定位

绝对定位实现的双列布局看起来较僵硬，因为父盒子首先要设置定位属性并且父盒子的高度无法被子盒子撑开，如果子盒子的高度是自适应的，那么父盒子的高度也就无法确定从而设置了，但优点是设置属性比浮动来得更直观。

给类名为"container"的父盒子添加"position: relative"属性，为了保证子盒子绝对定位时不会根据html元素定位。继续给类名为"left"的盒子添加"position: absolute"、"left: 0"和"width: 100px"三条属性，使该盒子定位到父盒子的最左边并且赋予宽度，但高度是根据内容自适应的。最后给类名为"right"的盒子添加"position: absolute"、"left: 100px"和"right: 0px"，因为该盒子没有给定宽度，设置"left"和"right"定位属性会使内容区保留在这个范围内，同样实现了自适应。

            * {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
            }
            .container{
                position:relative;        /*父元素用相对定位*/
            }
            .left {
                position:absolute;        /*子元素用绝对定位*/
                left:0;
                width:100px;             
                background:pink;
                border: 1px solid black;
            }
            .right {
                position:absolute;
                left:100px;               /*距离左侧一个右盒子的宽度*/
                right:0px;                /*自适应*/    
                background:skyblue;
                border: 1px solid black;
            }

3. Flexbox弹性盒子

通过Flexbox可以快速实现双列布局，主要通过"flex: 1"这条弹性项属性给内容区申请到父盒子的所有剩余空间，并且可以给弹性项设置"position"属性调整弹性项内部的子盒子细节。

给类名为"container"的父盒子添加"display: flex"属性，使该盒子成为弹性盒容器。继续给类名为"left"的弹性项盒子添加"width: 100px"属性。最后给类名为"right"的弹性项盒子添加"flex: 1"属性。

由于弹性项盒子默认占满弹性容器盒子的所有高度，所以两个弹性项盒子的高度也是自适应。右边的内容区宽度会占满弹性容器盒子的剩余空间，所以宽度也是自适应的。

            * {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
            }
            .container {
                display:flex;           /*Flexbox弹性盒子*/
                border: 1px solid black;
            }
            .left {
                width:100px;           /*左盒子定宽度*/
                border: 1px solid black;
            }
            .right {
                flex:1;                /*弹性盒子*/
                border: 1px solid greenyellow;
            }

4. Grid网格布局

Grid网格布局实现双列布局的要点在于列数为2，且首列的宽度根据需要自行设置，第二列使用片段"fr"属性进行自适应即可。行数不需要指定，每行会根据内容高度进行自适应缩放。

给类名为"container"的盒子添加"display: grid"属性，使该盒子成为容器。

再给该容器添加"grid-template-columns: 100px 1fr"属性，表示第一列宽度始终为100px，第二列的宽度为剩余的所有空间。

<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
            }
            .container {
                display:grid;    /*Grid网格布局。使之成为容器*/
                grid-template-columns:100px 1fr;    /*第一列始终为100px，第二列为剩余的所有空间→右边自适应*/
                border: 1px solid black;
            }
            .left {
                background:pink;
                border: 1px solid black;
            }
            .right{
                background:skyblue;
            }
        </style>
    </head>
    <body>
    	<section class="container">
            <article class="left"><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /></article>
            <article class="right"></article>
        </section>
    </body>
</html>

三列布局

浮动
绝对定位
Flex弹性盒子
Grid网格布局
圣杯布局
双飞翼布局

1. 浮动实现三列布局，浮动元素要写在内容元素之前，否则布局是混乱的。

优点：简单、兼容性好。

缺点：要清除浮动，否则父盒子的高度无法撑开，可能会导致其他页面元素的布局混乱。

给类名为"container"的盒子添加"overflow: hidden"属性，该属性可以使盒子成为BFC，处理浮动元素父盒子高度塌陷的问题。再给类名为"left"的盒子添加"float: left"和"width: 100px"两条属性，首先往左浮动，宽度这里设置100px。继续给类名为"right"的盒子添加"float: right"和"width: 100px"两条属性，往右浮动。最后给类名为"center"的盒子设置外边距"margin: 0px 100px"，该属性上下外边距为0px，左右外边距为两边浮动元素的宽度100px，这样保证了中间的内容区域不会被两边的浮动元素覆盖住。

注意，HTML文档中两个浮动元素的顺序在内容元素之前。

<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
            }
            .container {
                overflow:hidden;    /*BFC，防止高度塌陷*/
                border: 1px solid black;
            }
            .left {
                float:left;
                width:100px;
                border: 1px solid black;
            }
            .right {
                float:right;
                width:100px;
                border: 1px solid black;
            }
            .center{
                margin:0 100px;
            }
        </style>
    </head>
    <body>
    	<section class="container">
            <article class="left"><br /><br /><br /></article>
            <article class="right"><br /><br /><br /></article>
            <article class="center"></article>
        </section>
    </body>
</html>

2. 绝对定位，两边通过绝对定位定位到父盒子的左、右边框上，再根据实际的需要设置两边盒子的宽度，高度是根据内容自适应的。中间内容区通过定位属性左、右自适应宽度。

给类名为"container"的盒子添加"position: relative"，该属性使子元素可以相对该盒子做定位。继续给类名为"left"的盒子添加"position: absolute"、"left: 0px"和"width: 100px"三条属性。继续给类名为"right"的盒子添加"position: absolute"、"right: 0px"和"width: 100px"三条属性。最后给类名为"center"的盒子添加"position: absolute"、"left: 100px"和"right: 100px"三条属性，表示自适应区域为距离左边100px至距离右边100px。

此时可以看到三个盒子的高度不同，根据内容高度撑开，实际中可以按需设置高度值。

<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
            }
            .container{
                position:relative;
            }
            .left {
                position:absolute;
                left:0px;
                width:100px;
                border: 1px solid black;
            }
            .center {
                position:absolute;
                left:100px;
                right:100px;
                border: 1px solid black;
            }
            .right {
                position:absolute;
                right:0px;
                width:100px;
                border: 1px solid black;
            }
        </style>
    </head>
    <body>
    	<section class="container">
            <article class="left"><br /><br /></article>
            <article class="center"><br /><br /><br /></article>
            <article class="right"><br /><br /><br /><br /></article>
        </section>
    </body>
</html>

3. Flex弹性盒布局（推荐使用！）

相比于浮动和定位，使用Flexbox布局实现三列布局要更好，因为弹性容器的高度会根据最高的弹性项进行修正，不会出现明显的台阶式效果。Flexbox实现三列布局的特点为简单、使用、强大，核心思路为设置中间内容盒子的"flex: 1"属性，让中间内容区的宽度自适应，独自占据弹性容器的全部剩余空间。

给类名为"container"的盒子添加"display: flex"属性，使该盒子成为弹性容器。再给类名为"left"和"right"的盒子添加"width: 100px"属性，最后给类名为"center"的盒子添加"flex: 1"属性，使该盒子占据容器盒子的全部剩余空间。

此时会发现即使三个子盒子的内容高度不同，但容器和子会根据最高的子元素进行修正，并且没有出现浮动和定位中的台阶式效果。

<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
            }
            .container{
                display:flex;    /*弹性布局*/
            }
            .left {
                width:100px;
                border: 1px solid black;
            }
            .center {
                flex:1;        /*弹性盒*/
                border: 1px solid black;
            }
            .right {
                width:100px;
                border: 1px solid black;
            }
        </style>
    </head>
    <body>
    	<section class="container">
            <article class="left"><br /><br /></article>
            <article class="center"><br /><br /><br /></article>
            <article class="right"><br /><br /><br /><br /></article>
        </section>
    </body>
</html>

4. Grid网格布局实现三列布局，同grid实现双列布局的思想，只是把列数变为了3，不设置高度，通过容器项的内容高度自适应撑开整体高度。

给类名为"container"的盒子添加"display: grid"属性，使该盒子成为网格布局容器。再给该容器添加"grid-template-columns: 100px auto 100px"属性，表示该容器一共有3列，且宽度分别为100px、自适应、100px。不需要设置行属性，当有多个元素时容器会自适应的往下顺次排列。此时观察容器的高度，是根据容器项中高度最高的那一项决定的，也不会产生台阶式效果。

<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8>
        <style type="text/css">
             * {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
            }
            .container{
                display:grid;    /*网格布局*/
                grid-template-columns:100px auto 100px;    /*自适应*/
            }
            .left {
                border: 1px solid black;
            }
            .center {
                border: 1px solid black;
            }
            .right {
                border: 1px solid black;
            }
        </style>
    </head>
    <body>
    	<section class="container">
            <article class="left"><br /><br /><br /></article>
            <article class="center"><br /><br /><br /></article>
            <article class="right"><br /><br /><br /></article>
        </section>
    </body>
</html>

5. 圣杯布局

不像Flexbox或Grid布局可以控制元素显示的次序，圣杯布局是通过浮动元素和外边距属性实现三列布局，但最重要的一点是，在文档中需要将优先渲染的内容写在最前方，但显示时看起来却好像是按照显示次序书写的一样。

给类名为"container"的盒子添加"overflow: hidden"和"padding: 0px 100px"属性，以为了防止容器盒子高度塌陷和给之后的左、右浮动元素预留位置。

给类名为"left"的盒子添加以下属性：
1） "float: left"，浮动，保证之后的"margin-left"属性可以将自身拉到上一行
2） "width: 100px"，固定宽度
3） "margin-left: -100%"，该属性可以将元素向左移动属性值的单位，100%相对于父容器计算
4） "position: relative"，相对定位，需要将自身再向左移动自身的宽度，进入容器的"padding-left"区域
5） "left: -100px"，自身的宽度，刚好进入容器的"padding-left"区域

给类名为"right"的盒子添加"float: left"、"width: 100px"、"margin-left: -100px"、"position: relative"和"left 100px"属性，该右盒子的思想和左盒子一样，即，将右盒子向上拉一行并且再向右移动自身宽度进入"padding-right"区。

给类名为"center"的盒子添加"float: left"和"width: 100%"即可。

此时中间内容区的宽度是自适应的，并且因为有内边距属性所以内容不会被两边的浮动盒子遮挡住。

圣杯布局需要注意的是，当中间内容区域的宽度小于左、右盒子的宽度时，整个布局就会混乱，所以为了避免这种情况，再给容器盒子添加"min-width: 100px"属性，保证圣杯布局正确、有效。

<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
            }
            .container {
                overflow:hidden;
                min-width:100px;
                padding:0px 100px;
                border: 1px solid black;
            }
            .left {
                position:relative;
                left:-100px;
                float:left;
                width:100px;
                margin-left:-100%;
                background-color: greenyellow;
            }
            .center {
                float:left;
                width:100%;
                background-color: darkorange;
            }
            .right {
                position:relative;
                left:100px;
                float:left;
                width:100px;
                margin-left:-100px;
                background-color: darkgreen;
            }
        </style>
    </head>
    <body>
    	<section class="container">
            <article class="center"><br /><br /><br /></article>
            <article class="left"><br /><br /><br /></article>
            <article class="right"><br /><br /><br /></article>
        </section>
    </body>
</html>

原本：

圣杯布局后：

6. 双飞翼布局是在圣杯布局上做了优化，解决了圣杯布局中布局发生错乱的问题。核心思路是在圣杯布局的基础上，再在内容区添加一层新的盒子，该盒子通过外边距将内容与两边的浮动元素分隔开，实际上中心盒子是没有"padding"属性的。

给类名为"container"的盒子添加"overflow: hidden"属性，解决子浮动元素导致的高度塌陷问题。

然后继续给类名为"left"的盒子添加"float: left"、"margin-left: -100%"和"width: 100px"。

再给类名为"center"的盒子添加"float: left"和"width: 100%"属性，该盒子并没有像圣杯布局时添加"padding"属性那样。

继续给类名为"right"的盒子添加"float: left"、"width: 100px"和"margin-left: -100px"。

最后给类名为"main"的盒子添加"margin: 0px 100px"，该属性为双飞翼布局的核心点，使用外边距将内容封锁在两边浮动元素的中间。

<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
            }
            .container {
                overflow:hidden;
                border: 1px solid black;
            }
            .left {
                float:left;
                margin-left:-100%;
                width:100px;
                background-color: greenyellow;
            }
            .main {
                margin:0px 100px;
                background-color: darkorange;
            }
            .center{
                float:left;
                width:100%;
            }
            .right {
                float:left;
                width:100px;
                margin-left:-100px;
                background-color: darkgreen;
            }
        </style>
    </head>
    <body>
    	<section class="container">
            <article class="center"><main class="main"><br /><br /><br /></main></article>
            <article class="left"><br /><br /><br /></article>
            <article class="right"><br /><br /><br /></article>
        </section>
    </body>
</html>