移动端CSS常用样式总结，持续更新中...-CFANZ编程社区

一、表格线边框重复css解决方法

解决方法：

.table {border:1px solid #dedede; border-collapse:collapse;}
.td {border:1px solid #dedede; }

合并表格边框border-collapse:collapse

另外附上表格线常见问题处理方法：

1.表格边框与表格单元格线的重叠。[采用border-collapse:collapse解决]
2.嵌套表格与被嵌套表格边线重叠问题。[采用border-top|left|right|bottom解决]
3.嵌套表格与被嵌套表格对不齐的问题。[采用table-layout: fixed;解决]
4.border-collapse有两个属性，separate 和 collapse 。

二、图片压缩以及裁剪不变形的展示

        overflow:hidden;
        background-position: center center;
        background-repeat: no-repeat;
        -webkit-background-size:cover;
        -moz-background-size:cover;
        background-size:cover;

三、多行文本展示，对齐，以及省略号

单行显示语法：white-space:nowrap;
//---文本对齐
@mixin multilineAlignText{
        -webkit-box-orient: vertical;
    word-break: break-all;
    text-align: justify
}
//文字长度超过一行隐藏
.text-ellipsis {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
//文字长度超过两行隐藏
.text-line-two {
  word-break: break-all;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

四、定位居中

//定位上下左右居中
 {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
}

//定位上下居中
 {
    position: absolute;
    top: 50%;
        transform: translateY(-50%);
}

//定位上下居中
{
    position: absolute;
    left: 50%;
        transform: translateX(-50%);
}

五、textarea去掉右侧滚动条，去掉右下角拖拽

{
      overflow:hidden;
      resize:none;
}

六、实现背景颜色渐变

{
     background:-webkit-linear-gradient(top,#FFF,#cb1919);
     background:-o-linear-gradient(top,#FFF,#cb1919);
     background:-ms-linear-gradient(top,#FFF,#cb1919);
     background:-moz-linear-gradient(top,#FFF,#cb1919);
     background:linear-gradient(top,#FFF,#cb1919);
}

七、打电话发短信，发邮件的怎么实现

打电话：<a href="tel:0755-10086">打电话给:0755-10086</a>
发短信：winphone系统无效，<a href="sms:10086">发短信给: 10086</a>
发邮件：<a href="mailTo:10086@qq.com">10086@qq.com</a>

八、取消input在ios下，输入的时候英文首字母的默认大写

     <input autocapitalize="off" autocorrect="off" />

九、android 上去掉语音输入按钮

     input::-webkit-input-speech-button {display: none}

十、移动端开启硬件加速

解决页面闪白，保证动画流畅

.css {
       -webkit-transform: translate3d(0, 0, 0);
       -moz-transform: translate3d(0, 0, 0);
       -ms-transform: translate3d(0, 0, 0);
       transform: translate3d(0, 0, 0);
}

十一、文本居中

//----单行文本居中
{
           width: 300px;
            height: 100px;
            margin: 50px auto;
            border: 1px solid red;
            line-height: 100px; /*设置line-height与父级元素的height相等*/
            text-align: center; /*设置文本水平居中*/
            overflow: hidden; /*防止内容超出容器或者产生自动换行*/
}
//----多行文本居中
{
           width: 300px;
            margin: 50px auto;
            border: 1px solid red;
            text-align: center; /*设置文本水平居中*/
            padding: 50px 20px;
}