一，左右布局
1.浮动
给子元素设置浮动，并在父元素上清除浮动，便可将原本每个子元素占一行的垂直文档流变成水平文档流。然后给想要显示在左边和右边的分别加div，左边的向左浮动，右边的向右浮动即可。
->父元素清除浮动方式：
给父元素添加选择器，命名为clearfix，并加上：
.clearfix::after{
content: '';
display: block;
clear: both;
}
2.宽度不够自动换行
通常在<dl>中，我们要使<dt>和<dd>分别两行显示，但目前各子元素垂直显示，那么：
A.利用浮动使子元素在同一行；
B.然后利用宽度不够会自动换行的原理。给宽度设置一个百分比，如50%，也可根据情况给<dt>和<dd>分别设置百分比，百分比越大，则在总宽度中占的比例越大即越宽，如：
.userCard dl dt{
width: 30%;
}
.userCard dl dd{
width: 70%;
}
3.行内块级元素
我们都知道块级元素是垂直方向的文档流，而行内元素是水平方向的文档流，因此我们可以结合他们的特性，成为行内块级元素后，既能保留块级元素可以设置宽高的特性，又可以使元素在同一排显示（即不换行）：
display: inline-block;
4.绝对定位
绝对定位后，元素能够通过设置left和top值自由移动，当然就能实现左右布局。（绝对定位后元素会脱离文档流）
5.table
在<table>中，<tr>代表行，<th>代表表头，<td>代表表里的数据，填写数据后，能够自然形成左右布局。
二，左中右布局
左中右布局的方式与左右布局类似，如：
1.浮动
给左边和右边的元素分别设置向左和向右浮动，中间的元素自适应，父元素清除浮动后，子元素则可以在一行显示，然后给其添加上margin。
2.行内块级元素
给三个元素变为行内块级元素，则可以在一行显示，然后设置 margin，则可成为左中右结构的布局。
3.绝对定位
三个子元素相对于父元素绝对定位，通过left和top自由移动位置即可。
4.table
<tr>代表行，<th>代表表头，<td>代表表里的数据，将表头做成三列，即可成为左中右布局。
三，水平居中
1.margin:0 auto;
使用该方法的前提是，该元素有宽度；
2.text-align: center;
该方法适用于文本居中，同时对行内元素也有效，对块级元素无效。但我们可以给子元素一个display:inline-block;让它变成行内块元素，然后再给父元素设置text-align: center;即可。
3.绝对定位
在子元素是绝对定位的情况下，给子元素设置：
left: 50%;
transform: translate(-50%, 0);
4.display: flex;
分别给父子元素设置：
.parent {
display: flex;
justify-content: center;
}
.child {
display: inline;
margin: 0 auto;
}
四，垂直居中
1.设置行高line-height与高度height相同时，可以实现垂直居中；（适用于文本）
2.将上下padding设置相等，但需要提前计算总体高度。
3.transform: translate(0, -50%);
将子元素绝对定位，然后:
.child {
position: absolute;
top: 50%;
transform: translate(0, -50%);
}
4.子元素设置绝对定位后，top和bottom设为一样，margin: auto;（最好设置一个宽高）
5.给图片垂直居中：
.box{
width: 300px;
height: 300px;
background: #ddd;
line-height: 300px;
}
.box img {
width: 200px;
height: 200px;
vertical-align: middle;
}
要点，给父元素设置line-height与height值相同，并给<img>标签加上vertical-align: middle;
五，其他小技巧
1.没有用padding和magin，也没有默认宽度的情况下，元素距离上边和下边不一样宽，可用以下代码纠正：
vertical-align: top;
2.<li>中套了<a>的话，那么<li>需要把<a>包起来，但是会出现<a>比<li>高的情况，此时需要在<a>上加一个：
display: block;
3.要使<a>在<li>中处于上下居中，如果发现没有，则可能是下面多了下划线的3px，那么在<a>上面加上一个隐形的border：3px solid transparent即可，当然也有其他情况，总之要居中。
4.背景图片：
A.使背景图片居中：
background-position: center center;
第一个center是x轴，第二个是y轴；
B.使图片在当前元素内按比例显示完整，自适应：
background-size: cover;
