css属性很多加上css3新增的就更多了，开发过程中难免有遗漏掉的，有时候又不想翻看繁琐的api文档，所以就把常用的css样式整理记录下来，以便翻阅！
1、单行文字垂直居中
<div class="row">
单行文字垂直居中，单行文字垂直居中，单行文字垂直居中
</div>
.row {
display: block;
height: 100px;
line-height: 100px;
width: 600px;
background-color: #d5effc;
}
2、多行文字垂直居中
<div class="wrap">
<div id="content">
多行文字垂直居中，多行文字垂直居中，多行文字垂直居中，多行文字垂直居中，多行文字垂直居中，多行文字垂直居中，多行文字垂直居中，多行文字垂直居中，多行文字垂直居中</div>
</div>
.wrap {
display: table;
width: 600px;
height: 150px;
background-color: #f780a4;
}
#content {
display: table-cell;
vertical-align: middle;/**垂直居中**/
}
3、单行文本溢出
<div class='text-overflow'>
单行文本溢出，单行文本溢出，单行文本溢出，单行文本溢出，单行文本溢出，单行文本溢出，单行文本溢出，单行文本溢出，单行文本溢出，单行文本溢出，单行文本溢出，单行文本溢出，单行文本溢出，单行文本溢出，单行文本溢出，单行文本溢出，单行文本溢出，单行文本溢出，单行文本溢出
</div>
.text-overflow {
width: 200px;/**设置显示的长度**/
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
text-overflow: ellipsis;
/* IE/Safari */
-ms-text-overflow: ellipsis;
-o-text-overflow: ellipsis;
/* Opera */
-moz-binding: url("ellipsis.xml#ellipsis");
/*FireFox*/
background-color: #f4cd89;
}
4、文本内容自动换行
.word-break{
word-wrap: break-word;
word-break: normal;
}
5、多行文本溢出
<div class='more-text-overflow'>
webkit浏览器多行文本溢出，webkit浏览器多行文本溢出，webkit浏览器多行文本溢出，webkit浏览器多行文本溢出，webkit浏览器多行文本溢出，webkit浏览器多行文本溢出，webkit浏览器多行文本溢出，webkit浏览器多行文本溢出，webkit浏览器多行文本溢出，webkit浏览器多行文本溢出，webkit浏览器多行文本溢出，webkit浏览器多行文本溢出，webkit浏览器多行文本溢出，webkit浏览器多行文本溢出，webkit浏览器多行文本溢出，webkit浏览器多行文本溢出，webkit浏览器多行文本溢出，webkit浏览器多行文本溢出，webkit浏览器多行文本溢出，webkit浏览器多行文本溢出，webkit浏览器多行文本溢出，webkit浏览器多行文本溢出，webkit浏览器多行文本溢出，webkit浏览器多行文本溢出，webkit浏览器多行文本溢出，webkit浏览器多行文本溢出，webkit浏览器多行文本溢出，webkit浏览器多行文本溢出，webkit浏览器多行文本溢出，webkit浏览器多行文本溢出，webkit浏览器多行文本溢出，webkit浏览器多行文本溢出，webkit浏览器多行文本溢出，webkit浏览器多行文本溢出
</div>
.more-text-overflow {
width: 600px;
display: -webkit-box;
-webkit-line-clamp: 3;/*显示的行数,多余的行数将被隐藏*/
-webkit-box-orient: vertical;
overflow: hidden;
background-color: #dcf791;
}
6、table表格细边框设置
table,table th,table td{
border:1px solid #999;
border-collapse: collapse;
}
7、hr细边框
hr{
height: 1px; background:#ccc; border:0;
}
8、移动设备禁止长按链接与图片弹出菜单
a, img {
-webkit-touch-callout: none;
}
9、div中的滚动效果在ios中不流畅解决方法
div{
-webkit-overflow-scrolling: touch;
}
或者使用iscroll.js
10、清除手机点击页面标签时候出现高亮
* {
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
11、改变用户选中的内容的样式
::selection{
color:red;//选中内容变为红色
background-color:gray;//选中内容背景变为灰色
}
::-moz-selection{
color:red;//选中内容变为红色
background-color:gray;//选中内容背景变为灰色
}
12、禁止用户选中文本内容
.content {
-webkit-user-select:none;
-moz-user-select:none;
-o-user-select:none;
user-select:none;
}
本文如有误，请不吝赐教，谢谢！
前端开发过程中如果遇到其它的css样式还会整理到本文，如果你有一些常用css样式在本文未涉及到，可以在评论处留言分享给大家！
网友评论