Heim > Artikel > Web-Frontend > CSS重置_html/css_WEB-ITnose
1、注意:在reset的时候,避免不必要的重置,例如“dt”没有默认边距。“ul”、“ol”只有左外边距。。。
2、在使用的时候因为全局设置字体为62.5%,所以页面要包裹class为"fz"的div,设置页面字体为12px
/*reset*/
body, p, dd, dl, form, h1, h2, h3, ul, ol, textarea { margin: 0; }
ul, ol { padding-left: 0; }
td, th, button, input, select, textarea, iframe { margin: 0; padding: 0; }
body, button, input, select, option, textarea { font-family: "Microsoft YaHei", "Arial"; color: #333; font-size: 62.5%; *font-size: 63%; }
input { border: none; }
input[type="text"], input[type="password"] { text-indent: 4px; }
body { background-color: #fff; }
li { list-style: none; }
a { color: #0074d9; text-decoration: none; }
a:link { }
a:visited { }
a:hover { }
a:active { }
iframe { border: none; }
table { border-collapse: collapse; border-spacing: 0; }
/*去除浏览器默认效果*/
input:focus, textarea:focus, select:focus { outline: none }
/*去除Chrome等浏览器文本框默认发光边框*/
input::-ms-clear { display: none; }
/*去除ie10+浏览器文本框后面的小叉叉*/
textarea { resize: none; }
/*禁止多行文本框textarea拖拽*/
/*------------------- single css ---------------------------*/
/*background-color*/
.bg-white { background-color: #fff; }
.bg-red { background-color: #ff4136; }
.bg-grey { background-color: #dcdcdc; }
/*border-color name rule*/
.bde { border: 1px solid #eee; }
.bbd { border-bottom: 1px solid #ddd; }
/*clear*/
.clb { clear: both; }
.cll { clear: left; }
.clr { clear: right; }
/*cursor*/
.poi { cursor: pointer; }
.def { cursor: default; }
/*colors*/
.white { color: #fff; }
.grey { color: #aaa; }
.orange { color: #FF8518; }
.red { color: #FF4136; }
.g3 { color: #333; }
.g6 { color: #666; }
/*display*/
.dn { display: none; }
.dib { display: inline-block; }
/*float*/
.l { float: left; }
.r { float: right; }
/*font-size*/
.fz { font-size: 1.2em; }
.fz button, .fz input, .fz select, .fz textarea, .fz option { font-size: 1em; }
.fz14, input.fz { font-size: 1.15em; }
.fz18 { font-size: 1.3em; }
.fz24 { font-size: 2em; }
/*font-family*/
.fa { font-family: Arial; }
.fv { font-family: verdana; }
.fw { font-family: 'Microsoft Yahei'; }
/*font-style*/
.n { font-weight: normal; }
.b { font-weight: bold; }
.i { font-style: italic; }
/*height*/
.h20 { height: 20px; }
/*letter-spacing*/
.lt1 { letter-spacing: 1px; }
/*line-height*/
.lh40 { line-height: 40px; }
/*margin*/
.ml5 { margin-left: 5px; }
.ml10 { margin-left: 10px; }
.mr5 { margin-right: 5px; }
.mr10 { margin-right: 10px; }
.mt5 { margin-top: 5px; }
.mt10 { margin-top: 10px; }
.mb5 { margin-bottom: 5px; }
.mb10 { margin-bottom: 10px; }
/*overflow*/
.ovh { overflow: hidden; }
.ova { overflow: auto; }
/*padding*/
.p10 { padding: 10px; }
.pl5 { padding-left: 5px; }
.pl10 { padding-left: 10px; }
.pr5 { padding-right: 5px; }
.pr10 { padding-right: 10px; }
.pt5 { padding-top: 5px; }
.pt10 { padding-top: 10px; }
.pb5 { padding-bottom: 5px; }
.pb10 { padding-bottom: 10px; }
/*position*/
.rel { position: relative; }
.abs { position: absolute; }
/*percent width value*/
.pctW { width: 100%; }
.pctH { height: 100% }
/*text-align*/
.tc { text-align: center; }
.tr { text-align: right; }
.tl { text-align: left; }
/*text-decoration*/
.tdl { text-decoration: underline; }
.tdn { text-decoration: none; }
/*vertical-align*/
.vm { vertical-align: middle; }
.vtb { vertical-align: text-bottom; }
.vb { vertical-align: bottom; }
.vt { vertical-align: top; }
.vn { vertical-align: -2px; }
/*visibility*/
.vh { visibility: hidden; }
.vv { visibility: visible; }
/*white-space*/
.nowrap { white-space: nowrap; }
/*white-wrap*/
.bk { word-wrap: break-word; }
/*width*/
.w100 { width: 100px; }
/*z-index*/
.zx1 { z-index: 1; }
.zx2 { z-index: 2; }
/*zoom*/
.z { *zoom: 1; }
/*------------------- multiply css ---------------------------*/
/*块状元素水平居中*/
.auto { margin-left: auto; margin-right: auto; }
/*清除浮动*/
.fix { *zoom: 1; }
.fix:after { display: table; content: ''; clear: both; }
/*双栏自适应cell部分连续英文符换行*/
.cell_bk { display: table; width: 100%; table-layout: fixed; word-wrap: break-word; }
/*单行文字溢出虚点显示*/
.ell { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
/*css3过渡动画效果*/
.trans { -webkit-transition: all 0.3s; transiton: all 0.3s; }