scss 教程 https://www.jianshu.com/p/a99764ff3c41
一、设置小于12px字体
那么网上一直有一个方法就是给当前样式添加谷歌私有属性：-webkit-text-size-adjust:none;
可是我进行验证后发现，在谷歌现在的新版本里已经无效。那么我们应该如何设置谷歌下的字体呢？
我们可以使用到 css3里的一个属性：transform:scale()
二、设置文字超出隐藏
1.{
overflow: hidden; text-overflow: ellipsis; -webkit-box-orient: vertical;
display: -webkit-box; -webkit-line-clamp: 4; //多行
overflow: hidden; text-overflow: ellipsis; white-space: nowrap; //单行
}
2.移入移出隐藏显示
span{
display: inline-block;
width:60px;
word-break: keep-all;
overflow: hidden;
text-overflow: ellipsis;
}
span:hover{
overflow: visible;
}
3.字体距离设置
text-indent设置抬头距离css缩进
letter-spacing来设置字与字间距_字符间距离，字体间距css样式
p {word-spacing:25px;} <p class="tight">This is some text. This is some text.</p> 设置段落之间的距离
三、input textarea 水印 光标设置
textarea::-webkit-input-placeholder {
/* placeholder颜色 */
color: #999999;
/* placeholder字体大小 */
font-size: 15px;
/* placeholder位置 */
/*text-align: right;*/
} // 水印
.caret{caret-color:#50D7ED;} //光标
四、input 属性type=checked伪元素设置
input{display: none;}
label{text-align: center; display: inline-block; width: 30px; height: 30px; border: 1px solid red;}
input:checked+label:before{
content: '';
display: inline-block;
width: 15px; height: 25px;
border-right: 1px solid green;
border-bottom: 1px solid green;
transform: rotate(45deg);
}
五、垂直居中设置
p:after{
content: '';
height: 100%;
display: inline-block;
}
p>*{vertical-align: middle;}
