样式重置 css reset

 

新浪的初始化:

复制代码
 1 html,body,ul,li,ol,dl,dd,dt,p,h1,h2,h3,h4,h5,h6,form,fieldset,legend,img {
 2     margin: 0;
 3     padding: 0
 4 }
 5 fieldset,img {
 6     border: 0
 7 }
 8 img {
 9     display: block
10 }
11 address,caption,cite,code,dfn,th,var {
12     font-style: normal;
13     font-weight: normal
14 }
15 ul,ol {
16     list-style: none
17 }
18 input {
19     padding-top: 0;
20     padding-bottom: 0;
21     font-family: "SimSun","宋体"
22 }
23 input::-moz-focus-inner {
24     border: 0;
25     padding: 0
26 }
27 select,input {
28     vertical-align: middle
29 }
30 select,input,textarea {
31     font-size: 12px;
32     margin: 0
33 }
34 input[type="text"],input[type="password"],textarea {
35     outline-style: none;
36     -webkit-appearance: none
37 }
38 textarea {
39     resize: none
40 }
41 table {
42     border-collapse: collapse
43 }
复制代码

京东的初始化:

复制代码
 1 * {
 2     margin: 0;
 3     padding: 0
 4 }
 5 em,i {
 6     font-style: normal
 7 }
 8 li {
 9     list-style: none
10 }
11 img {
12     border: 0;
13     vertical-align: middle
14 }
15 button {
16     cursor: pointer
17 }
18 a {
19     color: #666;
20     text-decoration: none
21 }
22 a:hover {
23     color: #c81623
24 }
复制代码

大众版初始化:

复制代码
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}
h1,h2,h3,h4,h5,h6,em,i {
    font-weight: 100;
    font-style: normal
}
ul,ol,li {
    list-style-type: none
}
a {
    color: #666;
    text-decoration: none;
    outline: 0
}
a:hover {
    text-decoration: none
}  
复制代码

  看到这些是不是感觉自己平时也是这么写的?其实我之前也是这么写的,后来看到张鑫旭大神的文章后才知道有一种更好的写法,更简单、更高效。自己也已经亲测过了div、li、tr、td这种标签默认就没有margin和padding,dt标签的默认的margin和padding就是0,还有dfn, ins, kbd, q, samp, sub, sup, var这些标签平常我们网站上也用不到,所以就没必要重置,像京东这种一个 * 号全部重置,本着宁可错杀三千也不放过一个这么暴力的做法最好避免,不,应该是杜绝这种写法,不过大家在写一个简单的测试页面的时候可以暂时用一下,因为我平时也是这么写的,主要是快速不用写太多标签,注意只是测试暂时可以用一下。。。

  还有一些h1、h2、h3、h4、h5、h6这些标签也可以酌情处理,一般用到几个就写几个不用全部重置,像h1这个标签按其seo方面来考虑,一个页面最好只有一个,所以没必要开始的时候就重置其样式,等你按设计稿写样式的时候又重置一次,这样就相当于浏览器渲染了2次,完全没有必要,你可能会说这也没几个不会有什么影响,错,既然我们是做重构的就要本着能少则少的理念去做,如今时间就是金钱,即使提高0.1秒的载入时间我们也是有必要去争取的。

  网上特意搜了一下html标签的默认样式和浏览器默认样式,整理了一下有兴趣的可以看一下~

View Code

  总结一下,我们写代码的时候可以参考别人的代码,找到自己需要的,不用全部都copy过来,即浪费代码又浪费性能。好了就到这里吧,如果文中有错误的地方还望指正,我们共同进步吧。

  今天周一上班感觉好困啊,如今天气冷了早上根本就起不来,有多少人跟我一样周一是一个迷糊的一天。。。

原文地址:https://www.cnblogs.com/lsongyang/p/8880637.html