前端常见样式梳理

前端常见样式梳理

• 小三角形

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; 
}