1.例如 input光标很大,遮盖了文字,设置光标与文字有一定间距 可以给input的css设置letter-spacing: 5px;
2.css实现单行,多行 文本溢出显示 ...
/*单行溢出*/
.one-txt-cut{
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
//当然还需要加宽度width属来兼容部分浏览。
/*多行溢出 手机端使用*/.txt-cut{
overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
/* -webkit-line-clamp: 2; */
-webkit-box-orient: vertical;
}
3.让图文不可复制
-webkit-user-select: none; -ms-user-select: none;-moz-user-select: none;-khtml-user-select: none;user-select: none;
4.改变placeholder的字体颜色大小(移动端不生效)
input::-webkit-input-placeholder { /* WebKit browsers */ font-size:14px; color: #333;}
input::-moz-placeholder { /* Mozilla Firefox 19+ */ font-size:14px; color: #333;}
input:-ms-input-placeholder { /* Internet Explorer 10+ */ font-size:14px; color: #333;}
5.盒子垂直水平居中
1、定位 盒子宽高已知
父:position: relative;
子:position: absolute; left: 50%; top: 50%; margin-left:-自身一半宽度; margin-top: -自身一半高度;
2、table-cell布局
父: display: table-cell; vertical-align: middle;
子: margin: 0 auto;
3、定位 + transform ; 适用于 子盒子 宽高不定时;
父:position: relative
子:position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
4、flex 布局
父级: display: flex; /*实现垂直居中*/ align-items: center; /*实现水平居中*/ justify-content: center;
5.黑科技
父:position: relative;
子:position: absolute; top:0;left:0;right:0;bottom:0; margin:auto;
5.再加一种水平方向上居中 :margin-left : 50% ; transform: translateX(-50%);