CSS真的很烦很难写！
做静态页面时，写CSS总是调来调去，就记个笔记，梳理一下思路。
正常文档流，从左到右，从上到下。布局时，越少的设置越少，让CSS来自动控制这个过程。我习惯尽量减少固定宽，高。主要利用盒子里的内容来撑起盒子，即box大小由内部内容决定。居中定位时，也尽量避免计算margin，padding来实现居中。
以下为假设不考虑使用flex的情况下
div居中
- 有固定宽度时，利用
margin:0 auto;自动调整左右间距。当无固定宽度时，div的width会成为100%，故设置margin无效。
行内元素居中
-
text-align:center;实现居中
垂直居中
写起来忽然很懵逼，因为好像用的比较少。一般用绝对定位吧。
子元素为行内元素的话可以在父元素中使用line-height来居中。
暴力定位居中
绝对定位实现元素左右居中，上下居中。父元素relative方式定位，子元素如下。大部分情况都能使用（IE8可能不行？），一般需要子元素有固定宽高。
positon: absolute;
width: 600px;
height: 400px;
top: 50%;
left: 50%;
transform: translateX(-50%);
transform: translateY(-50%);
另一个暴力方法（参考别人的方法，兼容性好）：
positon: absolute;
width: 600px; height: 400px;
position: absolute; left: 0; top: 0; right: 0; bottom: 0;
margin: auto;
左右布局
左边的子元素left，float:left;，右边元素可以设置margin来定位，父元素使用clearfix来闭合。
左中右
暴力一点的，子元素全部float：left;,父元素clearfix闭合。
