1左右布局
以下是html部分，一个父元素，两个子元素，要将子元素左右两栏布局。
<div class="parent clearfix">
<div class="left">111</div>
<div class="right">22</div>
</div>
最常见的方法是在css里设置浮动，在html里父元素加上clearfix 类清除浮动，css代码如下
.clearfix::after{
content: '';
display: block;
clear: both;
}
.left,right{
float: left;
设置position绝对定位，为父元素设置position: relative; 为子元素设置position: absolute; css代码如下
.parent{
position: relative;
}
.left{
position: absolute;
left: 0;
top: 0;
}
.right{
position: absolute;
left: 0;
top: 0;
}
2.左中右布局
左中右布局主要方法也是浮动或者绝对定位，不过可以分情况选择其一使用甚至结合使用。
特定情况下使用浮动还是绝对定位
使用浮动时：不需要计算特别精确的位置，不过不易操控，浮动元素的宽度需要注意，是根据其内容决定的，否则会换行展示，适用于导航栏等地方。
使用绝对定位：需要计算元素的具体位置，不过更加准确，易于操控。
当某些元素的位置要根据父元素的大小自适应，内容宽度无法确定时，建议使用浮动。
3.水平居中
(1)通过margin: 0 auto; text-align: center实现CSS水平居中。父元素必须指定宽高。
此居中的方法前提为居中块级元素宽度必须固定才可设置auto自动计算左右补白
(2)通过display:flex实现CSS水平居中。
(3)通过position:absolute实现CSS水平居中。
通过设置子元素为绝对定位元素还有left和margin-left的值可以达到居中效果使设置
(4)通过display:inline-block和text-align:center实现CSS水平居中。
text-align 属性规定元素中的文本的水平对齐方式。display:inline-block设置块级元素为行内块级元素时便可实现水平居中
4.其他小技巧
利用：before伪类垂直居中的问题
:nth-child() 伪类选择器
让你匹配到父元素的任一子元素
nth-child(odd)父元素下的奇数子元素，等同于nth-child(2n-1)
nth-child(even)父元素下的偶数子元素 同样区分子元素类型 等同于nth-child(2n)
