css布局

1.左右布局：

1.png

如果要对上图中的div.all中的div.left和div.right进行左右布局，我们可以通过在css中对应的选择器添加float：left来实现效果如下：

2.png

我们可以看到，虽然footer在all的外部，却没位于底端，因为all内部子元素为float，导致all并没有被撑开（图中根本没有红色元素显示出来）。我们可以对all添加clearfix来解决这一问题；

3.png

2.左中右布局；

方法1：同上我们可以用float来实现左中右布局：

4.png

我们对.left和.main进行左浮，对.ringht 进行右浮；可以使用width百分比来调节宽度。
方法二：使用绝对定位进行左中右布局；

5.png

对all我们设置position: relative;对于三个需要布局的块使用：position: absolute;
此时左边，右边，中间就相对于all绝对定位，然后设置left，top进行位置调整；

3.水平居中

（1）行内元素的居中
常见的行内元素有span img等，对这些元素居中设置，只需要在父元素的css中添加text-align:center即可。同样它也对行内块元素也是有效的。
但是，有个缺点，由于text-align是可继承属性，即父元素内部的所有元素都会继承这个属性，从而它的子元素内部的文本都会居中显示了。因此需要对子元素的文本居中方式单独设定。
（2）块级元素的居中
若子元素的宽度是已知的，那么我们可以设置子元素的左右margin为auto即可;

6.png

4.垂直居中
Vertical-Align
切记 vertical-align 只对 table-cell 以及 inline-element 起作用，vertical-align 的值是相对于其父元素的，父元素必须是行内元素。
vertical-align 对于块级元素不起作用，例如我们无法用它去垂直居中一个div中的p元素，因此这个方法通常不是垂直居中的最优选择。

7.png

使用Vertical-Align：middle；需要定义父级元素行高；

设置上下padding相等来实现垂直居中；

8.png