CSS初始化科普

 一、为什么要初始化

1、浏览器差异

因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异。

2、提高编码质量

初始化CSS为我们节约网页代码，节约网页下载时间；还会使得我们开发网页内容时更加方便简洁，不用考虑很多。如果不初始化，整个页面做完会很糟糕，重复的css样式很多。我们在开发比较复杂的网页时候就不会知道自己是否已经设置了此处的CSS属性，是否和前面的CSS属性相同，是否统一整个网页的风格和样式。

每次新开发网站或新网页时候通过初始化CSS样式的属性，为我们将用到的CSS或html标签更加方便准确，使得我们开发网页内容时更加方便简洁，同时减少CSS代码量，节约网页下载时间。

二、怎么初始化

最简单的初始化的方式：

* {padding: 0; margin: 0;}

*号这样一个通用符在编写代码的时候是快，但如果网站很大，CSS样式表文件很大，这样写的话，他会把所有的标签都初始化一遍，这样就大大的加强了网站运行的负载，会使网站加载的时候需要很长一段时间。

以下是一些大网页的初始化方式：

京东式初始化：

1.  
   * {
2.  
   margin: 0;
3.  
   padding: 0
4.  
   }
5.  
    
6.  
   em,
7.  
   i {
8.  
   font-style: normal
9.  
   }
10.  
     
11.  
    li {
12.  
    list-style: none
13.  
    }
14.  
     
15.  
    img {
16.  
    border: 0;
17.  
    vertical-align: middle
18.  
    }
19.  
     
20.  
    button {
21.  
    cursor: pointer
22.  
    }
23.  
     
24.  
    a {
25.  
    color: #666;
26.  
    text-decoration: none
27.  
    }
28.  
     
29.  
    a:hover {
30.  
    color: #c81623
31.  
    }
32.  
     
33.  
    button,
34.  
    input {
35.  
    font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif
36.  
    }
37.  
     
38.  
    body {
39.  
    -webkit-font-smoothing: antialiased;
40.  
    background-color: #fff;
41.  
    font: 12px/1.5 Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;
42.  
    color: #666
43.  
    }
44.  
     
45.  
    .hide,
46.  
    .none {
47.  
    display: none
48.  
    }
49.  
     
50.  
    .clearfix:after {
51.  
    visibility: hidden;
52.  
    clear: both;
53.  
    display: block;
54.  
    content: ".";
55.  
    height: 0
56.  
    }
57.  
     
58.  
    .clearfix {
59.  
    *zoom: 1
60.  
    }

淘宝式初始化：

1.  
   body,
2.  
   h1,
3.  
   h2,
4.  
   h3,
5.  
   h4,
6.  
   h5,
7.  
   h6,
8.  
   hr,
9.  
   p,
10.  
    blockquote,
11.  
    dl,
12.  
    dt,
13.  
    dd,
14.  
    ul,
15.  
    ol,
16.  
    li,
17.  
    pre,
18.  
    form,
19.  
    fieldset,
20.  
    legend,
21.  
    button,
22.  
    input,
23.  
    textarea,
24.  
    th,
25.  
    td {
26.  
    margin: 0;
27.  
    padding: 0;
28.  
    }
29.  
     
30.  
    body,
31.  
    button,
32.  
    input,
33.  
    select,
34.  
    textarea {
35.  
    font: 12px/1.5tahoma, arial, \5b8b\4f53;
36.  
    }
37.  
     
38.  
    h1,
39.  
    h2,
40.  
    h3,
41.  
    h4,
42.  
    h5,
43.  
    h6 {
44.  
    font-size: 100%;
45.  
    }
46.  
     
47.  
    address,
48.  
    cite,
49.  
    dfn,
50.  
    em,
51.  
    var {
52.  
    font-style: normal;
53.  
    }
54.  
     
55.  
    code,
56.  
    kbd,
57.  
    pre,
58.  
    samp {
59.  
    font-family: couriernew, courier, monospace;
60.  
    }
61.  
     
62.  
    small {
63.  
    font-size: 12px;
64.  
    }
65.  
     
66.  
    ul,
67.  
    ol {
68.  
    list-style: none;
69.  
    }
70.  
     
71.  
    a {
72.  
    text-decoration: none;
73.  
    }
74.  
     
75.  
    a:hover {
76.  
    text-decoration: underline;
77.  
    }
78.  
     
79.  
    sup {
80.  
    vertical-align: text-top;
81.  
    }
82.  
     
83.  
    sub {
84.  
    vertical-align: text-bottom;
85.  
    }
86.  
     
87.  
    legend {
88.  
    color: #000;
89.  
    }
90.  
     
91.  
    fieldset,
92.  
    img {
93.  
    border: 0;
94.  
    }
95.  
     
96.  
    button,
97.  
    input,
98.  
    select,
99.  
    textarea {
100.  
     font-size: 100%;
101.  
     }
102.  
      
103.  
     table {
104.  
     border-collapse: collapse;
105.  
     border-spacing: 0;
106.  
     }

腾讯式初始化：

1.  
   body,
2.  
   ol,
3.  
   ul,
4.  
   h1,
5.  
   h2,
6.  
   h3,
7.  
   h4,
8.  
   h5,
9.  
   h6,
10.  
    p,
11.  
    th,
12.  
    td,
13.  
    dl,
14.  
    dd,
15.  
    form,
16.  
    fieldset,
17.  
    legend,
18.  
    input,
19.  
    textarea,
20.  
    select {
21.  
    margin: 0;
22.  
    padding: 0
23.  
    }
24.  
     
25.  
    body {
26.  
    font: 12px"宋体", "Arial Narrow", HELVETICA;
27.  
    background: #fff;
28.  
    -webkit-text-size-adjust: 100%;
29.  
    }
30.  
     
31.  
    a {
32.  
    color: #2d374b;
33.  
    text-decoration: none
34.  
    }
35.  
     
36.  
    a:hover {
37.  
    color: #cd0200;
38.  
    text-decoration: underline
39.  
    }
40.  
     
41.  
    em {
42.  
    font-style: normal
43.  
    }
44.  
     
45.  
    li {
46.  
    list-style: none
47.  
    }
48.  
     
49.  
    img {
50.  
    border: 0;
51.  
    vertical-align: middle
52.  
    }
53.  
     
54.  
    table {
55.  
    border-collapse: collapse;
56.  
    border-spacing: 0
57.  
    }
58.  
     
59.  
    p {
60.  
    word-wrap: break-word
61.  
    }

新浪式初始化：

1.  
   body,
2.  
   ul,
3.  
   ol,
4.  
   li,
5.  
   p,
6.  
   h1,
7.  
   h2,
8.  
   h3,
9.  
   h4,
10.  
    h5,
11.  
    h6,
12.  
    form,
13.  
    fieldset,
14.  
    table,
15.  
    td,
16.  
    img,
17.  
    div {
18.  
    margin: 0;
19.  
    padding: 0;
20.  
    border: 0;
21.  
    }
22.  
     
23.  
    body {
24.  
    background: #fff;
25.  
    color: #333;
26.  
    font-size: 12px;
27.  
    margin-top: 5px;
28.  
    font-family: "SimSun", "宋体", "Arial Narrow";
29.  
    }
30.  
     
31.  
    ul,
32.  
    ol {
33.  
    list-style-type: none;
34.  
    }
35.  
     
36.  
    select,
37.  
    input,
38.  
    img,
39.  
    select {
40.  
    vertical-align: middle;
41.  
    }
42.  
     
43.  
    a {
44.  
    text-decoration: none;
45.  
    }
46.  
     
47.  
    a:link {
48.  
    color: #009;
49.  
    }
50.  
     
51.  
    a:visited {
52.  
    color: #800080;
53.  
    }
54.  
     
55.  
    a:hover,
56.  
    a:active,
57.  
    a:focus {
58.  
    color: #c00;
59.  
    text-decoration: underline;
60.  
    }

这篇好文章是转载于：学新通技术网