如何用CSS做出各种布局

在用css做布局之前先要了解盒子模型，以及要了解文档流的概念。

如何做出左右及左中右布局

布局图
常见的可以用内联元素<span>左</span><span>中</span> <span>右</span>
也可用也可把块元素转换为inline-block

<div style="display:inline-block">左</div>
<div style="display:inline-block">中</div>
<div style="display:inline-block">右</div>

如何做出水平居中布局

水平居中
水平居中最简单的方法margin: 0 auto;如果没有用可能是
1、元素没有设置宽度，没有宽度怎么居中无法居中
2、设置了宽度依然不好使，你设置的是行内元素吧。

可把父div改为text-align:center，子div改为display:inline-block
html部分代码为<div class=wrapper><div class=inner>1</div></div>
css代码为

.inner{
  border:1px solid red;
  display:inline-block; 
}
.wrapper{
  border:2px solid yellow;
  text-align:center;
}

如何做出垂直居中

垂直居中
其部分html代码为<div class="box box1"> <span>垂直居中</span> </div>

1. 直接用display:table-cell;

.box1{
    display: table-cell;
    vertical-align: middle;
    height:200px;
    border:1px solid ;
    text-align: center;        
}

2. 用position脱离文档流，即使用定位来垂直居中：父节点使用的是相对定位，子节点使用绝对定位，通过定位位置的设置，然后利用负边距来实现垂直居中。

.box1{position:relative;
      border:1px solid;
      height:200px;
}
.box1 div{
            position: absolute;
            width:100px;
            height: 50px;
            top:50%;
            left:50%;
            margin-left:-50px;
            margin-top:-25px;
            text-align: center;
        }

一些经验

1. 可在项目开头将所有元素的margin，padding清零，并将box-sizing设为border-box
2. span元素不能设置宽高，span里最好不要放div，span等内联元素设置margin左右有用，设置上下margin无用
3. 在运用伪类 ::before,::after时要用content=“”，否则将无效。