CSS布局&小技巧

左右布局

1、行内元素：
对父元素设置text-align：left / right
2、固定宽度的块元素：
第一种方法：给父级元素设置相对定位position: relative，子元素使用相对定位position: absolute; 设置top以及left数值
第二种方法：给子元素设置display: inline-block属性，父级元素设置text-align：left / right

左中右布局

1、固定宽度的块元素：
第一种方法：给父级元素设置相对定位position: relative，子元素使用相对定位position: absolute; 设置top以及left数值
2、非固定宽度的块元素
第二种方法：使用给子元素设置float: left，float: right，居中元素设置margin-left或者right值，并给父级设置清楚浮动clearfix

水平居中

1、行内元素：给父级元素设置text-align: center
2、固定宽度元素：给子元素设置margin： 0 auto;
3、非固定宽度元素：给子元素设置display：inline-block，并在父级元素上面设置text-align: center

垂直居中

1、父元素高度固定，子元素为行内元素（且为单行）：给子元素设置line-height的高度与父元素相同。若子元素为多行行内元素：给父元素设置display：inline-block；并设置vertical-align：middle。

块元素在父元素中绝对居中（上下左右）

给父元素设置如下：

position: relative;

子元素设置如下：

position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;

小技巧：

1、在布局过程中尽量少设置height和width值，很容易出现bug，当需要宽度和高度的时候可以使用padding进行设置（后期更改内容不会出现错误）。一般由内到外进行布局。
2、父元素设置固定高度，子元素需要设置高度的时候height可以设置为100%。当父元素修改高度的时候子元素不用进行修改。
3、持续更新中...