您的位置:首页 > Web前端 > CSS

做项目过程中常用的重置CSS样式表

2016-07-22 15:26 369 查看
@charset 'utf-8';
/*css reset*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,
p,blockquote,th,td,a,b,em,i,strong,html,article,aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section{margin:0;padding:0;}  /*内外边距为0*/
table{border-collapse:collapse;border-spacing:0;} /*表格合并边框*/
fieldset,img{border:0;}   /*将分组后的form元素边框,图片边框设置为无*/
address,caption,cite,code,dfn,em,th,var,i{font-style:normal;font-weight:normal;}
ol,ul{list-style:none;}
q:before,q:after{content:'';}
abbr,acronym{border:0;font-variant:normal;}/*不设置小型大写字母*/
sup{vertical-align:text-top;}
sub{vertical-align:text-bottom;}
input,textarea,select,a{font-family:inherit;font-size:inherit;font-weight:inherit;}
:focus{outline:0;}/*获取焦点时外边框为0*/
a{text-decoration:none;outline:none;}
textarea{resize:none;}
input[type=number],input[type=button]{-webkit-appearance:none}/*防止按钮在苹果手机上变色*/
 input[type=text],input[type=tel],input[type=number],input[type=email],input[type=file]{
 outline: none;
 }
/*html,body*/
html{_text-overflow:ellipsis;font-size:62.5%}/*自适应项目时1rem=10px*/
body{font-family: "微软雅黑",Tahoma,Arial,Roboto,"Droid Sans","Helvetica Neue","Droid Sans Fallback","Heiti SC",sans-self;}

/*line-height*/
.lh40{line-height: 40px;}

/*margin*/
.mt5{margin-top:5px;}
.mt10{margin-top:10px;}
.mt15{margin-top:15px;}
.mt20{margin-top:20px;}
.mr5{margin-right:5px;}
.mr10{margin-right:10px;}
.mr15{margin-right:15px;}
.mr20{margin-right:20px;}
.mb5{margin-bottom:5px;}
.mb10{margin-bottom:10px;}
.mb15{margin-bottom:15px;}
.mb20{margin-bottom:20px;}
.ml5{margin-left:5px;}
.ml10{margin-left:10px;}
.ml15{margin-left:15px;}
.ml20{margin-left:20px;}
.mrla{margin-right:auto;margin-left:auto;}

/*padding*/
.pt5{padding-top:5px;}
.pt10{padding-top:10px;}
.pt15{padding-top:15px;}
.pt20{padding-top:20px;}
.pr5{padding-right:5px;}
.pr10{padding-right:10px;}
.pr15{padding-right:15px;}
.pr20{padding-right:20px;}
.pb5{padding-bottom:5px;}
.pb10{padding-bottom:10px;}
.pb15{padding-bottom:15px;}
.pb20{padding-bottom:20px;}
.pl5{padding-left:5px;}
.pl10{padding-left:10px;}
.pl15{padding-left:15px;}
.pl20{padding-left:20px;}

/*width*/
.w5{width: 5%}
.w10{width: 9%;}
.w15{width: 15%;}
.w20{width: 20%;}
.w25{width:25%;}
.w30{width:30%;}
.w35{width:35%;}
.w40{width:40%;}
.w45{width:45%;}
.w50{width:50%;}
.w55{width: 55%;}
.w60{width: 60%;}
.w65{width:65%;}
.w70{width:70%;}
.w75{width:75%;}
.w80{width:80%;}
.w85{width:85%;}
.w90{width:90%;}
.w95{width:95%;}
.w100{width:100%;}
/*box-sizing*/
.box-s{ box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;}

/*word-break*/
.wbn{word-break:keep-all;white-space:nowrap;}
.wby{word-break:break-all;word-wrap:break-word;white-space:normal;}

/*fix*/
.fix{zoom:1;}
.fix:before,.fix:after{content:'';display:block;overflow:hidden;visibility:hidden;font-size:0;line-height:0;width:0;height:0;}
.fix:after{clear:both;}
.clear{clear:both};
/* 禁用iPhone中Safari的字号自动调整 */
html {-webkit-text-size-adjust: none;}
/* 设置HTML5元素为块 */

article,aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display:block;}

/*去掉默认箭头*/
/*::-webkit-inner-spin-button {
     -webkit-appearance: none;    
}*/
/*媒体查询*/
@media only screen and (max-width:320px){
    /*针对iphone5*/
}
@media only screen and (min-width:321px) and (max-width: 374px){
<span style="white-space:pre">	</span>/*针对iphone6及放大模式*/
}
@media only screen and (min-width:375px) and (max-width: 414px){
<span style="white-space:pre">	</span>/*针对iphone6 plus*/
}
/*魅族*/
@media only screen and (min-device-width :1080px) and (-webkit-min-device-pixel-ratio : 2.5){ }

/*mate7*/
@media only screen and (min-device-width :1080px) and (-webkit-min-device-pixel-ratio : 3){ }
/*P7*/
@media only screen and (min-device-width :1080px) and (max-height :560px) and (-webkit-min-device-pixel-ratio : 2){ }
/*reset end*/
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  CSS html css