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