介绍如何使用CSS做出各种布局

左右布局：

1.先使用浮动技巧保证他们在一行显示：给所有的子元素加上float（默认是left向左的float: left;）,然后给所有子元素的父级元素加上clearfix.

2.然后左右布局就简单多了，给需要右布局的子元素那边float的值改成right即可float：right；

左中右布局

1.我们可以使用脱离文档流的方式-绝对定位，在子元素上写position： absolute；在父级元素上写position: relative相对定位；

      2. 然后再对各子元素进行左右位置的调整即可

水平居中

1.使用margin可以使div边框水平居中：margin-left: autop;

                                                     margin-right: auto; 

2.或者margin：0 auto；

垂直居中

使用定位加调整位置解决：1.我们可以使用脱离文档流的方式-绝对定位，在子元素上写position： absolute；在父级元素上写position: relative相对定位；

      2. 然后再对子元素进行位置的调整即可top、bottom、left和right 均设置为0，margin设置为

auto。

使用其他方法（在其地方搜索到的）：

第二种： flex布局

规则如下：align-items实现垂直居中，justify-content实现水平居中。

第三种： table-cell布局

规则如下：

1、父布局使用vertical-align: middle实现垂直居中，

2、子布局使用margin: 0 auto实现水平居中。

第四种： translate+relative定位

规则如下：

1、子组件采用relative 定位；

2、top和left偏移各为50%；

3、translate(-50%,-50%) 偏移自身的宽和高的-50%。

等其他小技巧

背景图片的垂直方向居中，可以使用background-position： center center;第二个center就是指垂直方向的居中

css shadow genetator上面可以实现一些阴影效果的小代码，不用自己写

iconfont.cn是图标工具网站

：：是伪元素，必须要跟着content: '';

：是伪类

border-radius: 2px;变圆角