遇到的不熟悉的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;

 

}

//多行溢出

display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;

 

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

 

6.css的点击穿透 （注意：兼容性的问题，部分浏览器不支持）

pointer-events：none；

给元素设置这个css属性以后，使得点击穿透，自己本身不触发事件，会触发父元素的点击事件。

使用到的场景:一个视频播放上面 盖了一个播放的图标，需要是点击这个图标的时候能播放这个视频

pointer-events直译为指针事件，当把值设置为none后，他有如下相关特性。

1. 阻止用户的点击动作产生任何效果
2. 阻止缺省鼠标指针的显示
3. 阻止CSS里的hover和active状态的变化触发事件
4. 阻止JavaScript点击动作触发的事件

兼容性：
IE 　11+
Firefox 　3.6＋
Chrome　4.0+
Safari　　6.0
Opera　 15.0
iOS Safari 6.0
Android Browser　2.1+
Android Chrome　18.0+

 

7.清除浮动：

    .clearfix:after {
        content: ".";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden
    }

    .clearfix {
        *zoom: 1
    }

8.用jquery的css（），这只背景图，和平铺方式

.css({'background':'url("'+data.msg+'")','background-repeat': 'no-repeat'})