CSS布局

1）左右布局

子标签使用float:left；width:50%;，父标签加上clearfix，代码如下：

左右布局

重要：如果要加border进行调试请务必写上*{box-sizing:border-box;}

重要：如果要加border进行调试请务必写上*{box-sizing:border-box;}

重要：如果要加border进行调试请务必写上*{box-sizing:border-box;}

不加会怎么样？其实也不会怎么样：）

2）左中右布局

只需要把上面的width写成33.3%即可，

这样的话做4列就写成25%，5列就是100/5*100%=20%，六列......

3）水平居中

块级元素，宽度确定，水平居中使用{margin-left:50%;margin-right:50;}

内联元素，在父元素使用{text-align:center;}

块级元素，宽度不确定呢？google搜索：css center tricks

截图自https://css-tricks.com/

4）垂直居中

使用display:flex;来进行垂直居中，需要注意的是

外面需要再加一个DIV，这样格式就不会乱掉了。

其实以上4种情况还有很多解决方法，不过本人水平有限就介绍几种比较常用的。

5）其他的小技巧

1.display:inline-block;会默认收缩，这样就不用把宽度写死了，不过会出问题，所以需要写上vertical-align: top;

每使用一次display:inline-block;都会有一个vertical-align: top;，没有买卖，就没有杀害......

2.父元素的高度确定的话，子元素的宽高可以通过百分比来控制。

3.如果需要对某个DIV进行操作，但由于一些原因不能对该DIV进行控制可以在外面新加一个什么都没有的DIV，对空DIV进行操作。

4.https://css-tricks.com/这个网站是个很好的工具。