CSS重置
1、注意:在reset的时候,避免不必要的重置,例如“dt”没有默认边距。“ul”、“ol”只有左外边距,td th只有padding值。。。
2、在使用的时候因为全局设置字体为62.5%,所以页面要包裹class为"fz"的div,设置页面字体为12px。.fz不包含表单元素,所以表单元素因为继承需重置
.fz input{ font-size:1em;}。 当input需改变为14px时,需添加input.fz14{}
3、设置img的border:none。当img单独使用的时候无边框,当img被a链接包裹的时候,在ie浏览器出现蓝色边框。so,重置border为none。
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
/*** https://github.com/zhangxinxu/quickLayout/blob/master/quick_layout.css 注意:非特殊情况不再修改,修改了注明:修改日期及原因,并且更新到博客园 ***/ /*reset*/ body, p, dd, dl, form, h1, h2, h3, ul, ol, textarea { margin: 0; } ul, ol { padding-left: 0; } td, th { padding: 0; } 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, img { border: none; } em { font-style: normal; } input[type="text"], input[type="password"] { text-indent: 4px; } body { background-color: #fff; } /*input,button,select,textarea{ border: 1px solid #999; }*/ li { list-style: none; } a { color: #0074d9; text-decoration: none; outline: 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*/ .bbd { border-bottom: 1px solid #dcdcdc; } /*clear*/ .clb { clear: both; } .cll { clear: left; } .clr { clear: right; } /*cursor*/ .poi { cursor: pointer; } .def { cursor: default; } /*colors*/ .white { color: #fff; } .grey { color: #dcdcdc; } .orange { color: #FF8518; } .red { color: #FF4136; } .g3 { color: #333; } .g6 { color: #666; } /*display*/ .dn { display: none; } .dib { display: inline-block; } .din { display: inline; } /*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.fz14 { font-size: 1.17em; } .fz16 { font-size: 1.33em; } .fz18 { font-size: 1.5em; } .fz20 { font-size: 1.67em; } .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; } /*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; } /*z-index*/ .zx1 { z-index: 1; } .zx2 { z-index: 2; } .zx3 { z-index: 3; } .zx8 { z-index: 8; } .zx9 { z-index: 9; } /*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 { display: table-cell; *display: inline-block; } .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.4s ease 0s; transition: all 0.4s ease 0s; }