目前比较全的CSS reset重设方法总结

互联网
就让心静静地置于时光的一隅，用一片花香的暖，守候心灵的风景，正如世间每一种长久的缘都要悉心来呵护。经年后，那久久留存在心底的目光，是微细的心，是相知的暖。一梦许是无痕，一梦花又盛开。年复一年，碾过昔日的足迹，我的灵魂睡在那些温暖的文字里，与感恩和快乐相依，或喜或泣，皆是生活的一脉馨香。 "

在当今网页设计/开发实践中，使用CSS来为语义化的(X)HTML标记添加样式风格是重要的关键。在设计师们的梦想中都存在着这样的一个完美世界:所有的浏览器都能够理解和适用多有CSS规则，并且呈现相同的视觉效果(没有兼容性问题)。但是，我们并没有生活在这个完美的世界，现实中发生的失窃却总是恰恰相反，很多CSS样式在不同的浏览器中有着不同的解释和呈现。

　　当今流行的浏览器(如:Firefox、Opera、Internet Explorer、Chrome、Safari等等)中，有一些都是以自己的方式去理解CSS规范，这就会导致有的浏览器对CSS的解释与设计师的CSS定义初衷相冲突，使得网页的样子在某些浏览器下能正确按照设计师的想法显示，但有些浏览器却并没有按照设计师想要的样子显示出来，这就导致浏览器的兼容性问题。更糟的是，有的浏览器完全无视CSS的一些声明和属性。

　　正因为上述冲突和问题依然存在于这个”不完美的世界”，所以一些设计师想到了一种避免浏览器兼容性问题的方法，那就是CSS Reset，什么是CSS Reset？我们可以把它叫做CSS重设，也有人叫做CSS复位、默认CSS、CSS重置等。CSS重设就是由于各种浏览器解释CSS样式的初始值有所不同，导致设计师在没有定义某个CSS属性时，不同的浏览器会按照自己的默认值来为没有定义的样式赋值，所以我们要先定义好一些CSS样式，来让所有浏览器都按照同样的规则解释CSS，这样就能避免发生这种问题。

一.最简化的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. aimg,:linkimg,:visitedimg{
  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
  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. h1,h2,h3,h4,h5,h6,p,pre,blockquote,form,ul,ol,dl{
  16. margin:20px0;
  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,h1,h2,h3,h4,h5,h6,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. h1,h2,h3,h4,h5,h6,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. h1,h2,h3,h4,h5,h6{
  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,h1,h2,h3,h4,h5,h6,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. h1,h2,h3,h4,h5,h6{
  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. h1,h2,h3,h4,h5,h6,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,h1,h2,h3,h4,h5,h6,
  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. h1,h2,h3,h4,h5,h6{
  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,h1,h2,h3,
  2. h4,h5,h6,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. h1,h2,h3,h4,h5,h6,p,pre,blockquote,form,ul,ol,dl{
  14. margin:20px0;
  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. h1,h2,h3,h4,h5,h6,pre,code{font-size:1em;}
  4. ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input
  5. {margin:0;padding:0}
  6. aimg,:linkimg,:visitedimg{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. h1,h2,h3,h4,h5,h6,p,pre,
  7. blockquote,ul,ol,dl,address{
  8. margin:1em0;
  9. padding:0;
  10. }
  11. li,dd,blockquote{
  12. margin-left:1em;
  13. }
  14. formlabel{
  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%“LucidaGrande”,Lucida,Verdana,sans-serif;
  8. text-shadow:#0000px0px0px;
  9. }
  10. ul{
  11. list-style:none;
  12. list-style-type:none;
  13. }
  14. h1,h2,h3,h4,h5,h6,p,pre,
  15. blockquote,ul,ol,dl,address{
  16. font-weight:normal;
  17. margin:001em0;
  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,“LucidaConsole”,courier,mono-space;
  38. }
  39. del{
  40. text-decoration:line-through;
  41. }
  42. ins,dfn{
  43. border-bottom:1pxsolid#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. aabbr,aacronym{
  56. border:none;
  57. }
  58. sup{
  59. vertical-align:super;
  60. }
  61. sub{
  62. vertical-align:sub;
  63. }
  64. h1{
  65. font-size:2em;
  66. }
  67. h2{
  68. font-size:1.8em;
  69. }
  70. h3{
  71. font-size:1.6em;
  72. }
  73. h4{
  74. font-size:1.4em;
  75. }
  76. h5{
  77. font-size:1.2em;
  78. }
  79. h6{
  80. font-size:1em;
  81. }
  82. a,a:link,a:visited,a:hover,a:active{
  83. outline:0;
  84. text-decoration:none;
  85. }
  86. aimg{
  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:0auto;
  117. text-align:left;
  118. }

十四. Anieto2K Reset CSS

CSS Code复制内容到剪贴板
  1. html,body,div,span,applet,object,iframe,
  2. h1,h2,h3,h4,h5,h6,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,h1,h2,h3,
  2. h4,h5,h6,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. aimg,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. /*Fixesincorrectplacementofnumbersinol’sinIE6/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重设目前先总结到这里，这15套重设方法其实都是有共同点的，也许有的实现方法不同，但大部分都是同一个目的，就是为了让更多的浏览器能显示同样的效果。有了这些CSS重设作为资料和参考，也许会对你的工作有所帮助甚至提高效率，但是，毕竟这些重设都是别人写的，你完全也可以为自己量身定制一套CSS重设。

到此这篇关于目前比较全的CSS reset重设方法总结就介绍到这了。一善升起，万恶俱下。善如萤火，聚集多了，一样可以照明驱暗。更多相关目前比较全的CSS reset重设方法总结内容请查看相关栏目，小编编辑不易，再次感谢大家的支持！

您可能有感兴趣的文章
css让页脚保持在底部位置的四种方案
Flex布局史上最简单使用语法教程
新的CSS 伪类函数 :is() 和 :where()示例详解
纯CSS打字动画的如何实现示例
CSS浮动引起的高度塌陷问题