2019-01-16 css常用样式

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