在用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>
- 直接用display:table-cell;
.box1{
display: table-cell;
vertical-align: middle;
height:200px;
border:1px solid ;
text-align: center;
}
- 用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;
}
一些经验
- 可在项目开头将所有元素的margin，padding清零，并将box-sizing设为border-box
- span元素不能设置宽高，span里最好不要放div，span等内联元素设置margin左右有用，设置上下margin无用
- 在运用伪类 ::before,::after时要用content=“”，否则将无效。
