项目初始化——CSS-Reset

注：本文系笔者搜集整理资料写的自用CSS初始化模板，所借鉴的资源均写了链接，我只是个搬运工

PC-CSS-Reset:

body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, lengend, label, button, input, select, option, textarea, optgroup, table, thead, tbody, tfoot, tr, th, td, div, span, img, a, em, i, iframe, :before, :after{box-sizing: border-box; margin: 0; padding: 0;}
body, button, input, select, option, textarea, optgroup, img{font: 12px/1 "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Heiti SC", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif; outline: none; border: none;}
textarea{resize: none; overflow: auto;}
ul, ol{list-style: none;}
a{text-decoration: none; background-color: transparent; -webkit-text-decoration-skip: objects;}
table{border-collapse: collapse; border-spacing: 0;}
h1, h2, h3, h4, h5, h6{font-size: 100%;}
article, aside, footer, header, nav, section, figcaption, figure, main, details, menu{display: block; box-sizing: border-box; margin: 0; padding: 0;}
.clearfix:after{content:"";display:table;clear:both;}

PC-CSS-Reset 说明:

/**
 * created by 赵兰得隆(zhaolandelong@163.com) 2017/04/27
 * thanks for 玉伯(lifesinger@gmail.com), 正淳(ragecarrier@gmail.com)，normalize.css
 *
 * Reference links:
 * https://necolas.github.io/normalize.css/latest/normalize.css
 * http://www.cnblogs.com/yizuierguo/archive/2009/07/15/1524106.html
 */
 
/**
 * 1.统一盒模型模式 ie 8+ firefox 29+ chrome 10+ safari 6+ opera 15+ IOS 6+ Android 2.1+
 * 2.并非所有元素都有margin、padding大都是搭了box-sizing的便车
 */
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, /* structural elements 结构元素 */
dl, dt, dd, ul, ol, li, /* list elements 列表元素 */
pre, /* text formatting elements 文本格式元素 */
form, fieldset, lengend, label, button, input, select, option, textarea, optgroup, /* form elements 表单元素 */
table, thead, tbody, tfoot, tr, th, td, /* table elements 表格元素 */
div, span, img, a, em, i, iframe, /* 可能因改变display而影响box-sizing的元素 */
:before, :after /* CSS3规定伪元素用::before，伪类用:hover，为兼容PC端用:before */
{
    box-sizing: border-box;/* 1 */
    margin: 0; /* 2 */
    padding: 0; /* 2 */
}
 
/**
 * img，body搭便车，让链接里的 img 无边框
 * 1.根据项目需要修改默认字体，参考https://segmentfault.com/a/1190000006110417
 * 2.表单元素
 */
body, button, input, select, option, textarea, optgroup, img {
    font: 12px/1 "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Heiti SC", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif; /* 1 */
    outline: none; /* 2 */
    border: none; /* 2 */
}
 
/**
 * 1.Remove the default vertical scrollbar in IE.
 */
textarea {
    resize: none;
    overflow: auto; /* 1 */
}
 
/**
 * 重置列表元素
 */
ul, ol { list-style: none; }
 
/**
 * 链接，根据项目需要给:link,:visited,:hover,:active 增加 text-decoration: underline;
 * 1. Remove the gray background on active links in IE 10.
 * 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
 */
a {
    text-decoration: none;
    background-color: transparent; /* 1 */
    -webkit-text-decoration-skip: objects; /* 2 */
}
 
/**
 * 重置表格元素
 */
table {
    border-collapse: collapse;
    border-spacing: 0;
}
 
/**
 * 根据项目需要调整参考如下
 * h1 { font-size: 18px; }
 * h2 { font-size: 16px; }
 * h3 { font-size: 14px; }
 * h4, h5, h6 { font-size: 100%; }
 */
h1, h2, h3, h4, h5, h6 { font-size: 100%; }
 
/**
 * H5元素适配IE9-
 */
article, aside, footer, header, nav, section, figcaption, figure, main, details, menu {
    display: block;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

M-CSS-Reset:

html{font-size: 50px; -ms-text-size-adjust: none; -webkit-text-size-adjust: none;}
body{-webkit-tap-highlight-color: rgba(0, 0, 0, 0);}
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, lengend, label, button, input, select, option, textarea, optgroup, table, thead, tbody, tfoot, tr, th, td, div, span, img, a, em, i, iframe, ::before, ::after{box-sizing: border-box; margin: 0; padding: 0;}
body, button, input, select, option, textarea, optgroup, img{font: 12px/1 "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Heiti SC", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif; outline: none; border: none;}
textarea{resize: none; overflow: auto;}
ul, ol{list-style: none;}
a{text-decoration: none; background-color: transparent; -webkit-text-decoration-skip: objects;}
table{border-collapse: collapse; border-spacing: 0;}
h1, h2, h3, h4, h5, h6{font-size: 100%;}
button, html [type="button"], [type="reset"], [type="submit"], ::-webkit-file-upload-button{-webkit-appearance: button;}
.clearfix::after{content:"";display:table;clear:both;}

M-CSS-Reset 说明:

/**
 * created by 赵兰得隆(zhaolandelong@163.com) 2017/04/27
 * thanks for 玉伯(lifesinger@gmail.com), 正淳(ragecarrier@gmail.com)，normalize.css
 *
 * Reference links:
 * https://necolas.github.io/normalize.css/latest/normalize.css
 * http://www.cnblogs.com/yizuierguo/archive/2009/07/15/1524106.html
 */
 
/**
 * 1. 方便rem换算，针对2倍设计稿预设为50px。
 *    即1rem = 100px(设计稿上的)。devicePixelRatio * fontSize = 100
 * 2. Prevent adjustments of font size after orientation changes in
 *    IE on Windows Phone and in iOS.
 */
html {
    font-size: 50px; /* 1 */
    -ms-text-size-adjust: none; /* 2 */
    -webkit-text-size-adjust: none; /* 2 */
}
 
/**
 * 去除表单元素点击之后的高亮
 */
body {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
 
/**
 * 1.统一盒模型模式 ie 8+ firefox 29+ chrome 10+ safari 6+ opera 15+ IOS 6+ Android 2.1+
 * 2.并非所有元素都有margin、padding大都是搭了box-sizing的便车
 */
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, /* structural elements 结构元素 */
dl, dt, dd, ul, ol, li, /* list elements 列表元素 */
pre, /* text formatting elements 文本格式元素 */
form, fieldset, lengend, label, button, input, select, option, textarea, optgroup, /* form elements 表单元素 */
table, thead, tbody, tfoot, tr, th, td, /* table elements 表格元素 */
div, span, img, a, em, i, iframe, /* 可能因改变display而影响box-sizing的元素 */
::before, ::after/* CSS3规定伪元素用::before，伪类用:hover */
{
    box-sizing: border-box;/* 1 */
    margin: 0; /* 2 */
    padding: 0; /* 2 */
}
 
/**
 * img，body搭便车，让链接里的 img 无边框
 * 1.根据项目需要修改默认字体，参考https://segmentfault.com/a/1190000006110417
 * 2.表单元素
 */
body, button, input, select, option, textarea, optgroup, img {
    font: 12px/1 "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Heiti SC", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif; /* 1 */
    outline: none; /* 2 */
    border: none; /* 2 */
}
 
/**
 * 1.Remove the default vertical scrollbar in IE.
 */
textarea {
    resize: none;
    overflow: auto; /* 1 */
}
 
/**
 * 重置列表元素
 */
ul, ol { list-style: none; }
 
/**
 * 链接，根据项目需要给:link,:visited,:hover,:active 增加 text-decoration: underline;
 * 1. Remove the gray background on active links in IE 10.
 * 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
 */
a {
    text-decoration: none;
    background-color: transparent; /* 1 */
    -webkit-text-decoration-skip: objects; /* 2 */
}
 
/**
 * 重置表格元素
 */
table {
    border-collapse: collapse;
    border-spacing: 0;
}
 
/**
 * 根据项目需要调整参考如下
 * h1 { font-size: 18px; }
 * h2 { font-size: 16px; }
 * h3 { font-size: 14px; }
 * h4, h5, h6 { font-size: 100%; }
 */
h1, h2, h3, h4, h5, h6 { font-size: 100%; }
 
/**
 * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
 *    controls in Android 4.
 * 2. Correct the inability to style clickable types in iOS and Safari.
 */
button,
html [type="button"], /* 1 */
[type="reset"],
[type="submit"],
::-webkit-file-upload-button{ /* 2 */
    -webkit-appearance: button; /* 2 */
}

其他reset说明:

/**
 * 根据项目特点
 * 让右侧滚动条始终暴露，防止懒加载等情况下，突然出现滚动条造成页面晃动
 */
html { overflow-y: scroll; }
 
/**
 * 1.用户长按选择文本，禁用设为none
 * 2.用户点击呼出系统默认菜单，禁用设为none
 */
body {
    -webkit-user-select: text; /* 1 */
    -moz-user-select: text; /* 1 */
    -ms-user-select: text; /* 1 */
    user-select: text; /* 1 */
    -webkit-touch-callout: default;/* 2 */
}
 
/**
 * 斜体扶正
 */
address, cite, dfn, em, var, i { font-style: normal; }
 
/**
 * Add the correct display in IE 9-.
 */
audio, video, canvas {
    display: inline-block;
}
 
/**
 * 统一等宽字体
 */
code, kbd, pre, samp, tt { font-family: "Courier New", Courier, monospace; }
 
/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub, sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}
sub {
    bottom: -0.25em;
}
sup {
    top: -0.5em;
}
 
/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
button,
select { /* 1 */
    text-transform: none;
}
 
/**
 * 小于12px的中文很难阅读，让small正常化
 */
small { font-size: 12px; }
 
/**
 * Hide the overflow in IE.
 */
svg:not(:root) {
    overflow: hidden;
}
 
/**
 * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
 *    controls in Android 4.
 * 2. Correct the inability to style clickable types in iOS and Safari.
 */
button,
html [type="button"], /* 1 */
[type="reset"],
[type="submit"] {
    -webkit-appearance: button; /* 2 */
}
 
/**
 * 1. Add the correct display in IE 9-.
 * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
    display: inline-block; /* 1 */
    vertical-align: baseline; /* 2 */
}
 
/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
    height: auto;
}
 
/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
[type="search"] {
    -webkit-appearance: textfield; /* 1 */
    outline-offset: -2px; /* 2 */
}
 
/**
 * Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
 */
[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
}
 
/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button {
    -webkit-appearance: button; /* 1 */
    font: inherit; /* 2 */
}
 
/**
 * Add the correct display in IE.
 * 1.IE 10-
 */
template,
[hidden] { /* 1 */
    display: none;
}
  
/**
 * 设置placeholder样式
 */
::-webkit-input-placeholder{font-size: 1em; line-height: 1; color: #eee;} /* WebKit browsers */
:-moz-placeholder{font-size: 1em; line-height: 1; color: #eee;} /* Mozilla Firefox 4 to 18 */
::-moz-placeholder{font-size: 1em; line-height: 1; color: #eee;} /* Mozilla Firefox 19+ */
:-ms-input-placeholder{font-size: 1em; line-height: 1; color: #eee;} /* Internet Explorer 10+ */

常用样式:

/**
 * 清除浮动
 */
.clearfix:after{content:"";display:table;clear:both;}
  
/**
 * 伸缩盒
 */
.flex {
    display: box; /* OLD - Android 4.4- */
    display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
    display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
    display: -ms-flexbox; /* TWEENER - IE 10 */
    display: -webkit-flex; /* NEW - Chrome */
    display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
}
.flex-1 {
    width: 0; /* For old syntax, otherwise collapses. */
    -webkit-box-flex: 1; /* OLD - iOS 6-, Safari 3.1-6 */
    -moz-box-flex: 1; /* OLD - Firefox 19- */
    -webkit-flex: 1; /* Chrome */
    -ms-flex: 1; /* IE 10 */
    flex: 1; /* NEW, Spec - Opera 12.1, Firefox 20+ */
}
/**
 * H5标签
 */
article,
aside,
footer,
header,
nav,
section,
figcaption,
figure,
main {
  display: block;
}

1、浏览器默认样式

首先纠正一个易错概念。div并非生来就是块元素，而是每个浏览器都有一套默认的css样式（优先级最低），默认样式里会把div设置成display: block;还有margin，padding等。这就是不同浏览器初始化样式不同的原因。也是为什么要做css reset的原因。

注：chrome等可以在调试工具里看到默认样式，是不可修改的，置灰的，如下图。各浏览器默认样式详情请参考《浏览器默认样式对比表》。

这里无需赘述，最直观的就是统计图表，上面已经给出了，另外给大家几个地址进行拓展阅读：

1、css知多少（4）——解读浏览器默认样式 里面有一部分折叠起来的代码（仔细找，要点开才看得到），解读的非常详细。另外，强烈推荐阅读整个系列，后面会附上目录链接

2、reset推荐（已放到页面顶部）

浏览器样式初始化两种流派，一种全部清零——reset，一种按照绝大多数浏览器的样式进行统一——normalize。

normalize的思想是统一各浏览器的样式，也就是说，让浏览器只写标签，不写css也会长得一样。但是对于绝大多数项目而言，我们还是会覆盖掉浏览器的基本样式，所以个人认为，考虑到代码量，复杂程度，还是更推荐reset。但是，阅读《normalize.css源码》，可以大大提高对于浏览器默认样式的理解，极度推荐。

3、H5新标签

引自：《Html5新标签解释及用法》

<article>标签定义外部的内容。比如来自一个外部的新闻提供者的一篇新的文章，或者来自 blog 的文本，或者是来自论坛的文本。亦或是来自其他外部源内容。
HTML5:<article></article>
HTML4:<div></div>

<aside>标签定义 article 以外的内容。aside 的内容应该与 article 的内容相关。
HTML5:<aside>Aside 的内容是独立的内容，但应与文档内容相关。</aside>
HTML4:<div>Aside 的内容是独立的内容，但应与文档内容相关。</div>

<audio> 标签定义声音，比如音乐或其他音频流。
HTML5:<audio src="someaudio.wav">您的浏览器不支持 audio 标签。</audio>
HTML4:<object type="application/ogg" data="someaudio.wav"><param name="src" value="someaudio.wav"></object>

<canvas> 标签定义图形，比如图表和其他图像。这个 HTML 元素是为了客户端矢量图形而设计的。它自己没有行为，但却把一个绘图 API 展现给客户端 JavaScript 以使脚本能够把想绘制的东西都绘制到一块画布上。
HTML5:<canvas id="myCanvas" width="200" height="200"></canvas>
HTML4:<object data="inc/hdr.svg" type="image/svg+xml" width="200" height="200"></object>

<command> 标签定义命令按钮，比如单选按钮、复选框或按钮。
HTML5: <command οnclick="cut()" label="cut">
HTML4: none

<datalist> 标签定义可选数据的列表。与 input 元素配合使用，就可以制作出输入值的下拉列表。
HTML5: <datalist></datalist>
HTML4: see combobox.

<details> 标签定义元素的细节，用户可进行查看，或通过点击进行隐藏。与 <legend> 一起使用，来制作 detail 的标题。该标题对用户是可见的，当在其上点击时可打开或关闭 detail。
HTML5: <details></details>
HTML4: <dl style="display:hidden"></dl>

<embed> 标签定义嵌入的内容，比如插件。
HTML5: <embed src="horse.wav" />
HTML4: <object data="flash.swf" type="application/x-shockwave-flash"></object>

<figcaption> 标签定义 figure 元素的标题。”figcaption” 元素应该被置于 “figure” 元素的第一个或最后一个子元素的位置。
HTML5: <figure><figcaption>PRC</figcaption></figure>
HTML4: none

<figure> 标签用于对元素进行组合。使用 <figcaption> 元素为元素组添加标题。
HTML5: <figure><figcaption>PRC</figcaption><p>The People's Republic of China was born in 1949...</p></figure>
HTML4: <dl><h1>PRC</h1><p>The People's Republic of China was born in 1949...</p></dl>

<footer> 标签定义 section 或 document 的页脚。典型地，它会包含创作者的姓名、文档的创作日期以及/或者联系信息。
HTML5: <footer></footer>
HTML4: <div></div>

<header> 标签定义 section 或 document 的页眉。
HTML5: <header></header>
HTML4: <div></div>

<hgroup> 标签用于对网页或区段（section）的标题进行组合。
HTML5: <hgroup></hgroup>
HTML4: <div></div>

<keygen> 标签定义生成密钥。
HTML5: <keygen>
HTML4: none

<mark>主要用来在视觉上向用户呈现那些需要突出的文字。<mark>标签的一个比较典型的应用就是在搜索结果中向用户高亮显示搜索关键词。
HTML5: <mark></mark>
HTML4: <span></span>

<meter> 标签定义度量衡。仅用于已知最大和最小值的度量。必须定义度量的范围，既可以在元素的文本中，也可以在 min/max 属性中定义。
HTML5: <meter></meter>
HTML4: none

<nav> 标签定义导航链接的部分。
HTML5: <nav></nav>
HTML4:<ul></ul>

<output> 标签定义不同类型的输出，比如脚本的输出。
HTML5: <output></output>
HTML4: <span></span>

<progress> 标签运行中的进程。可以使用 <progress> 标签来显示 JavaScript 中耗费时间的函数的进程。
HTML5: <progress></progress>
HTML4: none

<rp> 标签在 ruby 注释中使用，以定义不支持 ruby 元素的浏览器所显示的内容。
HTML5: <ruby>漢 <rt><rp>(</rp>ㄏㄢˋ<rp>)</rp></rt></ruby>
HTML4: none

<rt> 标签定义字符（中文注音或字符）的解释或发音。
HTML5: <ruby>漢 <rt> ㄏㄢˋ </rt></ruby>
HTML4: none

<ruby> 标签定义 ruby 注释（中文注音或字符）。
HTML5: <ruby>漢 <rt><rp>(</rp>ㄏㄢˋ<rp>)</rp></rt></ruby>
HTML4: none

<section> 标签定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。
HTML5: <section></section>
HTML4: <div></div>

<source> 标签为媒介元素（比如 <video> 和 <audio>）定义媒介资源。
HTML5: <source>
HTML4: <param>

<summary> 标签包含 details 元素的标题，”details” 元素用于描述有关文档或文档片段的详细信息。”summary” 元素应该是 “details” 元素的第一个子元素。
HTML5: <details><summary>HTML 5</summary>This document teaches you everything you have to learn about HTML 5.</details>
HTML4: none

<time> 标签定义日期或时间，或者两者。
HTML5: <time></time>
HTML4: <span></span>

<video> 标签定义视频，比如电影片段或其他视频流。
HTML5: <video src="movie.ogg" controls="controls">您的浏览器不支持 video 标签。</video>
HTML4:<object type="video/ogg" data="movie.ogv"><param name="src" value="movie.ogv"></object>

写在最后

留下几个小彩蛋：

1、ie8+的话，很多属性可以用：

比如display:table，可以根据内容自适应大小，且有块元素的表现

再比如可以利用box-sizing:border-box;来使width=content+padding+border。再也不用担心padding，border对width的影响了（bootstrap设置了*{box-sizing:border-box;}，好暴力。。。）

再比如清除浮动可以写成{content:"";display:table;clear:both;}，等等……

2、a标签的样式顺序应为a, :link, :visited, :hover, :active。可记为LoVe & HAte，具体百度下吧，大概就是不按这个顺序写的话，某些状态样式会被覆盖掉，你永远看不到，当然实际需求当中不太用得到。

3、float的设计初衷是为了实现文字环绕，并不是为了布局。塌陷，清除浮动的知识点，请参考《CSS知多少系列》

4、display:inline-block;很好用，但是元素间会有空隙。这是因为浏览器会把“换行”解析成空白符，会占位。所以要么不换行，要么父元素font-size:0;

5、img会与父容器底部有一点距离，这是因为行内元素的默认对齐方式是baseline，为了适配y、g、p、q等“长尾巴”的字母，baseline与容器底端是有一定距离的（视浏览器而定）。所以要想消除这个距离，设置vertical-align或者设置display都可以，知道了原理，解决办法可以随意。

6、一行排列多个元素，且之间有间距，最后一个不要贴边，可设置父元素的margin为负值。比如，子元素间距都是15px，父元素就可以偷偷地设置margin为-15px，当然爷爷元素需要overflow:hidden；

7、列表里只有第一个不要上边框。试试ul li+li{border-top:1px solid #ccc;}，要活学活用哦

8、css很好玩，试试只用一个div画出各种图形，在移动端可以尽情发挥你的想象力，用css作画。可参考：http://one-div.com/

#div{width: 96px; height: 48px; margin: 20px 20px; float: left; background-color: #ffffff; border-color: #000000; border-style: solid; border-width: 2px 2px 50px 2px; border-radius: 100%; position: relative;}
#div:before{width: 12px; height: 12px; top: 50%; left: 0; content: ""; position: absolute; background-color: #ffffff; border: 18px solid #000000; border-radius: 100%;}
#div:after{width: 12px; height: 12px; top: 50%; left: 50%; background-color: #000000; border: 18px solid #ffffff; border-radius: 100%; content: ""; position: absolute;}

参考资料：

《如何优雅的选择字体(font-family)》 强烈推荐阅读，无论前端还是UI

《Html5新标签解释及用法》 H5新标签 VS H4标签

《浏览器默认样式对比表》 很强大的一个表

《CSS知多少系列》 强烈推荐！！每段信息量都很大！

《normalize.css源码》 源码里注释非常详细

《CSS Reset ，你选对了吗？》 列举了4种主流reset的方案

《Reset CSS:只选对的，不选"贵"的》 可以看看