CSS-12-初始化代码

为了清除标签原有的一些默认样式
最简单的初始化方法：（强烈不推荐，影响性能）

* {
	margin: 0;
	padding: 0;
}

淘宝初始化代码

body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; }
body, button, input, select, textarea { font:12px/1.5tahoma, arial, \5b8b\4f53; }
h1, h2, h3, h4, h5, h6{ font-size:100%; }
address, cite, dfn, em, var { font-style:normal; }
code, kbd, pre, samp { font-family:couriernew, courier, monospace; }
small{ font-size:12px; }
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; }
fieldset, img { border:0; }
button, input, select, textarea { font-size:100%; }
table { border-collapse:collapse; border-spacing:0; }

个人写法
1.pc端

/* 初始化代码 */
body,
 h1, 
 h2, 
 h3, 
 h4,
 h5, 
 h6, 
 hr, 
 p, 
 blockquote, 
 dl, 
 dt, 
 dd, 
 ul, 
 ol,
  li, 
  pre, 
  form, 
  fieldset, 
  legend, 
  button,
   input,
   textarea, 
   th, 
   td  {
    /*  清除内外边距 */
    margin: 0;
    padding: 0;
}

li {
    /* 去掉li标签的小点点 */
    list-style: none;
}

a {
    /* 清除a标签的下划线以及修改默认颜色 */
    text-decoration: none;
    color: #000;
}

input {
    /* 清除input默认的边框 */
    border: none;
    /* 清除外轮廓,高亮线 */
    outline: none;
}

img {
    /* 清除input默认的边框 */
    border: none;
    /* 清除img标签的边框--在低版本的ie浏览器自带边框 */
    vertical-align: middle;
    /* 控制图片与文字中线对齐 */
}

i {
    font-style: normal;
    /* 将i标签的倾斜效果清除 */
}

body {
    font-size: 12px;
    /* 将浏览器的默认字体大小改为12px */
    /* 为什么标签的高度不会等于文字的高度 */
    /* 原因是因为标签有默认的行高 */
    /* 将标签的高度设置到等于文字的高度 */
    line-height: 1;
    /* 行高等于1的意思,就是1*当前字体大小 */
    background-color: #ccc;
}

/*清除浮动*/
.clearfix::after {
    content: ".";
    clear: both;
    display: block;
    height: 0;
    visibility: hidden;
}

.clearfix {
    *zoom: 1;
}

/*设置版心为1200px,主要针对版心布局*/
.w {
    width: 1200px;//参数可更改
    margin: 0 auto;
}

2.移动端

/* 初始化代码 */
body,
 h1, 
 h2, 
 h3, 
 h4,
 h5, 
 h6, 
 hr, 
 p, 
 blockquote, 
 dl, 
 dt, 
 dd, 
 ul, 
 ol,
  li, 
  pre, 
  form, 
  fieldset, 
  legend, 
  button,
   input,
   textarea, 
   th, 
   td  {
    /*  清除内外边距 */
    margin: 0;
    padding: 0;
    /* 移动端的内减模式 */
   box-sizing: border-box;
}

li {
    /* 去掉li标签的小点点 */
    list-style: none;
}

a {
    /* 清除a标签的下划线以及修改默认颜色 */
    text-decoration: none;
    color: #000;
    /* 移动端点击a链接出现蓝色背景问题解决 */
    -webkit-tap-highlight-color: transparent;
}

input {
    /* 清除input默认的边框 */
    border: none;
    /* 清除外轮廓,高亮线 */
    outline: none;
}

img {
    /* 清除input默认的边框 */
    border: none;
    /* 清除img标签的边框--在低版本的ie浏览器自带边框 */
    vertical-align: middle;
    /* 控制图片与文字中线对齐 */
}

i {
    font-style: normal;
    /* 将i标签的倾斜效果清除 */
}

body {
    font-size: 12px;
    /* 将浏览器的默认字体大小改为12px */
    /* 为什么标签的高度不会等于文字的高度 */
    /* 原因是因为标签有默认的行高 */
    /* 将标签的高度设置到等于文字的高度 */
    line-height: 1;
    /* 行高等于1的意思,就是1*当前字体大小 */
    background-color: #ccc;
}

/*清除浮动*/
.clearfix::after {
    content: ".";
    clear: both;
    display: block;
    height: 0;
    visibility: hidden;
}

.clearfix {
    *zoom: 1;
}

/*设置版心为1200px,主要针对版心布局*/
.w {
    width: 1200px;//参数可更改
    margin: 0 auto;
}

/* 限制版心容器的宽度范围, */  
.container {
    width: 100%;
    min-width: 320px;
    max-width: 750px;
    margin: 0 auto;
}

注意:移动端的顶部和尾部的固定也要加上版心容器类名

修改行高为标准的 100% 或者 150%
百分比指的是行高,当前字体大小乘以百分比就是行高
font:12px/100% "黑体";