工作中总结的常用的css样式，可以帮助大家快速的进行布局：
*{margin:0px;padding:0px;} /*内外边距初始化*/ html, body, div, h1, h2, h3, h4, h5, h6, p, span, img, input, textarea, ul, ol, li, hr { margin: 0;padding: 0;} /*去除 list 默认样式*/ ul, ol {list-style-type: none;} /*去除 a 标签默认样式*/ a {text-decoration: none;} /*左右浮动*/ .fl {float: left;} .fr {float: right;} /*清除浮动*/ .clear{clear:both;} .clearfix::after {display: block; height: 0; content: ""; clear: both; visibility: hidden;} /*不同字号*/ .f-13 {font-size: 13px;} .f-14 {font-size: 14px;} .f-16 {font-size: 16px;} .f-18 {font-size: 18px;} .f-20 {font-size: 20px;} /*元素类型*/ .inline {display: inline;} .block {display: block;} .inline-block {display: inline-block;} /*box-sizing*/ .border-box {-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } /*外边距*/ .mar20 { margin:20px auto;} .mar15 { margin:15px auto;} .mar10 { margin:10px auto;} /*内边距*/ .pad20 { padding:20px;} .pad15 { padding:15px;} .pad10 { padding:10px;} /*省略号*/ .slh {white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .slhm {overflow : hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;} /*变灰*/ /*html { filter: grayscale(100%);//IE浏览器 -webkit-filter: grayscale(100%);//谷歌浏览器 -moz-filter: grayscale(100%);//火狐 -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); -webkit-filter: grayscale(1);//谷歌浏览器 }*/ /*防复制 <body unselectable="on" onselectstart="return false;"></body>*/ /*表单对齐 .test1 { text-align:justify; text-justify:distribute-all-lines;/*ie6-8*/ /* text-align-last:justify; ie9*/ /* -moz-text-align-last:justify;ff*/ /*-webkit-text-align-last:justify;chrome 20+ } /* @media screen and (-webkit-min-device-pixel-ratio:0){ chrome .test1:after{ content:"."; display: inline-block; 100%; overflow:hidden; height:0; } }*/ /*透明度*/ .opacity{opacity: 0; cursor:pointer; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter: alpha(opacity=0);} /*首行缩进*/ .shsj { text-indent:2em} /*字体对齐*/ .textl {text-align:left} .textc {text-align:center} .textr {text-align:right} /*强制换行*/ .qzhh {word-wrap:break-word; word-break:break-all; padding:0px;} /*图片链接边框*/ .borimg{border:0 none;} /* 鼠标样式 */ .pointer{ cursor:pointer;} /* 定位关系 */ .absolute{ position:absolute;} .relative{ position:relative;}