CSS布局相关

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闭合。

留着慢慢修改