CSS常见布局

常见布局种类
1.左右布局

image.png

    HTML代码                
        <div class="left"></div>
        <div class="right"></div>

    CSS代码
    .left{
        float: left;
        height: 20px;
        width: 30%;
        background: red;
    }
    .right{
        float: left;
        height: 20px;
        width: 70%;
        background: green;
    }

上面是自适应的两列布局：width拥百分比+float；

image.png

HTML代码
    <div class="wrapper">
          <div class="left"></div>
          <div class="right"></div>
    </div>

CSS代码
    .wrapper{
        width: 500px;
    }
    .left{
        float: left;
        height: 20px;
        width: 30%;
        background: red;
    }
    .right{
        float: left;
        height: 20px;
        width: 70%;
        background: green;
    }

上面是固定宽度的两列布局：width：具体值/父级元素的宽度确定，width+百分比；+float;
如果没有加float的话，不能实现并排的两列布局。

2.三列布局

image.png

HTML代码
    <div class="left">left</div>
    <div class="center">center</div>
    <div class="right">right</div>

CSS代码
    .left{
        float: left;
        height: 20px;
        width: 30%;
        background: red;
    }
    .center{
        float: left;
        height: 20px;
        width: 10%;
        background: yellow;
    }
    .right{
        float: left;
        height: 20px;
        width: 60%;
        background: green;
    }

传统的三列布局依托于float实现

image.png

  HTML代码
    <div class="wrapper">
      <div class="left">left</div>
      <div class="center">center</div>
      <div class="right">right</div>
    </div>

  CSS代码
    .wrapper{
        position: relative;
    }
    .left{
        position: absolute;
        top: 0;
        left: 0; 
        height: 20px;
        width: 30%;
        background: red;
    }
    .center{
        margin-left: 30%; 
        height: 20px;
        width: 10%;
        background: yellow;
    }
    .right{
        position: absolute;
        top: 0;
        right: 0; 
        height: 20px;
        width: 60%;
        background: green;
    }

左右使用绝对定位来实现，中间用margin实现.

image.png

 HTML代码
    <div class="left">left</div>
    <div class="right">right</div>
    <div class="center">center</div>

 CSS代码
  .left{
        float: left;
        height: 20px;
        width: 500px;
        background: red;
    }
    .right{
        float: right;
        height: 20px;
        width: 500px;
        background: green;
    }
    .center{
        margin-left: 500px;
        margin-right: 500px;
        height: 20px;
        background: yellow;
    }

左右模块各自向左右浮动，并设置中间模块的 margin 值使中间模块宽度自适应。

3.水平居中

image.png

块级元素水平居中设置margin: 0 auto;

image.png

在父元素上设置 text-align: center 使文字/图片水平居中。
text-align CSS属性定义行内内容（例如文字）如何相对它的块父元素对齐。text-align 并不控制块元素自己的对齐，只控制它的行内内容的对齐。

4.垂直居中
设置上下pading相等实现居中
绝对定位加上负边距实现居中
vertical-align: middle;实现居中
display: table-cell;实现居中

CSS常见布局

推荐阅读更多精彩内容