CSS三栏布局实现方法与优缺点分析,-优快云博客

本文链接：https://blog.youkuaiyun.com/2301_76510083/article/details/131001862

三栏布局

左右宽度固定，中间自适应

上下高度固定，中间自适应(详见CSS之布局系列--上中下布局(上下固定，中间自适应)--方法/实例_css上下布局-优快云博客)

两栏布局

左宽度固定，右自适应

右宽度固定，左自适应

上宽度固定，下自适应

下宽度固定，上自适应

此案例为 左右宽度固定，中间自适应

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css</title>
    <style media="screen">
        *{
          margin: 0;
          padding: 0;
          box-sizing: border-box;
        }
        .layout .left-center-right{
          margin-top: 40px;
          /* background-color:red; */
        }
        /* 公共样式开始 */
        .layout .left-center-right div{
          height: 100px;
        }
        /* 公共样式结束 */

        /* 使用浮动 */
        .float .left-center-right .left{
          width: 300px;
          background-color: red;
          float: left;
        }
        .float .left-center-right .center{
          background-color: yellow;
        } 
        .float .left-center-right .right{
          width: 300px;
          background-color: rgb(44, 166, 173);
          float: right;
        }

        /* 使用定位 */
        .position .left-center-right{
          position: relative;
        }
        .position .left-center-right div{
          position: absolute;
        }
        .position .left-center-right .left{
          left: 0;
          top: 0;
          width: 300px;
          background-color: antiquewhite;
        }
        .position .left-center-right .center{
          left: 300px;
          right: 300px;
          background-color: green;
        }
        .position .left-center-right .right{
          right: 0;
          top: 0;
          width: 300px;
          background-color: brown;
        }

        /* 使用flex */
        .flex .left-center-right{
          margin-top: 180px;
          display: flex;
        }
        .flex .left-center-right .left{
            width: 300px;
            background-color: aquamarine;
        }
        .flex .left-center-right .center{
            flex: 1;
            background-color: coral;
        }
        .flex .left-center-right .right{
          width: 300px;
          background-color: blueviolet;
        }

        /* 使用table表格布局 */
        .table .left-center-right{
          display: table;
          width: 100%;
        }
        .table .left-center-right div{
          display: table-cell;
        }
        .table .left-center-right .left{
          width: 300px;
          background-color: azure;
        }
        .table .left-center-right .center{
          background-color:darkgreen;
        }
        .table .left-center-right .right{
          width: 300px;
          background-color:gainsboro;
        }

        /* 网格布局grid */
        .gird .left-center-right{
          display: grid;
          width: 100%;
          grid-template-columns: 300px auto 300px;
          grid-template-rows: 100px;
        }
        .gird .left-center-right .left{
          /* width: 300px; */
          background-color: indianred;
        }
        .gird .left-center-right .center{
          background-color: lightblue;
        }
        .gird .left-center-right .right{
          /* width: 300px; */
          background-color:darkseagreen;
        }
    </style>
</head>
<body>
    <!-- float方法布局 -->
    <section class="layout float">
      <article class="left-center-right">
        <div class="left">左侧区块</div>
        <div class="center">
          <h3>中间区块</h3>
          float布局的中间部分
          <p>float布局的中间部分</p>
          <p>float布局的中间部分</p>
          <p>float布局的中间部分</p>
          <p>float布局的中间部分</p>
          <p>float布局的中间部分</p>
        </div>
        <div class="right">右侧区块</div>
      </article>
    </section>
    <!--优点：
            兼容性强
        缺点：
            脱离正常的文档流，子元素设置浮动后会导致父元素高度塌陷
          清浮动：
            1.给父元素设置高度
            2.使用伪元素方法在元素内容之后加一个空内容，转成表格元素，设置左右两侧不能有浮动元素
            代码：
            ul :: after {
                content:"",
                display:table;
                clear:both;
            } -->


    <!-- 定位position -->
    <section class="layout position">
      <article class="left-center-right">
        <div class="left">左侧区块</div>
        <div class="center">
          <h3>中间区块</h3>
          position布局的中间部分
          <p>position布局的中间部分</p>
          <p>position布局的中间部分</p>
          <p>position布局的中间部分</p>
          <p>position布局的中间部分</p>
          <p>position布局的中间部分</p>
          <p>position布局的中间部分</p>
        </div>
        <div class="right">右侧区块</div>
      </article>
    </section>
    <!--优点：
            快捷，配合js使用的话非常快
        缺点：
            父元素脱离了文档流，意味着他下边所有的子元素也会脱离文档流，导致可使用性较差 -->


    <!-- 弹性盒子flex -->
    <section class="layout flex">
      <article class="left-center-right">
        <nav class="left">左侧区块</nav>
        <nav class="center">
          <h3>中间区块</h3>
          flex布局的中间部分
          <p>flex布局的中间部分</p>
          <p>flex布局的中间部分</p>
          <p>flex布局的中间部分</p>
          <p>flex布局的中间部分</p>
          <p>flex布局的中间部分</p>
          <p>flex布局的中间部分</p>
          <p>flex布局的中间部分</p>
          <p>flex布局的中间部分</p>
        </nav>
        <nav class="right">右侧区块</nav>
      </article>
    </section>
    <!--优点：
          是在浮动布局和定位布局之后，css3中新出的布局方式，他就是为了解决上述两个
          布局方式的不足诞生的，是比较完美的布局方案 -->


    <!-- table表格布局 -->
    <section class="layout table">
      <article class="left-center-right">
        <div class="left">左侧区块</div>
        <div class="center">
          <h3>中间区块</h3>
          table布局的中间部分
          <p>table布局的中间部分</p>
          <p>table布局的中间部分</p>
          <p>table布局的中间部分</p>
          <p>table布局的中间部分</p>
          <p>table布局的中间部分</p>
          <p>table布局的中间部分</p>
          <p>table布局的中间部分</p>
          <p>table布局的中间部分</p>
          <p>table布局的中间部分</p>
        </div>
        <div class="right">右侧区块</div>
      </article>
    </section>
    <!--优点：
            兼容性强
            改版更方便，只需改css文件
            加载速度快
          缺点：
            seo效果不好 -->


    <!-- gird网格布局，瀑布流 -->
    <section class="layout gird">
      <article class="left-center-right">
        <div class="left">左侧区块</div>
        <div class="center">
          <h3>中间区块</h3>
          gird网格布局的中间部分
          <p>gird网格布局的中间部分</p>
          <p>gird网格布局的中间部分</p>
          <p>gird网格布局的中间部分</p>
          <p>gird网格布局的中间部分</p>
          <p>gird网格布局的中间部分</p>
        </div>
        <div class="right">右侧区块</div>
      </article>
    </section>
    <!--优点：
          更容易对齐和调整；
          更适合响应式设计；
          更容易理解；
          代码量简化很多。
        缺点：
          可读性较差；
          当网格布局的行和列数较多时，代码会变得很冗长和难以阅读。 -->

      <!-- 不设置两侧元素高度时，中间部分内容增多高度增大时两侧自动撑开的有flex、table布局 -->
</body>
</html>

1.包含了每种布局方式的原理和优缺点：

2.条件高度已知换成当不设置两侧元素高度时，中间部分内容增多时想让两侧元素也随之自动撑开的有flex（推荐使用）、table布局、grid布局；

3.语义化标签，拒绝通篇div

section区块划分

article表示容器

div三个块

h3标题

p段落内容