前端常见样式梳理

小三角形

width:0; height；0； border-top: 0.133333rem solid transparent; border-left: 0.133333rem solid #fff; border-bottom: 0.133333rem solid transparent; 箭头向右 width:0; height；0； border-top: 0.133333rem solid transparent; border-right: 0.133333rem solid #fff; border-bottom: 0.133333rem solid transparent; 箭头向左 width:0; height；0； border-right: 0.133333rem solid transparent; border-left: 0.133333rem solid #fff; border-bottom: 0.133333rem solid transparent; 箭头向上 width:0; height；0； border-top: 0.133333rem solid transparent; border-left: 0.133333rem solid #fff; border-right: 0.133333rem solid transparent; 箭头向下

box-shadow 参数详情 h-shadow 水平阴影的位置 v-shadow 垂直阴影的位置 blur 模糊距离 spread 阴影的大小 color 阴影的颜色 inset 从外层的阴影（开始时）改变阴影内侧阴影   只有第一个 第二个属性值必须选择其他都可选

box-shadow: 0px 0px 0px 0.106667rem #dbe0e5;

flex布局 flex布局很强大 建议去看看 阮大神的这篇文章 很适合新手去看http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

display:flex; 变为弹性盒子 justify-content: space-between; 水平位置两端对齐 align-items: center; 垂直方向居中

溢出隐藏 不换行 转换为三个点...

word-break: keep-all; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;

溢出隐藏 换行 转换为三个点...

text-overflow: -o-ellipsis-lastline; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;

改变input 提示文字的样式

input::-webkit-input-placeholder { /* WebKit browsers */ color: red; } input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color: red; } input::-moz-placeholder { /* Mozilla Firefox 19+ */ color: red; } input:-ms-input-placeholder { /* Internet Explorer 10+ */ color: red; }