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

1、目前比较全的cssreset重设方法总结在当今网页设计/开发实践中，使用css来为语义化的 （x）html标记添加样式风格是重要的关键。在设计师们的梦 想中都存在着这样的一个完美世界:所有的浏览器都能够理 解和适用多有css规则，并且呈现相同的视觉效果（没有兼 容性问题）。但是，我们并没有生活在这个完美的世界，现 实中发生的失窃却总是恰恰相反，很多css样式在不同的 浏览器中有着不同的解释和呈现。当今流行的浏览器（如：firefox、opera、inter netexplorer > chrome> saf ari 等等）中，有一些都是以自 己的方式去理解css规范，这就会导致有的

2、浏览器对css的 解释与设计师的css定义初衷相冲突，使得网页的样子在 某些浏览器下能正确按照设计师的想法显示，但有些浏览 器却并没有按照设计师想要的样子显示出来，这就导致浏 览器的兼容性问题。更糟的是，有的浏览器完全无视c ss 的一些声明和属性。正因为上述冲突和问题依然存在于这个”不完美的世 界”，所以一些设计师想到了一种避免浏览器兼容性问题的 方法，那就是cssreset,什么是cssreset ?我们可以把它 叫做cs s重设，也有人叫做cs s复位、默认css、c ss重 置等。css重设就是由于各种浏览器解释css样式的初始值 有所不同，导致设计师在没有定义某个css属性时，不同

3、的浏览器会按照自己的默认值来为没有定义的样式赋值， 所以我们要先定义好一些css样式，来让所有浏览器都按 照同样的规则解释css,这样就能避免发生这种问题。一. 最简化的cssr eset （重设）:cs scode复制内容到剪贴板*padding :0;margin:0 ;这是最普遍最简单的css重设，将所有元素的padding 和margin值都设为0 ,可以避免一些浏览器在理解这两个 属性默认值上的”分歧”。cssco de复制内容到剪贴板*padding:0;margin:0;bo rder:0;这是在上一个重设的基础上添加了对border属性的重 设，初始值为0的确能避免一些问题。c

4、s scode复制内容到剪贴板*outline :0:padding:0;margin:0;border:0;在前两个的基础上添加了 outline属性的重设，防止一些冲突。二. 浓缩实用型cssre set （重设）：css code复制内容到剪贴板*ver tic al-align:ba selinebasel ine:font-we ight: inheri t;font-fami ly: inherit;font-style:inherit;fon t-size: 100%;outline:0;padding:0;m argin:0;bor der:0;该c ss重设方法出自per i

5、shablepres s,这是他常用的方法。三. poorman 的 c ssreset:css code复制内容到剪贴板html, bodypadding:0;m argin:0;ht ml fontsiz e: lem;body font-size:100%;aim g, :linkimg, :visitedimg border:0px ;这个重设方法将html和body下元素的padding和m argin都设为0,并分别为html标签和b ody标签下的所有 元素设置了初始的字体大小，最重要的是把有链接的图片 的默认边框去掉了。四. siolon" s globalreset

6、csscode复制内容到剪贴板*ver tical-align :baselineba seline; font -family: inh erit;fonts tyle: inheri t;font-size : 100%;borde r :none;padd ing:0;margi n:0;body p adding:5px;uote, form, uhl, h2, h3 , h4, h5, h6, p , pre, blockq l,ol, dlmar gin:20px0;li, dd, block quote margi nleft: 40px ;table b order-col l

7、a pse:collaps e;border-sp acing: 0;五. shaunlnma n" sglobalre setcsscode复制内容到剪贴板body, div, dl, dt, dd, ul, ol,li, hl, h2, h3, h4, h5, h6, pre, form, fieldset, input ,p, blockquo te, table, th , td, embed, o bject paddi ng:0;margin :0;table border-col lapse:colla pse;border-spacing:0;fieldset, im

8、 g, abbr bord er:0;add ress, captio n, cite, code , dfn, em,h 1, h2, h3, h4, h5, h6, stron g, th, var fo ntweight: n ormal; font-style:norma 1;ullist-style:none;caption, th text-align : left;hl, h 2, h3, h4, h5, h6 font-siz e: 1. oem;q: before, q:af ter content :"a, ins text-decor ation:none;六.

9、 yahoo(yui)cssrese t:csscode复制内容到剪贴板i,hl,h2, h3,p,blockquotbod y, div, dl, dt , dd, ul, ol, 1h4, h5, h6, pr e,form, f i eldse t, inpu t, text area., e, th, tdpad ding:0;marg in:o;table border-c oilapse:col lapse;borde r-spacing: 0 ;fieldset, imgborder:0;ite, code, dfaddress, caption, cn, em, strong

10、, th, var fon t-weight: no rmal;font-s tyle:normal ;ol, ul lis t-style:non e;caption, thtext-ali gn: left;hl ,h2, h3,h4,h5,h6 font-w eight: norma, 1;font-size : 100%;q:be fore, q:afte r content:v ;abbr, aero nymborder:0;七. eric meyer，scssr esetcsscode复制内容到剪贴板h tml, body, di v, span, appl et, object,

11、 i frame, table , caption,tbody, tfoot , thead, tr, t h, td, del, df n, em, font, i mg, ins,kb d, q, s, samp, small, strik e, strong, su b, sup, tt, va r,hl, h2, h 3, h4, h5, h6, p, blockquot e, pre, a, abb r, acronym , address, bi g, cite, code , dl, dt, dd, o 1, ul, li,f ieldset, for m, label, leg

12、 end verti cal-align:b aselinebase line;font-f amily: inher it; font-wei ght: inherit ; font-style : inherit;fo nt-size: 100 %;outline:0 ;padding:0;margin:0;bo rder:0;:fo cus outline :0;body ba ckground:wh ite;line-he ight: 1;colo r:black;ol , ul list-st yle:none;t ablebord er-collapse :separate; b

13、order-spaci ng:0;capti on, th, tdfo nt-weight: n omial; text-align:left;blockquo te:before,b lockquote:a fter, q:befo re, q:aftercontent:;blockquote , q quotes:；八. co ndensedmeye rreset:cssc ode复制内容到剪贴板body, div, dl, dt, dd, ul , ol, li, hl, h 2, h3, h4, h5, h6, pre, fo rm, fieldset , input, text ar

14、ea, p, bloc kquote, th, t d padding:0 ;margin:0;fieldset, im gborder:0;tablebo rder-collap se:collapse ;border-spa cing:0;ol, ul list-sty le:none;address, cap tion, cite, c ode, dfn, em, strong, th, v ar font-wei ght:normal;font-style:normal;cap tion, thtex t-align: lef t;hl, h2, h3 , h4, h5, h6 f o

15、nt-weight:normal;font -size: 100%;q:before,q : after cont ent: abbr , acronym bo rder:0;九. ateneupopu larcssresetcsscode复制内容到剪贴板html, body,div, sp an, applet, o bject, ifram e, hl, h2, h3,h4, h5, h6, p, blockquot e, pre, a, abb r, acronym,address, bi g, cite, code , del, dfn, em , font, img, i ns, k

16、bd, q, s, samp, smal 1, strike, st rong, sub, su p, tt, var, dl, dt, dd, ol , ul, li, fieldset, form, 1abel,legend ,table, ca ption, tbody , tfoot, thea d, tr, th, td margin:0;pa dding:0;bor der:0;outli ne:0;font-w eight: inher it;font-sty le: inherit; font-size: 1 00%;font-fa mily: inheri t;vertica

17、 l-align:bas elinebaseli ne;:focus outline:0;a, a: 1 ink, a: visited, a :hover, a:ac tive textd ecoration:n onetableborder-col lapse: separ ate:border-spacing:0;th, td text-align:left;font-weight :normal:im g, i frame bo rder :none;text-decor ation:none;ol, ul list 一style:none ;input, t extarea, sei

18、 ect, button font-size: 1 00%;font-fa mily: inheri t;select m argin:inher it;hrmarg in:0;paddin g:0;border:0;color:#00 0;backgro und-color:#000;height:lpx十.chr ispoteet' sr esetcsscssc ode复制内容到剪贴板*vertica, 1-align:bas elinebaseli ne;fontfam ily: inherit ; font-style : inherit;fo nt-size: 100 %;b

19、order: no ne: padding:0;margin:0;body paddi ng:5px;hl,h2, h3, h4,h5, h6, p, pre , blockquote , form, ul, ol , dl margin:20px0;li, d d, blockquot e margin-le ft :40px;ta ble borde r-collapse:collapse;bo rder-spacin g:0;h t antekcelikr esetcsscssc ode复制内容到剪贴板:link, :vi sitedtext-decoration:noneul, o 1

20、 list-styl e:nonehl , h2, h3, h4, h 5, h6, pre, co defont-siz e: lem;ul , ol, li, hl, h 2, h3, h4, h5, h6, pre, form , body, html, p, blockquot e, fieldset, inputmargi n:0;padding :0aimg, : linkimg, : vi sitedimgbo rder :noneaddress fo nt-style: no rmal十二.c hristianmon toyaresetcs scsscode复制内容到剪贴板ht

21、ml , body, form, fieldset ma rgin:0;padd ing:0;fon t:l 00%/120% verdana, ari al, helve tic a, sa ns- seri f;hl, h2, h3, h4, h5, h6 , p, pre,bl ockquote, ul , ol, dl, addr ess margin:lemo;paddin g:0;li, dd,blockquotemargin-left : lem;forml abel cursor : pointer;f ieldsetbor der :none;input, sele ct,

22、textarea font-size:100%;font-f amily: inher it;十三.rude worksresetc sscsscode复制内容到剪贴板*mar gin:0;paddi ng:0;border : none;html font:62. 5% lucidagr ande v ,lucid a, verdana, sans-serif;textshado w: #0000px0p xopx;ulli st-style:no ne;list-s tyle-type:n one;hl, h 2, h3, h4, h5, h6, p, pre, blockquote, u

23、l, ol, dl, ad dress font-weight: norm al;margin:0 olemo;cite , em, dfn fon t-style: ita lie;suppo sition:rela tive;bottom bottom:0. 3e m;vertica l-align:bas elinebaseli ne;sub pos ition:relat ive;bottomb ottom：-0. 2e m;vertica 1-align:bas elinebaseli ne;li, dd, b lockquote m argin-left:lem;code , kb

24、d, samp, p re, tt, var, input type二'text' , text areafont-s ize: 100%;font - fandly: monaco,“ lucidaconsole ” , courier, m ono-space;deltext-decoration:line-throug h;ins, dfnborder-bo ttom: lpxsol idttccc;sma 11, sup, sub font-size:8 5%; abbr, ac ronym tex t-transform :uppercase;font-size:8

25、5%; letters pacing:. lem ;border-b ottom-style :dotted; b order-botto m-width: lpx ;aabbr, aac ronymborde r :none;sup vertical -align:supe r;sub vert ical-align: sub;hlfon t-size:2em;h2font-si ze: 1. 8em;h3font-size : 1. 6em;h4font-size: 1 4em;h5fo ntsize: 1. 2 em;h6font -size: lem;a, a:link, a:visi

26、ted, a :hover, a:ac tive outlin e:0;text-decoration:none;aimgborder:none ;text-dec oration:non e;img bord er: none;t extdecorat ion:none;1 abel, button cursor :poi nter;inp ut: focus, se lect: focus, textarea: fo cus backg round-color :#fff;f iel dset border :none; cle ar clear:bo th;.float-left flo

27、at:left; floa t-rightrigh t float :rig htright;bo dy text-ali gn:center;#wrapper ma rgin:oauto;text-align:left;十四.an ieto2kreset csscsscode复制内容到剪贴板ht ml, body, div , span, apple t, object, if rame,hl, h2, h3, h4, h5, h6 , p,blockq uote, pre, a, abbr, acrony m, address, b ig,cite, c ode, del, dfn , e

28、m, font, im g,ins, kbd , q, s, samp, s mall, strike ,strong, s ub, sup, tt, v ar, dl, dt, dd , ol, ul, li, fieldset, f orm, label, 1 egend,tab le, caption, tbody, tfoot , thead, t h, td, center , u, b, i marg in:0;paddin g:0;border:0;outline:0 ;font-weigh t: normal;fo nt-style: no rmal;font-s ize: 1

29、00%;fo nt-family: i nherit;ve rtical-alig n:baselineb aselinebod y line-heig ht: 1:focus outline:0ol, ul list-style:nonetablebor der-collaps e:collapse;border-spac ing:0ore, blockqubiockquote:befote:after, q :before, q:a fter conten t:blockq uote, q quot es: inp ut, text area margin:0;p adding:0hr m

30、argin:0;p adding:0;bo rder:0;colo r :#000;ba ckground-co lor: #000;he ight:lpx十五.csslabcssr esetcsscode复制内容到剪贴板h tml, body, div, span, appl et, object, iframe, hl, h2 , h3,h4, h5 , h6, p, block quote, pre, a , abbr, acron ym, address,big, cite, code, del, df n, em, font, i mg, ins, kbd,q, s, samp,small, s