有哪些CSSreset重设方法

本篇内容主要讲解“有哪些CSS reset重设方法”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“有哪些CSS reset重设方法”吧!

创新新互联，凭借10多年的成都网站制作、成都做网站经验，本着真心·诚心服务的企业理念服务于成都中小企业设计网站有上千案例。做网站建设，选创新互联。

一.最简化的CSS Reset(重设) :

CSS Code复制内容到剪贴板

1. * {   

2.       padding: 0;   

3.       margin: 0;   

4. }  

这是最普遍最简单的CSS重设，将所有元素的padding和margin值都设为0，可以避免一些浏览器在理解这两个属性默认值上的”分歧”。

CSS Code复制内容到剪贴板

1. * {   

2.        padding: 0;   

3.        margin: 0;   

4.        border: 0;   

5. }  

这是在上一个重设的基础上添加了对border属性的重设，初始值为0的确能避免一些问题。

CSS Code复制内容到剪贴板

1. * {   

2.        outline: 0;   

3.        padding: 0;   

4.        margin: 0;   

5.        border: 0;   

6. }  

在前两个的基础上添加了outline属性的重设，防止一些冲突。

二.浓缩实用型CSS Reset(重设):

CSS Code复制内容到剪贴板

1. * {   

2.        vertical-align: baselinebaseline;   

3.        font-weight: inherit;    

4.        font-family: inherit;    

5.        font-style: inherit;   

6.        font-size: 100%;   

7.        outline: 0;   

8.        padding: 0;   

9.        margin: 0;   

10.        border: 0;   

11. }  

该CSS重设方法出自Perishable Press，这是他常用的方法。

三.Poor Man 的CSS Reset:

CSS Code复制内容到剪贴板

1. html, body {    

2.        padding: 0;    

3.        margin: 0;    

4. }   

5. html {   

6.        font-size:1em;   

7. }    

8. body {   

9.        font-size:100%;   

10. }    

11. a img, :link img, :visited img {   

12.        border:0px;   

13. }   

这个重设方法将html和body下元素的padding和margin都设为0，并分别为html标签和body标签下的所有元素设置了初始的字体大小，最重要的是把有链接的图片的默认边框去掉了。

四.Siolon’s Global Reset

CSS Code复制内容到剪贴板

1. * {    

2.     vertical-align: baselinebaseline;   

3.     font-family: inherit;   

4.     fo   

5.   

6. nt-style: inherit;   

7.     font-size: 100%;   

8.     border: none;   

9.     padding: 0;   

10.     margin: 0;    

11. }   

12. body {   

13.     padding: 5px;   

14. }    

15. h2, h3, h4, h5, h6, h7, p, pre, blockquote, form, ul, ol, dl {   

16.     margin: 20px 0;   

17. }   

18. li, dd, blockquote {    

19.     margin-left: 40px;   

20. }    

21. table {    

22.     border-collapse: collapse;    

23.     border-spacing: 0;    

24. }  

五.Shaun Inman’s Global Reset

CSS Code复制内容到剪贴板

1. body, div, dl, dt, dd, ul, ol, li, h2, h3, h4, h5, h6, h7, pre, form, fieldset, input, p, blockquote, table, th, td, embed, object {   

2.     padding: 0;   

3.     margin: 0;    

4. }   

5. table {   

6.     border-collapse: collapse;   

7.     border-spacing: 0;   

8. }   

9.     fieldset, img, abbr {   

10.     border: 0;   

11. }   

12. address, caption, cite, code, dfn, em,    

13. h2, h3, h4, h5, h6, h7, strong, th, var {   

14.     font-weight: normal;   

15.     font-style: normal;   

16. }   

17. ul {   

18.     list-style: none;   

19. }   

20. caption, th {   

21.     text-align: left;   

22. }   

23. h2, h3, h4, h5, h6, h7 {   

24.     font-size: 1.0em;   

25. }   

26. q:before, q:after {   

27.     content: ”;   

28. }   

29. a, ins {   

30.     text-decoration: none;   

31. }  

六.Yahoo(YUI) CSS Reset:

CSS Code复制内容到剪贴板

1. body,div,dl,dt,dd,ul,ol,li,h2,h3,h4,h5,h6,h7,pre,    

2. form,fieldset,input,textarea,p,blockquote,th,td {    

3.     padding: 0;    

4.     margin: 0;    

5. }    

6. table {    

7.     border-collapse: collapse;    

8.     border-spacing: 0;    

9. }    

10. fieldset,img {    

11.     border: 0;    

12. }    

13. address,caption,cite,code,dfn,em,strong,th,var {    

14.     font-weight: normal;    

15.     font-style: normal;    

16. }    

17. ol,ul {    

18.     list-style: none;    

19. }    

20. caption,th {    

21.     text-align: left;    

22. }    

23. h2,h3,h4,h5,h6,h7 {    

24.     font-weight: normal;    

25.     font-size: 100%;    

26. }    

27. q:before,q:after {    

28.     content:”;    

29. }    

30. abbr,acronym {    

31.     border: 0;    

32. }  

七.Eric Meyer’s CSS Reset

CSS Code复制内容到剪贴板

1. html, body, div, span, applet, object, iframe, table, caption,    

2. tbody, tfoot, thead, tr, th, td, del, dfn, em, font, img, ins,    

3. kbd, q, s, samp, small, strike, strong, sub, sup, tt, var,    

4. h2, h3, h4, h5, h6, h7, p, blockquote, pre, a, abbr,    

5. acronym, address, big, cite, code, dl, dt, dd, ol, ul, li,    

6. fieldset, form, label, legend {    

7.     vertical-align: baselinebaseline;    

8.     font-family: inherit;    

9.     font-weight: inherit;    

10.     font-style: inherit;    

11.     font-size: 100%;    

12.     outline: 0;    

13.     padding: 0;    

14.     margin: 0;    

15.     border: 0;    

16. }    

17. :focus {    

18.     outline: 0;    

19. }    

20. body {    

21.     background: white;    

22.     line-height: 1;    

23.     color: black;    

24. }    

25. ol, ul {    

26.     list-style: none;    

27. }    

28. table {    

29.     border-collapse: separate;    

30.     border-spacing: 0;    

31. }    

32. caption, th, td {    

33.     font-weight: normal;    

34.     text-align: left;    

35. }    

36. blockquote:before, blockquote:after, q:before, q:after {    

37.     content: “”;    

38. }    

39. blockquote, q {    

40.     quotes: “” “”;    

41. }  

八.Condensed Meyer Reset:

CSS Code复制内容到剪贴板

1. body, div, dl, dt, dd, ul, ol, li, h2, h3, h4, h5, h6, h7,    

2. pre, form, fieldset, input, textarea, p, blockquote, th, td {    

3.     padding: 0;   

4.     margin: 0;   

5. }   

6.     fieldset, img {    

7.     border: 0;   

8. }   

9. table {   

10.     border-collapse: collapse;   

11.     border-spacing: 0;   

12. }   

13. ol, ul {   

14.     list-style: none;   

15. }   

16. address, caption, cite, code, dfn, em, strong, th, var {   

17.     font-weight: normal;   

18.     font-style: normal;   

19. }   

20. caption, th {   

21.     text-align: left;   

22. }   

23. h2, h3, h4, h5, h6, h7 {   

24.     font-weight: normal;   

25.     font-size: 100%;   

26. }   

27. q:before, q:after {   

28.     content: ”;   

29. }   

30. abbr, acronym {    

31.     border: 0;   

32. }  

九.Ateneu Popular CSS Reset

CSS Code复制内容到剪贴板

1. html, body, div, span, applet, object, iframe, h2, h3, h4,    

2. h5, h6, h7, p, blockquote, pre, a, abbr, acronym,    

3. address, big, cite, code, del, dfn, em, font, img, ins,    

4. kbd, q, s, samp, small, strike, strong, sub, sup, tt,    

5. var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend,    

6. table, caption, tbody, tfoot, thead, tr, th, td {    

7.     margin: 0;    

8.     padding: 0;    

9.     border: 0;    

10.     outline: 0;    

11.     font-weight: inherit;    

12.     font-style: inherit;    

13.     font-size: 100%;    

14.     font-family: inherit;    

15.     vertical-align: baselinebaseline;    

16. }    

17. :focus {   

18.     outline: 0;   

19. }    

20. a, a:link, a:visited, a:hover, a:active{   

21.     text-decoration:none  

22. }    

23. table {   

24.     border-collapse: separate;   

25.     border-spacing: 0;   

26. }    

27. th, td {   

28.     text-align: left;   

29.     font-weight: normal;   

30. }    

31. img, iframe {   

32.     border: none;   

33.     text-decoration:none;   

34. }    

35. ol, ul {   

36.     list-style: none;   

37. }    

38. input, textarea, select, button {   

39.     font-size: 100%;   

40.     font-family: inherit;   

41. }    

42. select {   

43.     margin: inherit;   

44. }    

45. hr {   

46.     margin: 0;   

47.     padding: 0;   

48.     border: 0;   

49.     color: #000;   

50.     background-color: #000;   

51.     height: 1px  

52. }  

十.Chris Poteet’s Reset CSS

CSS Code复制内容到剪贴板

1. * {    

2.     vertical-align: baselinebaseline;    

3.     font-family: inherit;    

4.     font-style: inherit;    

5.     font-size: 100%;    

6.     border: none;    

7.     padding: 0;    

8.     margin: 0;    

9. }    

10. body {    

11.     padding: 5px;    

12. }    

13. h2, h3, h4, h5, h6, h7, p, pre, blockquote, form, ul, ol, dl {    

14.     margin: 20px 0;    

15. }    

16. li, dd, blockquote {    

17.     margin-left: 40px;    

18. }    

19. table {    

20.     border-collapse: collapse;    

21.     border-spacing: 0;    

22. }  

十一.Tantek Celik Reset CSS

CSS Code复制内容到剪贴板

1. :link,:visited { text-decoration:none }    

2. ul,ol { list-style:none }    

3. h2,h3,h4,h5,h6,h7,pre,code { font-size:1em; }    

4. ul,ol,li,h2,h3,h4,h5,h6,h7,pre,form,body,html,p,blockquote,fieldset,input    

5. { margin:0; padding:0 }    

6. a img,:link img,:visited img { border:none }    

7. address { font-style:normal }  

十二.Christian Montoya Reset CSS

CSS Code复制内容到剪贴板

1. html, body, form, fieldset {    

2.     margin: 0;    

3.     padding: 0;    

4.     font: 100%/120% Verdana, Arial, Helvetica, sans-serif;    

5. }    

6. h2, h3, h4, h5, h6, h7, p, pre,    

7. blockquote, ul, ol, dl, address {    

8.     margin: 1em 0;    

9.     padding: 0;    

10. }    

11. li, dd, blockquote {    

12.     margin-left: 1em;    

13. }    

14. form label {    

15.     cursor: pointer;    

16. }    

17. fieldset {    

18.     border: none;    

19. }    

20. input, select, textarea {    

21.     font-size: 100%;    

22.     font-family: inherit;    

23. }  

十三.Rudeworks Reset CSS

CSS Code复制内容到剪贴板

1. * {    

2.     margin: 0;    

3.     padding: 0;    

4.     border: none;    

5. }    

6. html {    

7.     font: 62.5% “Lucida Grande”, Lucida, Verdana, sans-serif;    

8.     text-shadow: #000 0px 0px 0px;    

9. }    

10. ul {    

11.     list-style: none;    

12.     list-style-type: none;    

13. }    

14. h2, h3, h4, h5, h6, h7, p, pre,    

15. blockquote, ul, ol, dl, address {    

16.     font-weight: normal;    

17.     margin: 0 0 1em 0;    

18. }    

19. cite, em, dfn {    

20.     font-style: italic;    

21. }    

22. sup {    

23.     position: relative;    

24.     bottombottom: 0.3em;    

25.     vertical-align: baselinebaseline;    

26. }    

27. sub {    

28.     position: relative;    

29.     bottombottom: -0.2em;    

30.     vertical-align: baselinebaseline;    

31. }    

32. li, dd, blockquote {    

33.     margin-left: 1em;    

34. }    

35. code, kbd, samp, pre, tt, var, input[type='text'], textarea {    

36.     font-size: 100%;    

37.     font-family: monaco, “Lucida Console”, courier, mono-space;    

38. }    

39. del {    

40.     text-decoration: line-through;    

41. }    

42. ins, dfn {    

43.     border-bottom: 1px solid #ccc;    

44. }    

45. small, sup, sub {    

46.     font-size: 85%;    

47. }    

48. abbr, acronym {    

49.     text-transform: uppercase;    

50.     font-size: 85%;    

51.     letter-spacing: .1em;    

52.     border-bottom-style: dotted;    

53.     border-bottom-width: 1px;    

54. }    

55. a abbr, a acronym {    

56.     border: none;    

57. }    

58. sup {    

59.     vertical-align: super;    

60. }    

61. sub {    

62.     vertical-align: sub;    

63. }    

64. h2 {    

65.     font-size: 2em;    

66. }    

67. h3 {    

68.     font-size: 1.8em;    

69. }    

70. h4 {    

71.     font-size: 1.6em;    

72. }    

73. h5 {    

74.     font-size: 1.4em;    

75. }    

76. h6 {    

77.     font-size: 1.2em;    

78. }    

79. h7 {    

80.     font-size: 1em;    

81. }    

82. a, a:link, a:visited, a:hover, a:active {    

83.     outline: 0;    

84.     text-decoration: none;    

85. }    

86. a img {    

87.     border: none;    

88.     text-decoration: none;    

89. }    

90. img {    

91.     border: none;    

92.     text-decoration: none;    

93. }    

94. label, button {    

95.     cursor: pointer;    

96. }    

97. input:focus, select:focus, textarea:focus {    

98.     background-color: #FFF;    

99. }    

100. fieldset {    

101.     border: none;    

102. }    

103. .clear {    

104.     clear: both;    

105. }    

106. .float-left {    

107.     float: left;    

108. }    

109. .float-rightright {    

110.     float: rightright;    

111. }    

112. body {    

113.     text-align: center;    

114. }    

115. #wrapper {    

116.     margin: 0 auto;    

117.     text-align: left;    

118. }  

十四. Anieto2K Reset CSS

CSS Code复制内容到剪贴板

1. html, body, div, span, applet, object, iframe,    

2. h2, h3, h4, h5, h6, h7, p,    

3. blockquote, pre, a, abbr, acronym, address, big,    

4. cite, code, del, dfn, em, font, img,    

5. ins, kbd, q, s, samp, small, strike,    

6. strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li,    

7. fieldset, form, label, legend,    

8. table, caption, tbody, tfoot, thead, tr, th, td,    

9. center, u, b, i {    

10.     margin: 0;    

11.     padding: 0;    

12.     border: 0;    

13.     outline: 0;    

14.     font-weight: normal;    

15.     font-style: normal;    

16.     font-size: 100%;    

17.     font-family: inherit;    

18.     vertical-align: baselinebaseline    

19. }    

20. body {    

21.     line-height: 1    

22. }    

23. :focus {    

24.     outline: 0    

25. }    

26. ol, ul {    

27.     list-style: none    

28. }    

29. table {    

30.     border-collapse: collapse;    

31.     border-spacing: 0    

32. }    

33. blockquote:before, blockquote:after, q:before, q:after {    

34.     content: “”    

35. }    

36. blockquote, q {    

37.     quotes: “” “”    

38. }    

39. input, textarea {    

40.     margin: 0;    

41.     padding: 0    

42. }    

43. hr {    

44.     margin: 0;    

45.     padding: 0;    

46.     border: 0;    

47.     color: #000;    

48.     background-color: #000;    

49.     height: 1px    

50. }  

十五.CSSLab CSS Reset

CSS Code复制内容到剪贴板

1. html, body, div, span, applet, object, iframe, h2, h3, h4,    

2. h5, h6, h7, p, blockquote, pre, a, abbr, acronym, address,    

3. big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp,    

4. small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li,    

5. fieldset, form, label, legend, table, caption, tbody, tfoot,    

6. thead, tr, th, td {    

7.     margin: 0;    

8.     padding: 0;    

9.     border: 0;    

10.     outline: 0;    

11.     font-weight: inherit;    

12.     font-style: inherit;    

13.     font-size: 100%;    

14.     font-family: inherit;    

15.     vertical-align: baselinebaseline;    

16. }    

17. :focus {    

18.     outline: 0;    

19. }    

20. table {    

21.     border-collapse: separate;    

22.     border-spacing: 0;    

23. }    

24. caption, th, td {    

25.     text-align: left;    

26.     font-weight: normal;    

27. }    

28. a img, iframe {    

29.     border: none;    

30. }    

31. ol, ul {    

32.     list-style: none;    

33. }    

34. input, textarea, select, button {    

35.     font-size: 100%;    

36.     font-family: inherit;    

37. }    

38. select {    

39.     margin: inherit;    

40. }    

41. /* Fixes incorrect placement of numbers in ol’s in IE6/7 */    

42. ol { margin-left:2em; }    

43. /* == clearfix == */    

44. .clearfix:after {    

45.     content: “.”;    

46.     display: block;    

47.     height: 0;    

48.     clear: both;    

49.     visibility: hidden;    

50. }    

51. .clearfix {display: inline-block;}    

52. * html .clearfix {height: 1%;}    

53. .clearfix {display: block;}  

到此，相信大家对“有哪些CSS reset重设方法”有了更深的了解，不妨来实际操作一番吧！这里是创新互联网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！