十三.CSS布局设计汇总（终极版）

一.两列布局（七种方案）

两列布局一般情况下是指定宽与自适应布局，两列中左列是确定的宽度，右列是自动填满剩余所有空间的一种布局效果；

左列自适应, 右列定宽(方案汇总)

• 1.float + margin 属性实现；
• 2.float + overflow 属性实现；
• 3.display 属性的 table 相关值实现；
• 4.使用绝对定位实现；
• 5.使用 flex 实现；
• 6.使用 Grid 实现；

• 如何对下面这个盒子实行左列顶宽右列自适应？

<style>
      .left {
        width: 200px;
        height: 500px;
        background-color: red;
      }
      .right {
        height: 500px;
        background-color: blue;
      }
</style>

<div class="wrapper">
      <div class="left">左边定宽</div>
      <div class="right">右边自适应</div>
</div>
复制代码

1.1方案一：float + margin 属性实现

.left {
        float: left;
      }
      .right {
        margin-left: 200px;
      }

优点：实现方式简单
缺点：自适应元素 margin 属性值需要与定宽元素的 width  属性值保持一致；
     定宽元素浮动与自适应元素不浮动导致浏览器兼容性不好；
复制代码

1.2方案二(1): float + margin(fix) 实现

 /*
       第一步：给左边一个盒子设置左浮动(float:left;)；
      右边的盒子套一个 right-fix 并给 right-fix设置右浮动 float: right; 和自适应宽度 width: 100%; 
      */
      .left {
        float: left;
      }
      .right-fix {
        float: right;
        width: 100%;
      }
      /* 第二步： 让 right-fix 这个盒子反向移动左盒子宽度的大小 margin-left:-200px; */
      .right-fix {
        margin-left: -200px;
      }
      /* 第三步:給左盒子添加一个相对定位，提高他的层级性，从而显示出来 */
      .left {
        position: relative; /* 右盒子还会跑左盒子下面 */
      }
      /* 第四步：给右边的子容器设置一个 margin-left：200px； */
      .right {
        margin-left: 200px;
      }
    </style>
    
    <div class="left">左边</div>
      <div class="right-fix">
        <div class="right">右边</div>
    </div>
复制代码

1.3方案二(2)： float + overflow 属性实现；

具体的：

• 1.给左边固定宽度盒子加浮动属性float: left;
• 2.给右边自适应宽度盒子加浮动属性 overflow: hidden;;

.left {
        float: left;
      }
.right {
        overflow: hidden;
      }
优点: 简单易用 全兼容
缺点: overflow 属性不仅解决了两列布局问题，同时设置了内容溢出的情况；
复制代码

1.4方案三：display 属性的 table 相关值实现

• 给父元素设置display：table；和百分百宽度
• 给子元素设置display：table-cell；

  .wrapper {
        display: table;
        width: 100%;
      }
  .left,.right {
        display: table-cell;
      }
优点: 浏览器兼容比较好
缺点: 将所有元素的 display 属性设置为 table 相关值，受到相应制约；
复制代码

1.5方法四：使用绝对定位实现

1.给左边盒子设置定位 
     .left {
        position: absolute;
        top: 0;
        left: 0;
      }
2.给右边的盒子设置
       .right {
        position: absolute;
        top: 0;
        left: 200px;
        right: 0;
      }
 3.子绝父相
      .wrapper{
         position: relative;
      }
复制代码

1.6方案五：使用 flex 实现

• 1.给父元素设置display: flex;
• 2.给右边自适应设置 flex:1;这相当于100%-左定宽

 .wrapper {
        display: flex; /* 子元素 - 水平排列 */
      }
      
.right {
        flex: 1; /* 剩余部分让他填充 */
      }
复制代码

1.7方案六：使用 Grid 实现

• 1.给父元素设置 display: grid;
• 2.去掉左右盒子的宽度并给父元素设置 grid-template-columns:400px auto;这表示左边设置400宽度，右边自适应。

 .wrapper {
        /* 第一步:定义网格布局 */
        display: grid;
        /* 第二步:清除两个子盒子的宽度 */
        /* 第三步：设置每个列的宽度  左 - 400px  右 - 自适应 */
        grid-template-columns: 400px auto;
      }
复制代码

二.三列布局(最右自适应)

我们来实现一下左中定宽，右侧自适应的三列布局。

 .left {
        width: 100px;
        height: 100px;
        background-color: red;
      }
 .center {
        width: 200px;
        height: 150px;
        background-color: green;
      }
 .right {
        height: 200px;
        background-color: blue;
      }

  <div class="wrapper">
      <div class="left">左边定宽</div>
      <div class="center">中间定宽</div>
      <div class="right">右边自适应</div>
 </div>
复制代码

2.1方案一：float + margin 属性实现；

左中设置 float: left;右设置 margin-left 取值为左盒子的总宽

.left,.center {
        float: left;
      }
.right {
        margin-left: 300px;
      }
复制代码

2.2方案二：float + overflow 属性实现；

左中设置 float: left;右设置 overflow: hidden;

 .left, .center {
        float: left;
      }
 .right {
        overflow: hidden;
      }
复制代码

2.3方案三： display 属性的 table 相关值实现

• 给父元素设置 display: table;width: 100%;
• 给子元素设置 display: table-cell;

 .wrapper {
        display: table;
        width: 100%;
      }
 .left,
 .center,
 .right {
        display: table-cell;
      }

/*高度也会被拉伸成等高的*/
复制代码

2.4方案四：使用 flex 实现

• 给父元素设置 display: flex;
• 给自适应子元素设置 flex：1；

2.5方案五：使用 Grid 实现

给父元素设置 display: grid;
去除子元素的宽度；
grid-template-columns:200px 200px auto;
复制代码

三.三列布局(两侧定宽,中间自适应)

• 1.圣杯布局方法
• 2.双飞翼布局方法
• 3.使用 Gird 实现
• 4.使用 table 实现
• 5.使用 flex 实现
• 6.使用 position 实现

3.1圣杯布局

• 圣杯布局是来源于该布局效果类似圣杯而得名。简单来说，就是指三行三列布局；
• 圣杯布局核心：主要是实现中间主体部分中的左右定宽+中间自适应的布局效果；

与其他不同的是，圣杯把中间的自适应部分放在最前面，让他最先加载

步骤：

• 第一步: 三个容器横向排列 float：left
  已经在一行显示啦 => center 100%，left 和 right 因为没有剩余的空间 所以掉下去啦
  
• 第二步: 为了给 left 和 right 容器留出一些空间 ，把 center 往中间进行挤压 给父元素添加 padding-left:210px;padding-right:210px;取值为左盒子和右盒子的宽度
  
• 第三步: 把 left 移到它原本位置 => left 应该在 center 的前面
  margin-left:-100%;这表示把 left 移动到和 center 重叠
  把 left 移动在理想的位置 => 定位 relative 作用是为了让 left 生效，设置 left:-210px;
  
• 第四步: 把 right 移到它原本位置 => right 应该在 center 的后面
  margin-left:-200px;
  position: relative;
  right:-210px;

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>三栏布局，左右定宽中间自适应</title>
    <style>
      .left {
        width: 200px;
        height: 500px;
        background-color: skyblue;
      }
      .center {
        height: 500px;
        background-color: rgb(159, 197, 89);
      }
      .right {
        width: 200px;
        height: 500px;
        background-color: pink;
      }
      /* 第一步：三个盒子均设置左浮动 */
      .left,
      .center,
      .right {
        float: left;
      }
      /* 第二步：中间设置百分之百宽度 */
      .center {
        width: 100%;
      }
      /* 第三步:给父元素填充，挤压中间盒子内容，留出位置给左右盒子 */
      .parent {
        padding-left: 210px;
        padding-right: 210px;
      }
      /* 第四步：移动左盒子 */
      .left {
        /* 左盒子应该在center盒子前面，所以左盒子向左移动中间盒子的100% ，左边和中间盒子对齐*/
        margin-left: -100%;
        /* 左盒子不脱离文档流定位，没设置left则默认为0，left=-210px表示向左移动210px */
        position: relative;
        left: -210px;
      }
      /* 第五步：移动右盒子 */
      .right {
        /* 右盒子向左移动200px右边和center右边对齐 */
        margin-left: -200px;
        /* 左盒子不脱离文档流定位 ，定位到右边margin上面*/
        position: relative;
        right: -210px;
      }
    </style>
  </head>
  <body>
    <div class="parent">
      <div class="center">123213</div>
      <div class="left"></div>
      <div class="right"></div>
    </div>
  </body>
</html>
复制代码

3.2双飞翼布局

双飞翼布局最早是淘宝团队提出，是针对圣杯布局的优化解决方案。
在中间自适应盒子中又套了一个子容器，主要是优化了圣杯布局中开启定位的问题。

步骤：

• 第一步: 三个容器(left,right,center-wrapper)横向排列 float：left
  已经在一行显示啦 => center-wrapper 100%，left 和 right 因为没有剩余的空间 所以掉下去啦
  
• 第二步: 为了给 left 和 right 容器留出一些空间 ，把 center 往中间进行挤压 给 cengte 的子元素添加 外间距 margin-left: 310px; margin-right: 310px;取值为左盒子和右盒子的宽度
  
• 第三步: 左盒子位置的移动 => 移动到她原本的位置
  margin-left: -100%;
  
• 第四步:右盒子位置的移动 => 移动到她原本的位置
  margin-left: -300px;

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>三栏布局，左右定宽中间自适应</title>
    <style>
      .left {
        width: 300px;
        height: 500px;
        background-color: skyblue;
      }
      .right {
        width: 300px;
        height: 500px;
        background-color: pink;
      }
      .center {
        height: 500px;
        background-color: purple;
      }
      /* 第一步：左盒子，外套，右盒子设置左浮动 */
      .left,
      .center-wrapper,
      .right {
        float: left;
      }
      /* 第二步：中间外套设置百分之百宽 */
      .center-wrapper {
        width: 100%;
      }
      /* 第三步：给center设置margin */
      .center {
        margin-left: 310px;
        margin-right: 310px;
      }
      /* 第四步:移动盒子 */
      .left {
        margin-left: -100%; /*移动center的宽度*/
      }
      .right {
        margin-left: -300px; /*移动自己的宽度*/
      }
    </style>
  </head>
  <body>
    <div class="parent">
      <div class="center-wrapper">
        <div class="center">123213</div>
      </div>
      <div class="left"></div>
      <div class="right"></div>
    </div>
  </body>
</html>
复制代码

3.3 float + margin/overflow

• 方法1：左右盒子浮动，结构先写左右再写center，给中间盒子加个overflow：hidden;
• 方法2：左右盒子浮动，结构先写左右再写center，给中间盒子加个margin-left,和margin-right值为左右盒子的宽度;

<style>
      .parent {
      }
      .left {
        float: left;
        width: 200px;
        height: 500px;
        background-color: skyblue;
      }
      .center {
        height: 500px;
        background-color: rgb(159, 197, 89);
        /* overflow: hidden; */
        margin-left: 220px;
        margin-right: 220px;
      }
      .right {
        float: right;
        width: 200px;
        height: 500px;
        background-color: pink;
      }
    </style>
  </head>
  <body>
    <div class="parent">
      <div class="left"></div>
      <div class="right"></div>
      <div class="center">12312312</div>
    </div>
复制代码

3.4定位

• 子绝父相，左右盒子定位在左右，中间盒子设置margin值，要大于等于左右盒子的宽度

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>三栏布局，左右定宽中间自适应</title>
    <style>
      .parent {
        position: relative;
      }
      .left {
        width: 200px;
        height: 500px;
        background-color: skyblue;
        position: absolute;
        top: 0;
        left: 0;
      }
      .center {
        height: 500px;
        background-color: rgb(159, 197, 89);
        margin-left: 210px;
        margin-right: 210px;
      }
      .right {
        width: 200px;
        height: 500px;
        background-color: pink;
        position: absolute;
        top: 0;
        right: 0;
      }
    </style>
  </head>
  <body>
    <div class="parent">
      <div class="left"></div>
      <div class="center">1231231</div>
      <div class="right"></div>
    </div>
  </body>
</html>
复制代码

3.5利用flex

父元素设置display：flex; 中间自适应元素占据剩余部分：flex:1;

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>三栏布局，左右定宽中间自适应</title>
    <style>
      .parent {
        display: flex;
      }
      .left {
        width: 200px;
        height: 500px;
        background-color: skyblue;
      }
      .center {
        flex: 1;
        height: 500px;
        background-color: rgb(159, 197, 89);
        margin: 0 20px;
      }
      .right {
        width: 200px;
        height: 500px;
        background-color: pink;
      }
    </style>
  </head>
  <body>
  <div class="parent">
      <div class="left"></div>
      <div class="center">111</div>
      <div class="right"></div>
    </div>
  </body>
</html>
复制代码

3.6利用table和table-cell

table:父元素设置display: table;子元素左右设置 display: table-cell;
子元素宽度设置100%，
父元素宽度设置100%，
复制代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>三栏布局，左右定宽中间自适应</title>
    <style>
      .parent {
        display: table;
        width: 100%;
      }
      .left,
      .right {
        display: table-cell;
      }
      .left {
        width: 200px;
        height: 500px;
        background-color: skyblue;
      }
      .center {
        height: 500px;
        width: 100%;
        background-color: rgb(159, 197, 89);
      }
      .right {
        width: 200px;
        height: 500px;
        background-color: pink;
      }
    </style>
  </head>
  <body>
    <div class="parent">
      <div class="left"></div>
      <div class="center">1111111111111</div>
      <div class="right"></div>
    </div>
  </body>
</html>
复制代码

四.等分布局(均等分)

• 等分布局就是指一行被分为若干列，每一列的宽度是相同的值；

4.1方法一：float 属性实现等分布局效果

给各个元素设置浮动和宽度

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      html,
      body {
        margin: 0;
        padding: 0;
      }
      .wrapper {
        background-color: blue;
        /* height: 400px;方法一 */
        /* overflow: hidden;方法二 */
      }
      .contain {
        width: 25%;
        background-color: pink;
        height: 300px;
      }
      .contain {
        float: left;
      }
      /* 方法三:那个父元素需要清除浮动影响，他就调用这个类 */
      .clearfix1::after {
        content: "";
        display: block;
        clear: both;
      }
      /* 方法四:那个父元素需要清除浮动影响，他就调用这个类 */
      .clearfix2:after,
      .clearfix2:before {
        content: "";
        display: table;
      }
      .clearfix2:after {
        clear: both;
      }
      .clearfix2 {
        *zoom: 1;
      }
      /* 如何让他有间距呢？ */
      .contain {
        border-left: 20px solid rgb(198, 224, 148);
        box-sizing: border-box;
      }
      .wrapper {
        /* 最左边不想让他出来,让父元素左移 */
        margin-left: -20px;
      }
    </style>
  </head>
  <body>
    <div class="wrapper clearfix1">
      <div class="contain">2222</div>
      <div class="contain">2222</div>
      <div class="contain">2222</div>
      <div class="contain">2222</div>
    </div>
  </body>
</html>

复制代码

清除浮动

 1.固定的高度  height   固定写死（不推荐）

 2.父元素加overflow:hidden  => BFC 特点: 把浮动的高度给计算进去
    优点：代码简洁
    缺点：内容增多的时候容易造成不会自动换行导致内容被隐藏掉，无法显示要溢出的元素。

 3.clear:both 清除浮动 => 加在浮动子元素的末尾   <div style="clear:both"></div>
    优点：通俗易懂，方便
    缺点：添加无意义标签，语义化差

 4.利用伪元素::after    =》 clearfix 公用类名  =  直接在html中进行调用 (最常用)
               .clearfix::after{
                                  content: '';
                                  display: block;
                                  clear: both;
                                  }
            父级调用<div id="parent" class="clearfix">
   优点：符合闭合浮动思想，结构语义化正确
   缺点：ie6-7不支持伪元素：after，使用zoom:1触发hasLayout.

 5.使用before和after双伪元素清除浮动

     .clearfix:after,.clearfix:before{
        content: "";
        display: table;
    }
    .clearfix:after{
        clear: both;
    }
    .clearfix{
        *zoom: 1;
    }

 <div class="fahter clearfix">
        <div class="big">big</div>
        <div class="small">small</div>
 </div>
 <div class="footer"></div>
优点：代码更简洁
缺点：用zoom:1触发hasLayout.
推荐使用
复制代码

4.2方法二.display 属性的值有关 table 实现等分布局效果；

给父元素添加 display:table;
给子元素添加 display: table-cell;

4.3方法三.flex 属性实现等分布局效果；

父元素设置 display: flex;
子元素设置都 flex:1;

4.4**.Grid 属性实现等分布局效果；**

4.5用 flex 实现有间隙的等分布局

• 1.父元素设置 display: flex;子元素设置 flex: 1;
• 2.给子元素设置 padding-left: 20px;并内嵌一个盒子，将子元素的颜色加到内嵌的盒子里面。
• 3.给父元素设置 margin-left: -20px;并删除其 width: 100%;

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>等分布局解决方法3-flex</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }

      #parent {
        //width: 100%;
        /* 子元素排列   =  水平排列 */
        display: flex;
        margin-left: -20px;
      }

      .col1,
      .col2,
      .col3,
      .col4 {
        height: 300px;
        /* 四个容器  占1等份  1/4  = 100%/ 4 */
        flex: 1;
        padding-left: 20px;
      }
      .inner {
        height: 300px;
      }
      .col1 .inner {
        background-color: hotpink;
      }

      .col2 .inner {
        background-color: lightblue;
      }

      .col3 .inner {
        background-color: green;
      }

      .col4 .inner {
        background-color: yellow;
      }
    </style>
  </head>

  <body>
    <!-- 作为父级容器 -->
    <div id="parent">
      <div class="col1"><div class="inner"></div></div>
      <div class="col2"><div class="inner"></div></div>
      <div class="col3"><div class="inner"></div></div>
      <div class="col4"><div class="inner"></div></div>
    </div>
  </body>
</html>
复制代码

五.等高分局

等高布局就是一行被划分成若干列，每一列的高度是相同的值；

display 属性的值有关 table 实现

• 父元素设置 display: table;
• 子元素设置 display: table-cell;

padding + margin 属性实现等高布局效果

• 给子元素设置足够大的内填充和外间距
  padding-bottom:9999px;
  margin-bottom:-9999px;

  六.PC端和移动端用到的布局(图解小米官网)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小米</title>
    <link rel="stylesheet" href="mi.css">
</head>
<body>
    <!-- header -->
    <!-- 两列 - 左自适应  右自适应 -->
    <div class="header-wrap">
        <div class="header main-md">
          
            <div class="hd-right"></div>
            <div class="hd-left"></div>
        </div>
    </div>

    <!-- logo -->
    <!-- 三列布局   左定宽  右定宽  中间自适应 
    center 结构的最后    最后加载  =>  优化    center 结构放在最前面   => 圣杯布局(优化结构)   center left  right

    => 双飞翼布局   center left  right  (优化定位)
    
    -->
    <div class="logo main-md">
        
        <div class="logo-left"></div>
        <div class="logo-right"></div>
        <div class="logo-center"></div>
        
    </div>

    <!-- banner -->
    <div class="swiper"></div>

    <!-- ad -->
    <!-- 两列布局  左定宽   右自适应    +   等分布局  -  间距  -->
    <div class="ad main-md">
        <div class="ad-left"></div>
        <div class="ad-right">
            <div class="ad-box" style="background-color: blueviolet;"></div>
            <div class="ad-box" style="background-color: green;"></div>
            <div class="ad-box" style="background-color: hotpink;"></div>
        </div>
    </div>

    <!-- content -->
     <!-- 两列布局  左定宽   右自适应    +   等分布局  -  间距  -->
    <div class="content">
        <!-- 手机模块 -->
        <div class="phone-col main-md">
            <!-- 左定宽 -->
            <div class="phone-left"></div>
            <!-- 右自适应 -->
            <div class="phone-right">
                <div class="phone-box" style="background-color: green;"></div>
                <div class="phone-box" style="background-color: gold;"></div>
                <div class="phone-box" style="background-color: red;"></div>
                <div class="phone-box" style="background-color: rebeccapurple;"></div>
                <div class="phone-box" style="background-color: royalblue;"></div>
                <div class="phone-box" style="background-color: green;"></div>
                <div class="phone-box" style="background-color: orange;"></div>
                <div class="phone-box" style="background-color: green;"></div>
            </div>
        </div>

        <!-- 视频模块 -->
        <div class="phone-col main-md">
            <!-- 右自适应 -->
            <div class="phone-right">
                <div class="phone-box" style="background-color: green;"></div>
                <div class="phone-box" style="background-color: gold;"></div>
                <div class="phone-box" style="background-color: red;"></div>
                <div class="phone-box" style="background-color: rebeccapurple;"></div>
            </div>
        </div>
    </div>

    <!-- footer -->
    <div class="footer"></div>
</body>
</html>
复制代码