最近开始学习CSS, CSS的知识十分复杂，需要不断去发掘和完善。对于新人来说，最好的方法就是尝试，去模仿，遇到问题再去深入了解，逐渐增加对CSS的基础的理解。
1.左右布局
1.1 左右内容固定
使用 '浮动 float:left;'实现左右布局
当我们使用了float，子元素浮动，下面的元素就会被影响，记得给父元素添加一个伪类clearfix，在css中这样写：
.clearfix::after{
content:'';
display:block;
clear:both;
}
1.2.左侧固定，右侧内容自适应
'right' 的宽度加上 'margin-left'
边距: margin-left:
1.3 使用position实现左右布局
父元素设置为position:relative;
left: 设置固定宽度，设定为绝对定位'position:absolute'。
right: 设置为相对定位'position:relative'。
right设置左边距，'margin-left' 为左侧栏的宽度。
2. 左中右布局
2.1.用 'float' 实现左中右布局
注意mid不能写float：right
2.2.用 'position' 实现左中右布局
3. 水平居中
水平居中方法有很多, 就列举几个自己较为常用的方法。
3.1 margin: 0 auto; 常用于块级元素
也就是让盒子左右的margin实现auto就可以水平居中了。
3.2 .行内元素水平居中
使用
text-align:center;
或者调整它的padding和margin来达到水平居中以及垂直居中的效果。
或者使用display
我们可以把元素display：inline-block; 然后就可以在父元素里加入text-align:center;
你可以使用 inline-block 来布局。但是要注意：
- vertical-align 属性会影响到 inline-block 元素，你可能会把它的值设置为 top 。
- 你需要设置每一列的宽度
- 如果HTML源代码中元素之间有空格，那么列与列之间会产生空隙
4. 垂直居中
4.1 让元素的高度等于行高及height=line-height的值；
4.2 给上下一个相同的padding值也可以实现垂直居中
等其他小技巧
- margin:0 auto; 慎用，要注意你有没有设置宽度，否则没法用。
- 对于内联元素来说，margin和padding都只有左右方向，top和bottom设置不了。解决方法是
display：inline-block ; - 最好使用max-width 替代 width 可以使浏览器自适应屏幕宽度.
- 当我们给了元素浮动属性，同时让他的宽度等于50%时，加一个padding或者margin都会使元素被挤到下一行.
解决方法:box-sizing: border-box;使得元素的内边距和边框属于它自身的宽度了。
上述1，2种布局方式现已不提倡使用，属于新手练习的布局方式
这里推荐阮一峰老师的关于'flex'布局的博客
