左右布局：
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;变圆角
网友评论