Normalize.css笔记
每次写PC端的页面，最头疼的就是css兼容了，后来做的多了知道这是因为各浏览器间不一致的css渲染导致。
记得最开始写的时候（在学校时候）灰常简单粗暴，啊哈哈。直接*{margin:0;padding:0;}，但是*是通配符，css所有元素都会用到，有人说属于滥用，后来看到一篇博文http://www.zhangxinxu.com/wordpress/2010/04/css-reset%E7%9A%84%E9%87%8D%E6%96%B0%E5%AE%A1%E8%A7%86-%E9%81%BF%E5%85%8D%E6%A0%B7%E5%BC%8F%E9%87%8D%E7%BD%AE/感觉确实我那样写不合适，然后实际做页面时候整理了一份css重置代码，不是很规范。
其实这样看的话，我的代码格式很不规范。嘿嘿，建议大家看看规范这部分的文档。
昨天很偶然的机会听到了Normalize.css，然后我看了看，以下是个人整理：
1）应该有默认的字体（有些浏览器默认字体不一样）——html{ font-family: '微软雅黑'; }
2）body应该无margin——body{ margin: 0 }
3）article，aside，details，figure，figcaption，footer，header，hgroup，main，menu，nav，section，smmary这些元素应该渲染为块元素——
article,aside,details,figure,figcaption,footer,header,hgroup,main,menu,nav,section,smmary{ display: block; }
4）audio，canvas，progress，video应以内联块和基线对齐——
audio,canvas,progress,video{ display: inline-block;vertical-align: baseline; }
5）audio:not([controls])，template，[hidden]不应该展示——
audio:not([controls]){ display: none; height: 0; }
template,[hidden]{ display: none; }
6）a链接互动时候应该有透明背景，a标签应无默认轮廓线——
a{ background-color: transparent; outline:0; }
7）abbr[title]应该有一个点的底部边界——abbr[title]{ border-bottom: 1px dotted; }
8）b,strong应该字体加粗——b,strong{ font-weight: bold; }
9）dfn标签可标记那些对特殊术语或短语的定义，斜体展示——dfn{ font-style: italic; }
10）h1默认有margin-top和margin-bottom，且h1字体的大小在各浏览器下有所差异——
h1{ font-size: 20px; margin: 10px 0; }
11）mark突出显示部分文本，应该有个黄色背景——mark{ background: #ff0; color: #000; }
12）small呈现小号字体效果——small{ font-size: 80%; }
13）sub下标文本，sup上标文本。不应该影响线的视觉线高度——
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sup{ top: -0.5em; } sub{ bottom: -0.25em; }
14）img应无边框——img{ border: 0; }
15）svg不应该溢出——svg:not(:root) { overflow: hidden; }
16）figure用作文档中插图的图像，应该有边框——figure{ margin: 1em 40px; }
17）hr应该有一个内容框模板——hr{ box-sizing: content-box; height: 0; }
18）pre标签的一个常见应用就是用来表示计算机的源代码，内容多时候有滚动条——
pre{ overflow: auto; }
19）code，kbd，pre，samp字体和大小应统一——
code,kbd,pre,samp{ font-family: monospace, monospace; font-size: 1em; }
20）button，input，optgroup，select，textarea应该继承父元素的字体颜色、字体，不应该有边框——
button,input,optgroup,select,textarea{ color: inherit; font:inherit; margin: 0; }
21）button应该有明显的溢出——button{ overflow: visible; }
22）button，select不应该继承文本转换——
button,select{ text-transform: none; }
23）button和带有button风格的input，应该有指针光标的风格且看上去像个按钮——
button,html input[type="button"],input[type="reset"],input[type="submit"] { -webkit-appearance: button; cursor:pointer; }
24）不可见的button和input，应该有默认的光标样式——
button[disabled],html input[disabled] { cursor: default;}
25）button，input在火狐下不应该有额外的内部填充——
button::-moz-focus-inner,input::-moz-focus-inner { border:0; padding:0; }
26）input不应继承线高度——input { line-height: normal; }
27）checkbox，radio有边框框模型无内边距——
input[type="checkbox"],input[type="radio"] { box-sizing: border-box; padding: 0;}
28）input[type="number"]显示一个默认的光标按钮的点击目标在铬（还不明白）——
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button { height: auto; }
29）input[type="search"]
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
30）fieldset元素可将表单内的相关元素分组，应具有一致的border、padding和margin——
fieldset{ border:1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em; }
31）legend 元素为 fieldset 元素定义标题，应继承字体颜色且无间距——
legend{ border: 0; padding: 0; }
32）多行文本框不应该有滚动条，除非内容很多——textarea{ overflow: auto;}
33）表格相关：单元格间不应该有间距——
table{ border-collapse: collapse; border-spacing: 0;}
td,th { padding: 0;}
34）通过 <optgroup> 标签把相关的选项组合在一起：
ptgroup { font-weight: bold; }
