CSS之常见布局

整理整理CSS几种布局方式，布局方式实现方式种类繁多，目前仅仅挑选其中最常用的几种布局进行记录。

1、左右布局(浮动布局)

（1）适用范围：常用于左边固定宽度，右边自适应宽度的布局。PS：使用浮动时，千万记得清除浮动，避免出现高度塌陷等bug。

（2）HTML代码如下：

HTML：
<div class="left">
    <h2>左！</h2>
    <p>La La Latch</p>
</div>
<div class="content">
    <h2>右！</h2>
    <p>Attention</p>
</div>
复制代码

（3）CSS代码如下：

CSS：
    * {
        margin: 0;
        padding: 0;
    }

    .left {
        float: left;
        width: 220px;
        text-align: center;
        color: #ffffff;
        background-color: #000000;
    }

    .content {
        margin-left: 220px;
        text-align: center;
        background-color: red;
    }
复制代码

（4）效果如下图所示：

2、左中右布局

（1）适用范围：常用于左边、右边固定宽度，中间自适应宽度的布局。PS：同理，使用浮动时，千万记得清除浮动，避免出现高度塌陷等bug。

（2）HTML代码如下：

HTML：
<div class="layoutBox">
    <div class="left-right-center">
        <div class="left">左</div>
        <div class="right">右</div>
        <div class="center">中</div>
    </div>
</div>
复制代码

（3）CSS代码如下：

CSS：
    * {
        margin: 0;
        padding: 0;
    }
    .layoutBox{
        margin-top: 10px;
    }

    .left{
        float: left;
        width: 300px;
        height: 100px;
        background-color: #000000;
        text-align: center;
        font-size: 20px;
        color: #ffffff;
    }
    .center{
        height: 100px;
        text-align: center;
        background-color: red;
    }
    .right{
        float: right;
        width: 300px;
        height: 100px;
        background-color: #0c8ac5;
        text-align: center;
        font-size: 20px;
        color: #fdf6e3;
    }
  
复制代码

（4）效果如下图所示：

3、水平居中——通过margin:0 auto;实现的最常用的居中方法

（1）适用范围：常用于父元素具有确定的width和height时的居中布局。

（2）HTML代码如下：

HTML：
<div class="layoutBox">
    <div class="center"></div>
</div>
复制代码

（3）CSS代码如下：

CSS：
      .layoutBox {
        width: 100px;
        height: 100px;
        background-color: #000000;
    }
    .center{
        width: 50px;
        height: 50px;
        margin: 0 auto;
        text-align: center;
        background-color: red;
    }

  
复制代码

（4）效果如下图所示：

4、水平居中——通过flex弹性布局实现居中的布局

（1）适用范围：常用于不容易实现的特殊布局，同样对于普通的的水平居中布局亦是手到擒来。

（2）HTML代码如下：

HTML：
<div class="layoutBox">
    <div class="center"></div>
</div>
复制代码

（3）CSS代码如下：

CSS：
    .layoutBox {
        width: 100px;
        height: 100px;
        display: flex;
        flex-direction: column;
        background-color: blue;
    }
    .center{
        width: 50px;
        height: 50px;
        align-self: center;
        background-color: red;
    }
复制代码

（4）效果如下图所示：

5、垂直居中——通过line-height实现居中的方法

（1）适用范围：适用范围：常用于子元素为单行文本的情况的垂直居中布局。

（2）HTML代码如下：

HTML：
<div class="layoutBox">
    <div class="center">垂直</div>
</div>
复制代码

（3）CSS代码如下：

CSS：
        .layoutBox {
        width: 100px;
        height: 100px;
        background-color: blue;
    }

    .center {
        width: 50px;
        height: 50px;
        line-height: 100px;
    }
复制代码

（4）效果如下图所示：

6、 垂直居中——通过flex弹性布局的垂直居中方法

（1）适用范围：常用于不容易实现的特殊布局，同样对于普通的的垂直居中布局亦是小菜一碟。

（2）HTML代码如下：

HTML：
<div class="layoutBox">
    <div class="center">垂直</div>
</div>
复制代码

（3）CSS代码如下：

CSS：
        .layoutBox {
        width: 100px;
        height: 100px;
        display: flex;
        flex-direction: row;
        background-color: blue;
    }
    .center{
        width: 50px;
        height: 50px;
        align-self: center;
        background-color: red;
    }
复制代码

（4）效果如下图所示：

转载于:https://juejin.im/post/5bcbdddb6fb9a05d1d2e4564