遇到的不熟悉的css设置

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%);

猜你喜欢

转载自blog.csdn.net/dxj124/article/details/79359722