Web Development

前言

css布局实际上是前端的入门教程，所谓的前端切图仔主要工作也就是在写 html，css布局。虽然css布局是前端的入门教程，可实际工作中可以发现，并没有几个人掌握了css布局的基本技巧，往往都是margin，padding一把梭搞定，写得慢不说还给之后维护的人看的懵逼。

主旨

本文旨在帮助前端基础不好的同学或一些需要写界面的后台朋友熟悉常规的css布局，能够又快又好的完成前端切图工作。另一方面，本文也可以作为css布局的速查笔记。

常规布局方式

实际上常用的css布局总结来说可以分为3类。两端对齐，等分，居中。基本上一个页面都可以拆分成这3种布局的组合方式。

两端对齐

• 方式一：float（兼容性最好）

.clearfix:before,
.clearfix:after {
  display: table;
  content: '';
}
.clearfix:after {
  clear: both;
}
.fl{
float:left;
}
.fr{
float:right;
}

 <div class="clearfix">
        <div class="fl"></div>
        <div class="fr"></div>
 </div>

• 方式二：flex（最简单）

.flex-justify {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

 <div class="flex-justify">
        <div class="l"></div>
        <div class="r"></div>
 </div>

等分布局(兼容最好，可以多行)

• 方式一：float

.clearfix:before,
.clearfix:after {
  display: table;
  content: '';
}
.clearfix:after {
  clear: both;
}
.list-wrapper {
  margin-left: -20px;(负的间距值)
}
.list-box{
  float: left;
  box-sizing:border-box;
  width: 33.3333%; (100% / 等分个数)
  margin-bottom: 20px;
  padding-left: 20px;(间距值)
}

  <div class="list-wrapper clearfix">
        <div class="list-box">
            <div class="list"></div>
        </div>
        <div class="list-box">
            <div class="list"></div>
        </div>
        <div class="list-box">
            <div class="list"></div>
        </div>
  </div>

• 方式二：flex（最简单，仅单行）

.flex-justify {
  display: flex;
  align-items: center;
}
.list{
  width:33.3333%;(间距可以通过宽度控制)
}

<div class="flex-justify">
        <div class="list"></div>
        <div class="list"></div>
        <div class="list"></div>
</div>

居中布局（涉及块状元素，内联元素，固定宽高，不定宽高）

• 水平居中

text-align(内联元素)

 .text-center{
        text-align: center;
 }
 .item{
        display: inline-block;
 }

  <div class="text-center">
        <div class="item"></div>
  </div>  

margin(块状元素)

.item{
  width:200px;
  margin:0 auto;
}

<div class="item"></div>

position

.parent{
        position: relative;
}
.child{
        position: absolute;
        left: 50%;
        width: 200px; 
        margin-left: -100px; //(负宽度的一半)
}

 <div class="parent">
        <div class="child"></div>
 </div>

flex

.flex-h-center {
  display: flex;
  justify-content: center;
}

 <div class="flex-h-center">
        <div class="child"></div>
 </div>

• 垂直居中
  1.vertical-align

 .parent{
      height:200px;
    background-color: green;
  }
 .parent:after{
      display:inline-block;
      width:0;
      height:100%;
      vertical-align:middle;
      content:'';
  }
  .parent .child{
      display:inline-block;
      width: 200px;
      vertical-align:middle;
    }

 <div class="parent">
        <div class="child"></div>
 </div>

2.transform

.parent{
   position: relative;
   height: 200px;
}
        
.parent .child {
   position: absolute;
   left: 50%;
   transform: translate(-50%, 0);
}

 <div class="parent">
        <div class="child"></div>
 </div>

3.position

.parent{
        position: relative;
}
.child{
        position: absolute;
        top: 50%;
        height: 200px;
        margin-top: -100px;
}

<div class="parent">
        <div class="child"></div>
</div>

4.flex

.flex-v-center {
  display: flex;
  align-items: center;
}

 <div class="flex-v-center">
        <div class="child"></div>
 </div>

• 水平垂直居中
  1.position(固定宽高)

.parent{
  position:relative;
}
.child{
  position:absolute;
  left:50%;
  top:50%;
  width:200px;
  height:200px;
  margin-left:-100px;
  margin-top:-100px;
}

 <div class="parent">
        <div class="child"></div>
 </div>

2.flex(不定宽高)

.flex-center{
  display: flex;
  align-items: center;
}

<div class="flex-center">
        <div class="child"></div>
</div>

3.transform(不定宽高)

.parent{
   position:relative;
} 
.child{
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
}