清零 css,css样式清零及常用类

css样式清零及常用类

/* css样式清零及常用类 */

@charset "utf-8";

/*CSS Reset*/

/*"微软雅黑","\5FAE\8F6F\96C5\9ED1","Microsoft YaHei"

"黑体","\9ED1\4F53"

"新宋体","\65B0\5B8B\4F53"

"宋体","\5B8B\4F53"

"幼圆" ,"YouYuan","\5E7C\5706"

*/

*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;word-wrap:break-all}:before,:after{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}

body{min-height:100%;background-color:#fff;-webkit-font-26oothing:antialiased;-moz-osx-font-26oothing:grayscale;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}

body{font-family:Arial,'微软雅黑',"\5FAE\8F6F\96C5\9ED1","Microsoft Yahei","simsun","\5B8B\4F53","宋体","\65B0\5B8B\4F53","新宋体";font-size:14px;color: #444;}

html,body,h1,h2,h3,h4,h5,h6,dl,dt,dd,ul,ol,li,hr,p,pre,span,strong,form,iframe,label,button,input,textarea,table,tr,th,td,fieldset,i{margin:;padding:;text-align:left}

dl,dd,ol,ul,li{list-style:none;list-style-type:none}

div{text-align:left;margin-left:auto;margin-right:auto}

i{display:inline-block;font-style:normal;font-weight:normal;text-align:center;vertical-align:middle}

h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:}

a,a:link,a:visited,a:hover,a:active,a:focus,input,button,textarea,select,optgroup,option,a:focus,input:focus,button:focus,textarea:focus,select:focus,optgroup:focus,option:focus,label,label:focus{outline:none;text-decoration:none;-webkit-tap-highlight-color:rgba(255,0,0,0);-webkit-appearance: none;}

img{width:100%;border:;vertical-align:middle}a img,img{-ms-interpolation-mode:bicubic}

a,a:link,a:visited{color:#333333;cursor:pointer}

a:hover,a:active{text-decoration:underline}a.ie6:hover{zoom:}

button::-moz-focus-inner,input::-moz-focus-inner{padding:;border:}

input,button,textarea,select,optgroup,option{border:;font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;line-height:inherit;overflow:visible;vertical-align:middle;outline:none;border-radius:;}

select {appearance:none;-moz-appearance:none;-webkit-appearance:none}select::-ms-expand { display: none; }select[multiple],select[size]{height:auto}

textarea{overflow-y:auto}

hr{height:;margin:15px 0;border:;border-top:1px solid #eee;-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box}

b,strong{font-weight:}

sub,sup{position:relative;font-size:75%;line-height:;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}

table{border-spacing:;border-collapse:collapse}

header,footer,section,aside,article,main,nav,menu,details,summary,address,hgroup,figure,figcaption,legend{display:block;margin:;padding:}

audio,canvas,progress,video{display:inline-block;*display:inline;*zoom:}

audio:not([controls]){display:none;height:}

legend{width:100%;margin-bottom:20px;font-size:21px;line-height:40px;border:;border-bottom:1px solid #e5e5e5}

time{display:inline}

svg:not(:root){overflow:hidden}

fieldset{padding:0.35em 0.625em 0.75em;margin:0 2px;border:1px solid #c0c0c0}

address,caption,cite,code,dfn,em,th,var{font-style:normal;font-weight:}

[hidden],template{display:none}

abbr[title]{border-bottom:1px dotted}

dfn{font-style:italic}

mark{color:#000;background:#ff0}

small{font-size:80%}

figure{margin:1em 40px}

pre{overflow:auto}

code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}

/*通用属性*/

/*清除浮动*/

.clearfix{*zoom:;} /*解决ie6/7下面的浮动塌陷问题*/

.clearfix:before,

.clearfix:after{display:table; line-height:; content:" ";} /*display:table;解决其他下面的浮动塌陷问题,line-height是将添加的内容高度设为0；*/

.clearfix:after{clear: both;}/*清楚浮动*/

.fl{float:left;}.fr{float:right;}

/*

弹性布局

*/

.flex{display: -webkit-box;

display: -moz-box;

display: -webkit-flex;

display: -ms-flexbox;

display: flex;

}

/* ============================================================

flex：定义布局为盒模型

flex-v：盒模型垂直布局

flex-1：子元素占据剩余的空间

flex-align-center：子元素垂直居中

flex-pack-center：子元素水平居中

flex-pack-justify：子元素两端对齐

兼容性：ios 4+、android 2.3+、winphone8+

============================================================ */

.flex-v{-webkit-box-orient:vertical;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}

.flex-1{-webkit-box-flex:;-webkit-flex:;-ms-flex:;flex:;}

.flex-align-center{-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;}

.flex-pack-center{-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;}

.flex-pack-justify{-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;}

/*边距*/ .p0{padding:0px;}.p5{padding:5px;}.p10{padding:10px;}.p15{padding:15px;}.p20{padding:20px;}.p25{padding:25px;}.p30{padding:30px;}.p35{padding:35px;}.p40{padding:40px;} .pt0{padding-top:0px;}.pt5{padding-top:5px;}.pt10{padding-top:10px;}.pt15{padding-top:15px;}.pt20{padding-top:20px;}.pt25{padding-top:25px;}.pt30{padding-top:30px;}.pt35{padding-top:35px;}.pt40{padding-top:40px;} .pr0{padding-right:0px;}.pr5{padding-right:5px;}.pr10{padding-right:10px;}.pr15{padding-right:15px;}.pr20{padding-right:20px;}.pr25{padding-right:25px;}.pr30{padding-right:30px;}.pr35{padding-right:35px;}.pr40{padding-right:40px;} .pb0{padding-bottom:0px;}.pb5{padding-bottom:5px;}.pb10{padding-bottom:10px;}.pb15{padding-bottom:15px;}.pb20{padding-bottom:20px;}.pb25{padding-bottom:25px;}.pb30{padding-bottom:30px;}.pb35{padding-bottom:35px;}.pb40{padding-bottom:40px;} .pl0{padding-left:0px;}.pl5{padding-left:5px;}.pl10{padding-left:10px;}.pl15{padding-left:15px;}.pl20{padding-left:20px;}.pl25{padding-left:25px;}.pl30{padding-left:30px;}.pl35{padding-left:35px;}.pl40{padding-left:40px;} .mt0{margin-top:0px;}.mt5{margin-top:5px;}.mt10{margin-top:10px;}.mt15{margin-top:15px;}.mt20{margin-top:20px;}.mt25{margin-top:25px;}.mt30{margin-top:30px;}.mt35{margin-top:35px;}.mt40{margin-top:40px;} .mr0{margin-right:0px;}.mr5{margin-right:5px;}.mr10{margin-right:10px;}.mr15{margin-right:15px;}.mr20{margin-right:20px;}.mr25{margin-right:25px;}.mr30{margin-right:30px;}.mr35{margin-right:35px;}.mr40{margin-right:40px;} .mb0{margin-bottom:0px;}.mb5{margin-bottom:5px;}.mb10{margin-bottom:10px;}.mb15{margin-bottom:15px;}.mb20{margin-bottom:20px;}.mb25{margin-bottom:25px;}.mb30{margin-bottom:30px;}.mb35{margin-bottom:35px;}.mb40{margin-bottom:40px;} .ml0{margin-left:0px;}.ml5{margin-left:5px;}.ml10{margin-left:10px;}.ml15{margin-left:15px;}.ml20{margin-left:20px;}.ml25{margin-left:25px;}.ml30{margin-left:30px;}.ml35{margin-left:35px;}.ml40{margin-left:40px;}

CSS样式链接和文字常用属性

行内: