开始

在这里总结一下CSS中的布局技巧，说明每个布局的应用场景并给出小案例。在CSS中的布局技巧有：浮动、定位、弹性盒子布局、grid布局、表格布局等。这里我们根据单列布局、两列布局和三列布局的标准来进行展开：

🏵 单列布局

在常见的单列布局中，常见的有两种：

• 上中下等宽
• 上下等宽、中间内容区偏窄

下面是单列布局的实现过程

实现第一种方式：可以将 header , content, footer 统一设置相等宽度，然后设置 margin:auto 即可实现居中：

实现第二种方式：可以将 header 和 footer 的宽度设置为100%，然后设置内容宽度稍窄一些，然后对内容区进行居中即可：

以下是实现单列布局第一种方式的代码：

<!-- html结构代码 -->
<header></header>
<div class="content"></div>
<footer></footer>

<!-- css代码 -->
<style>
    header{ 
     margin:0 auto; 
     max-width: 960px; 
     height:100px; 

    } 
    .content{ 
     margin: 0 auto; 
     max-width: 960px; 
     height: 400px; 

    } 
    .footer{ 
     margin: 0 auto; 
     max-width: 960px; 
     height: 100px; 
    }
</style>

以下是实现单列布局第二种方式的代码：

<!-- html结构代码 -->
<header></header>
<div class="content"></div>
<footer></footer>

<!-- css代码 -->
<style>
    header{ 
     width:100%; 
     height:100px; 

    } 
    .content{ 
     margin: 0 auto; 
     max-width: 960px; 
     height: 400px; 

    } 
    .footer{ 
     width:100%;
     height: 100px; 
    }
</style>

应用场景：

目前淘宝、知乎等的首页就是采用单列布局。

🏵 两列布局

两列布局是一列固定宽度，另一列自适应宽度。 实现方式有：

• 浮动
• 定位
• 弹性布局
• grid布局

🌸 浮动

效果图如下：

该图是左列固定宽度，右边是自适应宽度，具体代码如下：

<!-- html结构代码 -->
<div class="container">
  <div class="left">left</div>
  <div class="right">right</div>
</div>
<!-- css代码 -->
<style>
  .container {
    width: 800px;
    border: 1px solid black;
    height: 300px;
    text-align: center;
    font-size: 30px;
  }
  .left {
    width: 100px;
    background-color: skyblue;
    height: 300px;
    line-height: 300px;
    float: left;
  }
  .right {
    background-color: rgb(230, 160, 230);
    height: 300px;
    line-height: 300px;
  }
</style>

在采用浮动布局时需要注意，浮动会带来一些副作用：比如浮动元素的父元素高度会塌陷，会影响后面兄弟元素的位置。正是因为有这些副作用，因此还需要清除浮动，方法有很多，下面列举的都可以用来清除浮动影响：

方案一： 给父元素指定高度。

方案二： 给父元素也设置浮动，带来其他影响。

方案三：给父元素设置 overflow:hidden 。

方案四：在所有浮动元素的最后面，添加一个块级元素，并给该块级元素设置 clear:both 。

方案五：给浮动元素的父元素，设置伪元素，通过伪元素清除浮动，原理与方案四相同。===> 推荐使用

上面代码是给父元素设置高度来解决。

🌸定位

通过相对定位和绝对定位实现，需要三个div，其中一个div是父容器，包含两个子元素。
给父容器设置相对定位是因为可以让其设置绝对定位的子元素相对它进行移动；

两个子元素设置绝对定位，给上边的子元素设置宽度，下边的子元素设置left,值为上边子元素的宽度，再设置right:0。 给上边的子元素设置绝对定位可以让下边的子元素跟它在同一行。

未完，休息一下继续写~