前端比较实用的 display: flex; flex-direction: column; align-items: center;

1.flex布局

{
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center{flex:1   //所有的子元素平均分配}
 }

我写css必定会用到他，自此之后摒弃flaot,毕竟float要清楚浮动，在我看来他完全可以替代float,而且最大的好处就是对任何不确定的宽和高，我们都可以让他垂直居中对齐，想要了解的更深点，可以点击这里http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html.

2.移动端1px的实现

.person-infos{position: relative;&::before{content: "";pointer-events: none; /* 防止点击触发 */box-sizing: border-box;position: absolute;width: 200%;height: 200%;left: 0;top: 0;border-top:1px solid #fff;transform:scale(0.5);transform-origin: 0 0;}
 }
 

一定要在改元素上设置position:relative,before内设置position: absolute

3.利用::before,::after设置在元素前后设置border

{position: relative;&::before{content: "";position: absolute;left: 0;right: 0;top: 0;height: 1px;background: #f1f1f1;}
 }

4.设置背景图片，并该图片在一个固定区域内，比如该区域是手机全屏区域减去头部的标题栏

{background: url(/static/img/login-back.e7b2e5f.jpg) no-repeat;position: absolute;top: 40px;  //顶部标题栏的高度left: 0;width: 100%;background-size: 100% 100%;height: calc(100% - 40px);
 }

推荐使用的是calc,加上我们设置了背景图片的宽和高是100%，100%，这时候我们就可以看到除去头部的40px,剩下的区域都被背景图片占满了。

5.一个值得推荐的 css写的阴影效果，我一直都用，感觉非常使用大部分场景

{   border: none;border-radius: 5px;box-shadow: 0 12px 5px -10px rgba(0,0,0,0.1), 0 0 4px 0 rgba(0,0,0,0.1);-webkit-box-shadow: 0 12px 5px -10px rgba(0,0,0,0.1), 0 0 4px 0 rgba(0,0,0,0.1);
 }

6.超出长度省略号

{overflow: hidden;text-overflow:ellipsis;white-space: nowrap;
 }

7.颜色的渐变(right表示渐变的方向)

{background: linear-gradient(to right, #f5adc9, #f38eb6, #f977ab);
 }

8.box-sizing

box-sizing: content-box|border-box|inherit;

有时候我们设置内部的div一个固定的宽高，但是由于受padding,border的影响，会让他的宽高比设置的小，如果不想这样，可以设置box-sizing:content-box,具体看http://www.w3school.com.cn/cssref/pr_box-sizing.asp

9.禁用鼠标点击

{ pointer-events: none; 
 }

10. input,宽改变border,并且聚焦除掉橙色的边框

{border:none;outline:none;border:1px solid #eee  //自定义
 }

11.设置透明，并兼容浏览器

{filter: alpha(opacity=50); /* internet explorer */-khtml-opacity: 0.5; /* khtml, old safari */-moz-opacity: 0.5; /* mozilla, netscape */opacity: 0.5; /* fx, safari, opera */
 }

12.除input,textarea之外，让任何标签的内容可编辑，可以在该元素上添加 contenteditable="true"

13.自定义滚动条样式

 /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/ 
 ::-webkit-scrollbar 
 { width: 16px; height: 16px; background-color: #F5F5F5; 
 } /*定义滚动条轨道 内阴影+圆角*/ 
 ::-webkit-scrollbar-track 
 { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); border-radius: 10px; background-color: #F5F5F5; 
 } /*定义滑块 内阴影+圆角*/ 
 ::-webkit-scrollbar-thumb 
 { border-radius: 10px; -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3); background-color: #555; 
 

14.实现按钮一边凹陷

.btn{display: block;width: 100px;height: 40px;background-color: lightcoral;text-align: center;line-height: 40px;position: relative;color: #FFF;font-size: 2em;margin: 0 auto;&::after {content: "";width: 30px;height: 30px;border-radius: 30px;background: #fff;position: absolute;display: block;right: -15px;top: 5px;}
 }

效果图入下：

目前就想到这么多，后期如果有遇到新的，会继续更新。。。。。。。。。。