一文搞定CSS布局

636 阅读4分钟

一个问题引发一场思考

假设高度已知,请写出三栏布局,其中左栏,右栏宽度各为300px,中间自适应?

常想到的解决办法有三种:浮动布局,绝对定位布局,flex布局

当然还有其他两种解决方案:table布局,grid布局

解决方案有了,怎么实现?每种方案的优缺点是什么?下面我们每种方案分析一下。

问题解决方案

浮动布局

<section class="layout float">
    <style media="screen">
        .layout.float .left{
          float:left;
          width:300px;
          background: red;
        }
        .layout.float .right{
          float:right;
          width:300px;
          background:blue;
        }
        .layout.float .center{
          background:yellow;
        }
    </style>
    <article class="left-right-center">
        <div class="left"></div>
        <div class="right"></div>
        <div class="center">
          <h1>浮动解决方案</h1>
          这是中间部分
        </div>
    </article>
</section>
  • 缺点:浮动是脱离文档流的,有的时候需要清除浮动,处理好浮动周边元素的关系。

  • 优点:兼容性比较好。

绝对定位布局

<section class="layout absolute">
    <style>
        .layout.absolute .left-center-right>div{
          position: absolute;
        }
        .layout.absolute .left{
          left: 0;
          width: 300px;
          background: red;
        }
        .layout.absolute .center{
          left: 300px;
          right: 300px;
          background: yellow;
        }
        .layout.absolute .right{
          right: 0;
          width: 300px;
          background: blue;
        }
    </style>
    <article class="left-center-right">
        <div class="left"></div>
        <div class="center">
          <h1>绝对定位方案</h1>
          这是中间部分
        </div>
        <div class="right"></div>
    </article>
</section>
  • 缺点:该布局脱离文档流,所以子元素也必须脱离文档流,因此可使用性比较差。

  • 优点:快捷,比较不容易出问题。

flex布局

<section class="layout flexbox">
    <style>
        .layout.flexbox{
          margin-top: 120px;
        }
        .layout.flexbox .left-center-right{
          display: flex;
        }
        .layout.flexbox .left{
          width: 300px;
          background: red;
        }
        .layout.flexbox .center{
          flex: 1;
          background: yellow;
        }
        .layout.flexbox .right{
          width: 300px;
          background: blue;
        }
    </style>
    <article class="left-center-right">
        <div class="left"></div>
        <div class="center">
          <h1>flex方案</h1>
          这是中间部分
        </div>
        <div class="right"></div>
    </article>
</section>
  • 缺点 :兼容性比较差(css3的属性),不兼容IE8及以下
  • 优点 :非常有效的解决了浮动和绝对定位的问题

Table布局

<section class="layout table">
    <style>
        .layout.table .left-center-right{
          width:100%;
          display:table;
        }
        .layout.table .left-center-right>div{
          display: table-cell;
        }
        .layout.table .left{
          width:300px;
          background: red;
        }
        .layout.table .center{
          background: yellow;
          height: 100px;
        }
        .layout.table .right{
          width:300px;
          background: blue;
        }
    </style>
    <article class="left-center-right">
        <div class="left"></div>
        <div class="center">
          <h1>table方案</h1>
          这是中间部分
        </div>
        <div class="right"></div>
    </article>
</section>
  • 缺点 :操作繁琐,当三栏中其中某一栏高度超出时,其他两栏的高度也会自动跟着调整(不符合某些场景)
  • 优点 :兼容性非常好,补缺了flex布局兼容的问题

Grid布局

<sction class="layout grid">
    <style>
        .layout.grid .left-center-right{
          margin-top:10px;
          display:grid;
          width:100%;
          grid-template-rows:100px;
          grid-template-columns:300px auto 300px;
        }
        .layout.grid .left{
          background: red;
        }
        .layout.grid .center{
          background: yellow;
        }
        .layout.grid .right{
          background: blue;
        }
    </style>
    <article class="left-center-right">
        <div class="left"></div>
        <div class="center">
          <h1>网格布局方案</h1>
          这是中间部分
        </div>
        <div class="right"></div>
    </article>
</sction>
  • 优点: Grid(网格) 布局使我们能够比以往任何时候都可以更灵活构建和控制自定义网格 ; 能够将网页分成具有简单属性的行和列来完成我们需要的网格布局。
  • 缺点:兼容性问题

延展问题

如何清除浮动,有几种清除浮动的方式,每种方式的优缺点?

juejin.cn/post/684490…

高度不固定情况下,浮动方案,浮动网格布局都有问题,每种怎么解决?

浮动方案优化

问题的原因

因为浮动的基本原理,中间的内容向左浮动的时候,被左边的块挡住,所以在中间部分排,当文案超出以后,左侧没有遮挡物,就会溢出。

问题的解决

可以通过创建BFC的方式解决。

BFC相关知识点:

developer.mozilla.org/zh-CN/docs/…

juejin.cn/post/684490…

.layout.float .center{
    background:yellow;
    overflow: hidden;
 }

  • 另一种三栏布局:上下宽度固定,中间自适应,如何实现
  • 两栏布局相关
    • 左宽度固定,右自适应
    • 右宽度固定,左自适应
    • 上高度固定,下自适应
    • 下高度固定,上自适应