清除html和css标签自带的默认样式
在我们编写前端页面的时候,html和css标签有时候会自带一些格式,我们一般习惯性把自带格式全部清除,在需要的时候再自己写上,这样代码的可读性更加的高,也不会把自己搞混淆。
京东方案
*{margin:0;padding:0}em,i{font-style:normal}li{list-style:none}img{border:0;vertical-align:middle}button{cursor:pointer}a{color:#666;text-decoration:none}a:hover{color:#e33333}button,input{font-family:Microsoft YaHei,Heiti SC,tahoma,arial,Hiragino Sans GB,\\5B8B\4F53,sans-serif}body{-webkit-font-smoothing:antialiased;background-color:#fff;font:12px/1.5 Microsoft YaHei,Heiti SC,tahoma,arial,Hiragino Sans GB,\\5B8B\4F53,sans-serif;color:#666}.hide,.none{display:none}.clearfix:after{visibility:hidden;clear:both;display:block;content:".";height:0}.clearfix{*zoom:1}
用这个就够了:
html{color:#000;background:#FFF;} body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { margin:0; padding:0; } table { border-collapse:collapse; border-spacing:0; } fieldset,img { border:0; } address,caption,cite,code,dfn,em,strong,th,var { font-style:normal; font-weight:normal; } ol,ul { list-style:none; } caption,th { text-align:left; } h1,h2,h3,h4,h5,h6 { font-size:100%; font-weight:normal; } q:before,q:after { content:''; } abbr,acronym { border:0; }
html
body, ul, ol, li, h1, h2, h3, h4, h5, h6, p, form, dl, dt, dd, figure {margin: 0px; padding: 0px; font-size: 12px; font-weight: normal; } ul { list-style: none; } img { border-style: none; }
css
通常有以下几句就够了:
*{margin:0;padding:0} li{list-style:none} img{vertical-align:top;border:none} 如果你想写全也可以: /* 清除内外边距 */ body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, /* structural elements 结构元素 */ dl, dt, dd, ul, ol, li, /* list elements 列表元素 */ pre, /* text formatting elements 文本格式元素 */ fieldset, lengend, button, input, textarea, /* form elements 表单元素 */ th, td { /* table elements 表格元素 */ margin: 0; padding: 0; }
字体
/** 设置默认字体 **/ body,button, input, select, textarea /* for ie */ { font-family: "Helvetica Neue",Helvetica,Arial,"Microsoft Yahei UI","Microsoft YaHei",SimHei,"宋体",simsun,sans-serif; } h1, h2, h3, h4, h5, h6 { font-size: 100%; font-weight: normal;} address, cite, dfn, em, var { font-style: normal; } /* 将斜体扶正 */ code, kbd, pre, samp { font-family: courier new, courier, monospace; } /* 统一等宽字体 */ small { font-size: 12px; } /* 小于 12px 的中文很难阅读, 让 small 正常化 */
列表
ul, ol { list-style: none; }
文本
/** 重置文本格式元素 **/ a { text-decoration: none; } a:hover { text-decoration: underline; } sup { vertical-align: text-top; } /* 重置, 减少对行高的影响 */ sub { vertical-align: text-bottom; }
表单
/** 重置表单元素 **/ legend { color: #000; } /* for ie6 */ fieldset, img { border: 0; } /* img 搭车:让链接里的 img 无边框 */ button, input, select, textarea { font-size: 100%; } /* 使得表单元素在 ie 下能继承字体大小 */ /* 注:optgroup 无法扶正 */
表格
/** 重置表格元素 **/ table { border-collapse: collapse; border-spacing: 0; }
html5
/* 重置 HTML5 元素 */ article, aside, details, figcaption, figure, footer,header, hgroup, menu, nav, section, summary, time, mark, audio, video { display: block; margin: 0; padding: 0; } mark { background: #ff0; }