1、两列布局：左边固定，右边自适应

左右两侧，左侧固定宽度 200px，右侧自适应占满。
在这里插入图片描述

方法1： 左侧采用 float:left 往左浮动，右侧 margin-left:200px，留出左侧内容的空间

// html 代码
<div class="divBox">
    <div class="left">左侧固定200px</div>
    <div class="right">右侧自适应</div>
</div>

// CSS 代码
<style>
    * {
        margin: 0;
        padding: 0;
    }
    .divBox {
        height: 500px;
        background-color: pink;
    }
    .left {
        float: left;
        width: 200px;
        height: 100%;
        background-color: royalblue;
    }
    .right {
        margin-left: 200px;
        height: 100%;
        background-color: skyblue;
    }
</style>

方法2：左侧和右侧都采用 float:left 往左浮动，左侧宽度 200px，右侧宽度使用 calc() 函数实现，代码为：calc(100% - 200px);

// html 代码
<div class="divBox">
    <div class="left">左侧固定200px</div>
    <div class="right">右侧自适应</div>
</div>

// CSS 代码
<style>
    * {
        margin: 0;
        padding: 0;
    }
    .divBox {
        height: 500px;
        background-color: pink;
    }
    .left {
        float: left;
        width: 200px;
        height: 100%;
        background-color: royalblue;
    }
    .right {
        float: left;
 		width: calc(100% - 200px);
        height: 100%;
        background-color: skyblue;
    }
</style>

方法3：采用 flex 实现，左侧固定大小，右侧设置 flex:1，即可实现自适应

// html 代码
<div class="divBox">
    <div class="left">左侧固定200px</div>
    <div class="right">右侧自适应</div>
</div>

// CSS 代码
<style>
    * {
        margin: 0;
        padding: 0;
    }
    .divBox {
        height: 500px;
        background-color: pink;
        /* flex 布局 */
        display: flex;
    }
    .left {
        width: 200px;
        height: 100%;
        background-color: royalblue;
    }
    .right {
        flex: 1;
        height: 100%;
        background-color: skyblue;
    }
</style>

2、三列布局：左右固定，中间自适应

左中右三列，左右各 200px 固定，中间自适应占满。
在这里插入图片描述

方法1：左侧和中间都采用 float:left 往左浮动，右侧往右浮动，左侧和右侧宽度都设为 200px，中间宽度使用 calc() 函数实现，代码为：calc(100% - 200px - 200px);

// html 代码
<div class="divBox">
    <div class="left">左侧固定200px</div>
    <div class="content">中间宽度自适应</div>
    <div class="right">右侧固定200px</div>
</div>

// CSS 代码
 <style>
     * {
         margin: 0;
         padding: 0;
     }
     .divBox {
         height: 500px;
         background-color: pink;
     }
     .left {
         float: left;
         width: 200px;
         height: 100%;
         background-color: royalblue;
     }
     .right {
         float: right;
         width: 200px;
         height: 100%;
         background-color: skyblue;
     }
     .content {
         float: left;
         width: calc(100% - 200px - 200px);
         height: 100%;
         background-color: green;
     }
 </style>

方法2：采用 flex 布局，左右两侧宽度固定大小，中间设置 flex:1，即可实现自适应

// html 代码
<div class="divBox">
    <div class="left">左侧固定200px</div>
    <div class="content">中间宽度自适应</div>
    <div class="right">右侧固定200px</div>
</div>

// CSS 代码
<style>
    * {
        margin: 0;
        padding: 0;
    }
    .divBox {
        height: 500px;
        background-color: pink;
        /* 采用 flex 布局 */
        display: flex;
    }
    .left {
        width: 200px;
        height: 100%;
        background-color: royalblue;
    }
    .right {
        width: 200px;
        height: 100%;
        background-color: skyblue;
    }
    .content {
        flex: 1;
        height: 100%;
        background-color: green;
    }
</style>

3、三行布局：上下固定，中间自适应

上中下三行，头部 200px 高，底部 200px高，中间自适应占满
在这里插入图片描述

方法1：使用绝对定位，把上面的和下面的分别设置top: 0; bottom: 0; 固定在上下两端，中间距离上下各 200px 即可。

// html 代码
<div class="box">
    <div class="top">头部200px高</div>
    <div class="center">中间自适应</div>
    <div class="bottom">底部200px高</div>
</div>

// CSS 代码
<style>
    * {
        margin: 0;
        padding: 0;
    }
    .box {
        width: 100%;
        background-color: pink;
    }
    .top {
        position: absolute;
        top: 0;
        width: 100%;
        height: 200px;
        background-color: steelblue;
    }
    .bottom {
        position: absolute;
        bottom: 0;
        width: 100%;
        height: 200px;
        background-color: skyblue;
    }
    .center {
        position: absolute;
        top: 200px;
        bottom: 200px;
        width: 100%;
        background-color: teal;
    }
</style>

方法2：采用 flex 布局，flex-direction: column; 上下两侧高度固定大小，中间设置 flex:1，即可实现自适应.

4、圣杯布局和双飞翼布局

圣杯布局和双飞翼布局解决的问题是一样的，都是两边固定宽度，中间自适应的三栏布局（与三栏布局的区别是 dom 结构必须是先写中间列部分，这样可以实现中间列优先加载），中间栏要在放在文档流前面以优先渲染，即：

  1. 两侧内容宽度固定，中间内容宽度自适应。
  2. 三栏布局，中间一栏最先加载、渲染出来。

4.1 圣杯布局（使用 float 布局框架 ， 用 margin 为负值 ， position: relative 定位）

在这里插入图片描述

实现步骤：

（1）三个部分都设定为左浮动，否则左右两边内容上不去，就不可能与中间列同一行。然后设置 middle（中间部分） 的宽度为 100% (实现中间列内容自适应)，此时，left 和 right 部分会跳到下一行。
在这里插入图片描述
（2）通过设置 margin-left 为负值让 left 和 right 部分回到与 middle 部分同一行显示。

（3）通过设置父容器的 padding-left 和 padding-right，让左右两边留出间隙。
在这里插入图片描述
（4）通过设置相对定位，让 left 和 right 部分移动到两边。
在这里插入图片描述
代码：

// html 代码
 <!-- 圣杯布局 -->
 <div class="container">
     <div class="middle">中间自适应</div>
     <div class="left">左边固定宽度200px</div>
     <div class="right">右边固定宽度200px</div>
 </div>

// CSS 代码
 <style>
     * {
         margin: 0;
         padding: 0;
     }
     .container {
         height: 300px;
         /* 为左右栏腾出空间 */
         padding: 0 200px 0;
         background: pink;
     }
     .middle {
         float: left;
         width: 100%;
         height: 300px;
         background-color: turquoise;
     }
     .left {
         float: left;
         position: relative;
         left: -200px;
         width: 200px;
         height: 300px;
         margin-left: -100%;
         background-color: teal;
     }
     .right {
         float: left;
         position: relative;
         left: 200px;
         width: 200px;
         height: 300px;
         margin-left: -200px;
         background-color: seagreen;
     }
 </style>
  • 内部元素都是左浮动的，主要区域宽度100%;
  • 左侧区域通过 margin-left: -100%;使它浮动到左方，然后根据自身定位 left：-200px;将之移动到父容器的 padding 中。
  • 右侧同理，只不过只需要 margin 自己本身的宽度。
  • 结果：左右固定宽度 200px，中间自适应。

4.2 双飞翼布局

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

双飞翼布局和圣杯差不多，主要是将 padding 换成了 margin 而且只需要包裹 middle 即可。

代码：

// html 代码
<!-- 双飞翼布局 -->
<div class="container">
    <div class="middle">
        <div class="inner">中间自适应</div>
    </div>
    <div class="left">左边固定宽度200px</div>
    <div class="right">右边固定宽度200px</div>
</div>
 
// CSS 代码
<style>
    * {
        margin: 0;
        padding: 0;
    }
    .container {
        /* 确保中间内容可以显示出来，两倍left宽+right宽 */
        min-width: 600px;
        height: 300px;
        background: pink;
    }
    .middle {
        float: left;
        width: 100%;
        height: 300px;
        background-color: turquoise;
    }
    .middle .inner {
        /* 为左右栏腾出空间 */
        margin: 0 200px;
    }
    .left {
        float: left;
        width: 200px;
        height: 300px;
        margin-left: -100%;
        background-color: teal;
    }
    .right {
        float: left;
        width: 200px;
        height: 300px;
        margin-left: -200px;
        background-color: seagreen;
    }
</style>

实现步骤(前两步与圣杯布局一样)：

  • 三个部分都设定为左浮动，然后设置 middle 的宽度为100%，此时，left 和 right 部分会跳到下一行。
  • 通过设置 margin-left 为负值，让 left 和 right 部分回到与 middle 部分同一行。
  • middle 部分增加一个内层 div，并设 margin: 0 200px。

缺点： 多加一层 dom 树节点，增加渲染树生成的计算量。

4.3 两种布局实现方式对比

  • 两种布局方式都是把主列放在文档流最前面，使主列优先加载。
  • 两种布局方式在实现上也有相同之处，都是让三列浮动，然后通过负外边距形成三列布局。
  • 两种布局方式的不同之处在于如何处理中间主列的位置：
    • 圣杯布局是利用父容器的左、右内边距+两个从列相对定位。
    • 双飞翼布局是把主列嵌套在一个新的父级块中利用主列的左、右外边距进行布局调整。

推荐使用双飞翼布局。

5、布局常用方法

  • Flex 布局
  • 栅格布局
  • 使用 BFC 隐藏属性
  • float + margin
  • absolute + margin
  • 圣杯布局
  • 双飞翼布局
# css
Logo
华为云开发者联盟

为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。

更多推荐

cover

GaussDB关键技术原理：高性能（三）

avatar 华为云开发者联盟
cover

华为云技术专家硬核分享，云原生中间件如何加速业务发展

avatar 华为云开发者联盟
cover

深度解读昇腾CANN多流并行技术，提高硬件资源利用率

avatar 华为云开发者联盟