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; }