CSS常用样式总结，持续更新中...

奋斗的七月

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

解决方法：

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

合并表格边框border-collapse:collapse

语法：border-collapse:separate | collapse | inherit
separate：默认值。边框会被分开。不会忽略 border-spacing 和 empty-cells 属性。
collapse：如果可能，边框会合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属性。
inherit：规定应该从父元素继承 border-collapse 属性的值。

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

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

separate是默认属性，表格边框默认有1px 的间隙，在表格排版时代，设置好表格背景色，我们曾用它来挤出版块的外边框；
collapse，是将表格边框的间隙去掉，这样给表格的td边框赋值时就不会产生双线框了。

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

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

这里用到了文本溢出显示省略号的，即设置溢出文本显示为省略标记：
语法：text-overflow:text-overflow:clip | ellipsis | ellipsis-word（css3新增加的）;
clip：表示直接裁切溢出的文本；
ellipsis：表示文本溢出时，显示省略标记(...)，省略标记代替最后一个字符；
ellipsis-word：表示文本溢出时，也是显示省略标记(...),不同的是，省略标记代替的是最后一个词)

四、定位居中

//定位上下左右居中
 {
     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;
}

参考地址：

CSS实现文字和图片的水平垂直居中
如何让图片按比例响应式缩放、并自动裁剪的css技巧