我们先来说说为什么初始化CSS呢，因为浏览器的兼容问题，不同浏览器对标签的默认值是不同的，如果没有初始化CSS，往往会导致页面在不同浏览器页面在不同浏览器之间出现差异。并且，多数浏览器会默认给初始页面添加上外边距。

我们先来看一个简单的初始化页面：

 * {
     padding: 0;
     margin: 0;
     box-sizing: border-box;
 }

考虑到不同浏览器对有些标签的默认值是不同的，在实际开发中为了确保HTML页面效果与设计图一致，减少不同浏览器之间的页面差异，我们需要初始化CSS样式的属性，使得我们开发网页内容时更加方便简洁，减少CSS代码量，节约网页下载时间。

在做一些简单的demo练习时，我们可以用最简单、直接的方法，具体如下：

*{
padding: 0;
margin: 0;
}

在正式的项目中可以按照如下的基础内容进行初始化（CSS初始化文件命名为reset.css，实际情况可根据团队或个人习惯命名）：

/*必有*/
html {
    font-size: 62.5%;
    overflow-x: hidden;
}
body {
    font-size: 16px;
    font-size: 1.6rem;
    color: #232323;
    font-family: "Microsoft YaHei", Arial, sans-serif;
    -webkit-tap-highlight-color: transparent;
    position: relative;
}
input, textarea {
    font-family: "Microsoft YaHei", Arial, sans-serif;
    font-size: 12px;
    font-size: 1.2rem;
    border: none;
    padding: 0;
    margin: 0;
    outline: none;
}
input[type="button"], input[type="submit"], input[type="reset"], input[type="text"],
button {
    border-radius: 0;
    -webkit-appearance: none;
    padding: 0;
    margin: 0;
    outline: 0;
}
select {
    -webkit-appearance: none;
    -moz-appearance: none;
         appearance: none;
}
a, body, div, em, footer, form, h1, h2, h3, h4, h5, h6, header, html, i, iframe, label, li, menu, nav, p, section, span, strong, ul {
    margin: 0;
    padding: 0;
    border: none;
    word-wrap: break-word;
}
li, ol, ul {
    list-style: none;
}
img {
    border: none;
}
a {
    text-decoration: none;
    color: #333;
    -webkit-tap-highlight-color: transparent;
    -webkit-focus-ring-color: transparent;
}
/*左右浮动（class名根据自己习惯定义）*/
.lt {
    float: left;
}
.rt {
    float: right;
}
/*清除浮动1*/
.clear {
    clear: both;
}
/*清除浮动2*/
.clearfix:after {
    content: "";
    display: block;
    clear: both;
}
.clearfix {
    zoom: 1;
}

/*input placeholder字体颜色*/
:-moz-placeholder {
    /* Mozilla Firefox 4 to 18 */
    color: #999;
}
::-moz-placeholder {
    /* Mozilla Firefox 19+ */
    color: #999;
}
input:-ms-input-placeholder {
    color: #999;
}
input::-webkit-input-placeholder {
    color: #999;
}

此外，也可将项目中可以重复使用的CSS样式也放在reset.css文件中，例如头部/底部导航、默认容器宽度等css样式。除了消除各浏览器对css默认的设置，CSS初始化还能够解决很多复杂的问题，解决浏览器和样式的兼容问题。