目前比較全的CSS reset重設(shè)方法總結(jié)

在當今網(wǎng)頁設(shè)計/開發(fā)實踐中,使用CSS來為語義化的(X)HTML標記添加樣式風格是重要的關(guān)鍵。在設(shè)計師們的夢想中都存在著這樣的一個完美世界:所有的瀏覽器都能夠理解和適用多有CSS規(guī)則,并且呈現(xiàn)相同的視覺效果(沒有兼容性問題)。但是,我們并沒有生活在這個完美的世界,現(xiàn)實中發(fā)生的失竊卻總是恰恰相反,很多CSS樣式在不同的瀏覽器中有著不同的解釋和呈現(xiàn)。
當今流行的瀏覽器(如:Firefox、Opera、Internet Explorer、Chrome、Safari等等)中,有一些都是以自己的方式去理解CSS規(guī)范,這就會導致有的瀏覽器對CSS的解釋與設(shè)計師的CSS定義初衷相沖突,使得網(wǎng)頁的樣子在某些瀏覽器下能正確按照設(shè)計師的想法顯示,但有些瀏覽器卻并沒有按照設(shè)計師想要的樣子顯示出來,這就導致瀏覽器的兼容性問題。更糟的是,有的瀏覽器完全無視CSS的一些聲明和屬性。
正因為上述沖突和問題依然存在于這個”不完美的世界”,所以一些設(shè)計師想到了一種避免瀏覽器兼容性問題的方法,那就是CSS Reset,什么是CSS Reset?我們可以把它叫做CSS重設(shè),也有人叫做CSS復位、默認CSS、CSS重置等。CSS重設(shè)就是由于各種瀏覽器解釋CSS樣式的初始值有所不同,導致設(shè)計師在沒有定義某個CSS屬性時,不同的瀏覽器會按照自己的默認值來為沒有定義的樣式賦值,所以我們要先定義好一些CSS樣式,來讓所有瀏覽器都按照同樣的規(guī)則解釋CSS,這樣就能避免發(fā)生這種問題。
一.最簡化的CSS Reset(重設(shè)) :
- * {
- padding: 0;
- margin: 0;
- }
這是最普遍最簡單的CSS重設(shè),將所有元素的padding和margin值都設(shè)為0,可以避免一些瀏覽器在理解這兩個屬性默認值上的”分歧”。
- * {
- padding: 0;
- margin: 0;
- border: 0;
- }
這是在上一個重設(shè)的基礎(chǔ)上添加了對border屬性的重設(shè),初始值為0的確能避免一些問題。
- * {
- outline: 0;
- padding: 0;
- margin: 0;
- border: 0;
- }
在前兩個的基礎(chǔ)上添加了outline屬性的重設(shè),防止一些沖突。
二.濃縮實用型CSS Reset(重設(shè)):
- * {
- vertical-align: baselinebaseline;
- font-weight: inherit;
- font-family: inherit;
- font-style: inherit;
- font-size: 100%;
- outline: 0;
- padding: 0;
- margin: 0;
- border: 0;
- }
該CSS重設(shè)方法出自Perishable Press,這是他常用的方法。
三.Poor Man 的CSS Reset:
- html, body {
- padding: 0;
- margin: 0;
- }
- html {
- font-size:1em;
- }
- body {
- font-size:100%;
- }
- a img, :link img, :visited img {
- border:0px;
- }
這個重設(shè)方法將html和body下元素的padding和margin都設(shè)為0,并分別為html標簽和body標簽下的所有元素設(shè)置了初始的字體大小,最重要的是把有鏈接的圖片的默認邊框去掉了。
四.Siolon’s Global Reset
- * {
- vertical-align: baselinebaseline;
- font-family: inherit;
- fo
- nt-style: inherit;
- font-size: 100%;
- border: none;
- padding: 0;
- margin: 0;
- }
- body {
- padding: 5px;
- }
- h1, h2, h3, h4, h5, h6, p, pre, blockquote, form, ul, ol, dl {
- margin: 20px 0;
- }
- li, dd, blockquote {
- margin-left: 40px;
- }
- table {
- border-collapse: collapse;
- border-spacing: 0;
- }
五.Shaun Inman’s Global Reset
- 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 {
- padding: 0;
- margin: 0;
- }
- table {
- border-collapse: collapse;
- border-spacing: 0;
- }
- fieldset, img, abbr {
- border: 0;
- }
- address, caption, cite, code, dfn, em,
- h1, h2, h3, h4, h5, h6, strong, th, var {
- font-weight: normal;
- font-style: normal;
- }
- ul {
- list-style: none;
- }
- caption, th {
- text-align: left;
- }
- h1, h2, h3, h4, h5, h6 {
- font-size: 1.0em;
- }
- q:before, q:after {
- content: ”;
- }
- a, ins {
- text-decoration: none;
- }
六.Yahoo(YUI) CSS Reset:
- body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,
- form,fieldset,input,textarea,p,blockquote,th,td {
- padding: 0;
- margin: 0;
- }
- table {
- border-collapse: collapse;
- border-spacing: 0;
- }
- fieldset,img {
- border: 0;
- }
- address,caption,cite,code,dfn,em,strong,th,var {
- font-weight: normal;
- font-style: normal;
- }
- ol,ul {
- list-style: none;
- }
- caption,th {
- text-align: left;
- }
- h1,h2,h3,h4,h5,h6 {
- font-weight: normal;
- font-size: 100%;
- }
- q:before,q:after {
- content:”;
- }
- abbr,acronym {
- border: 0;
- }
七.Eric Meyer’s CSS Reset
- html, body, div, span, applet, object, iframe, table, caption,
- tbody, tfoot, thead, tr, th, td, del, dfn, em, font, img, ins,
- kbd, q, s, samp, small, strike, strong, sub, sup, tt, var,
- h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr,
- acronym, address, big, cite, code, dl, dt, dd, ol, ul, li,
- fieldset, form, label, legend {
- vertical-align: baselinebaseline;
- font-family: inherit;
- font-weight: inherit;
- font-style: inherit;
- font-size: 100%;
- outline: 0;
- padding: 0;
- margin: 0;
- border: 0;
- }
- :focus {
- outline: 0;
- }
- body {
- background: white;
- line-height: 1;
- color: black;
- }
- ol, ul {
- list-style: none;
- }
- table {
- border-collapse: separate;
- border-spacing: 0;
- }
- caption, th, td {
- font-weight: normal;
- text-align: left;
- }
- blockquote:before, blockquote:after, q:before, q:after {
- content: “”;
- }
- blockquote, q {
- quotes: “” “”;
- }
八.Condensed Meyer Reset:
- body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6,
- pre, form, fieldset, input, textarea, p, blockquote, th, td {
- padding: 0;
- margin: 0;
- }
- fieldset, img {
- border: 0;
- }
- table {
- border-collapse: collapse;
- border-spacing: 0;
- }
- ol, ul {
- list-style: none;
- }
- address, caption, cite, code, dfn, em, strong, th, var {
- font-weight: normal;
- font-style: normal;
- }
- caption, th {
- text-align: left;
- }
- h1, h2, h3, h4, h5, h6 {
- font-weight: normal;
- font-size: 100%;
- }
- q:before, q:after {
- content: ”;
- }
- abbr, acronym {
- border: 0;
- }
九.Ateneu Popular CSS Reset
- html, body, div, span, applet, object, iframe, h1, h2, h3,
- h4, h5, h6, p, blockquote, pre, a, abbr, acronym,
- address, big, cite, code, del, dfn, em, font, img, ins,
- kbd, q, s, samp, small, strike, strong, sub, sup, tt,
- var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend,
- table, caption, tbody, tfoot, thead, tr, th, td {
- margin: 0;
- padding: 0;
- border: 0;
- outline: 0;
- font-weight: inherit;
- font-style: inherit;
- font-size: 100%;
- font-family: inherit;
- vertical-align: baselinebaseline;
- }
- :focus {
- outline: 0;
- }
- a, a:link, a:visited, a:hover, a:active{
- text-decoration:none
- }
- table {
- border-collapse: separate;
- border-spacing: 0;
- }
- th, td {
- text-align: left;
- font-weight: normal;
- }
- img, iframe {
- border: none;
- text-decoration:none;
- }
- ol, ul {
- list-style: none;
- }
- input, textarea, select, button {
- font-size: 100%;
- font-family: inherit;
- }
- select {
- margin: inherit;
- }
- hr {
- margin: 0;
- padding: 0;
- border: 0;
- color: #000;
- background-color: #000;
- height: 1px
- }
十.Chris Poteet’s Reset CSS
- * {
- vertical-align: baselinebaseline;
- font-family: inherit;
- font-style: inherit;
- font-size: 100%;
- border: none;
- padding: 0;
- margin: 0;
- }
- body {
- padding: 5px;
- }
- h1, h2, h3, h4, h5, h6, p, pre, blockquote, form, ul, ol, dl {
- margin: 20px 0;
- }
- li, dd, blockquote {
- margin-left: 40px;
- }
- table {
- border-collapse: collapse;
- border-spacing: 0;
- }
十一.Tantek Celik Reset CSS
- :link,:visited { text-decoration:none }
- ul,ol { list-style:none }
- h1,h2,h3,h4,h5,h6,pre,code { font-size:1em; }
- ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input
- { margin:0; padding:0 }
- a img,:link img,:visited img { border:none }
- address { font-style:normal }
十二.Christian Montoya Reset CSS
- html, body, form, fieldset {
- margin: 0;
- padding: 0;
- font: 100%/120% Verdana, Arial, Helvetica, sans-serif;
- }
- h1, h2, h3, h4, h5, h6, p, pre,
- blockquote, ul, ol, dl, address {
- margin: 1em 0;
- padding: 0;
- }
- li, dd, blockquote {
- margin-left: 1em;
- }
- form label {
- cursor: pointer;
- }
- fieldset {
- border: none;
- }
- input, select, textarea {
- font-size: 100%;
- font-family: inherit;
- }
十三.Rudeworks Reset CSS
- * {
- margin: 0;
- padding: 0;
- border: none;
- }
- html {
- font: 62.5% “Lucida Grande”, Lucida, Verdana, sans-serif;
- text-shadow: #000 0px 0px 0px;
- }
- ul {
- list-style: none;
- list-style-type: none;
- }
- h1, h2, h3, h4, h5, h6, p, pre,
- blockquote, ul, ol, dl, address {
- font-weight: normal;
- margin: 0 0 1em 0;
- }
- cite, em, dfn {
- font-style: italic;
- }
- sup {
- position: relative;
- bottombottom: 0.3em;
- vertical-align: baselinebaseline;
- }
- sub {
- position: relative;
- bottombottom: -0.2em;
- vertical-align: baselinebaseline;
- }
- li, dd, blockquote {
- margin-left: 1em;
- }
- code, kbd, samp, pre, tt, var, input[type='text'], textarea {
- font-size: 100%;
- font-family: monaco, “Lucida Console”, courier, mono-space;
- }
- del {
- text-decoration: line-through;
- }
- ins, dfn {
- border-bottom: 1px solid #ccc;
- }
- small, sup, sub {
- font-size: 85%;
- }
- abbr, acronym {
- text-transform: uppercase;
- font-size: 85%;
- letter-spacing: .1em;
- border-bottom-style: dotted;
- border-bottom-width: 1px;
- }
- a abbr, a acronym {
- border: none;
- }
- sup {
- vertical-align: super;
- }
- sub {
- vertical-align: sub;
- }
- h1 {
- font-size: 2em;
- }
- h2 {
- font-size: 1.8em;
- }
- h3 {
- font-size: 1.6em;
- }
- h4 {
- font-size: 1.4em;
- }
- h5 {
- font-size: 1.2em;
- }
- h6 {
- font-size: 1em;
- }
- a, a:link, a:visited, a:hover, a:active {
- outline: 0;
- text-decoration: none;
- }
- a img {
- border: none;
- text-decoration: none;
- }
- img {
- border: none;
- text-decoration: none;
- }
- label, button {
- cursor: pointer;
- }
- input:focus, select:focus, textarea:focus {
- background-color: #FFF;
- }
- fieldset {
- border: none;
- }
- .clear {
- clear: both;
- }
- .float-left {
- float: left;
- }
- .float-rightright {
- float: rightright;
- }
- body {
- text-align: center;
- }
- #wrapper {
- margin: 0 auto;
- text-align: left;
- }
十四. Anieto2K Reset CSS
- html, body, div, span, applet, object, iframe,
- h1, h2, h3, h4, h5, h6, p,
- blockquote, pre, a, abbr, acronym, address, big,
- cite, code, del, dfn, em, font, img,
- ins, kbd, q, s, samp, small, strike,
- strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li,
- fieldset, form, label, legend,
- table, caption, tbody, tfoot, thead, tr, th, td,
- center, u, b, i {
- margin: 0;
- padding: 0;
- border: 0;
- outline: 0;
- font-weight: normal;
- font-style: normal;
- font-size: 100%;
- font-family: inherit;
- vertical-align: baselinebaseline
- }
- body {
- line-height: 1
- }
- :focus {
- outline: 0
- }
- ol, ul {
- list-style: none
- }
- table {
- border-collapse: collapse;
- border-spacing: 0
- }
- blockquote:before, blockquote:after, q:before, q:after {
- content: “”
- }
- blockquote, q {
- quotes: “” “”
- }
- input, textarea {
- margin: 0;
- padding: 0
- }
- hr {
- margin: 0;
- padding: 0;
- border: 0;
- color: #000;
- background-color: #000;
- height: 1px
- }
十五.CSSLab CSS Reset
- html, body, div, span, applet, object, iframe, h1, h2, h3,
- h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address,
- big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp,
- small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li,
- fieldset, form, label, legend, table, caption, tbody, tfoot,
- thead, tr, th, td {
- margin: 0;
- padding: 0;
- border: 0;
- outline: 0;
- font-weight: inherit;
- font-style: inherit;
- font-size: 100%;
- font-family: inherit;
- vertical-align: baselinebaseline;
- }
- :focus {
- outline: 0;
- }
- table {
- border-collapse: separate;
- border-spacing: 0;
- }
- caption, th, td {
- text-align: left;
- font-weight: normal;
- }
- a img, iframe {
- border: none;
- }
- ol, ul {
- list-style: none;
- }
- input, textarea, select, button {
- font-size: 100%;
- font-family: inherit;
- }
- select {
- margin: inherit;
- }
- /* Fixes incorrect placement of numbers in ol’s in IE6/7 */
- ol { margin-left:2em; }
- /* == clearfix == */
- .clearfix:after {
- content: “.”;
- display: block;
- height: 0;
- clear: both;
- visibility: hidden;
- }
- .clearfix {display: inline-block;}
- * html .clearfix {height: 1%;}
- .clearfix {display: block;}
好了,CSS重設(shè)目前先總結(jié)到這里,這15套重設(shè)方法其實都是有共同點的,也許有的實現(xiàn)方法不同,但大部分都是同一個目的,就是為了讓更多的瀏覽器能顯示同樣的效果。有了這些CSS重設(shè)作為資料和參考,也許會對你的工作有所幫助甚至提高效率,但是,畢竟這些重設(shè)都是別人寫的,你完全也可以為自己量身定制一套CSS重設(shè)。
相關(guān)文章
- CSS Grid 是一種二維布局系統(tǒng),可以同時控制行和列,相比 Flex(一維布局),更適合用在整體頁面布局或復雜模塊結(jié)構(gòu)中,這篇文章主要介紹了前端CSS Grid 布局詳解,需要的朋2025-04-16
CSS Padding 和 Margin 區(qū)別全解析
CSS 中的 padding 和 margin 是兩個非?;A(chǔ)且重要的屬性,它們用于控制元素周圍的空白區(qū)域,本文將詳細介紹 padding 和 margin 的概念、區(qū)別以及如何在實際項目中使用它們2025-04-07- will-change 是一個 CSS 屬性,用于告訴瀏覽器某個元素在未來可能會發(fā)生哪些變化,本文給大家介紹CSS will-change 屬性詳解,感興趣的朋友一起看看吧2025-04-07
- 本文給大家分享在 CSS 中,去除a標簽(超鏈接)的下劃線的幾種方法,本文給大家介紹的非常詳細,感興趣的朋友一起看看吧2025-04-07
- 在前端開發(fā)中,CSS(層疊樣式表)不僅是用來控制網(wǎng)頁的外觀和布局,更是實現(xiàn)復雜交互和動態(tài)效果的關(guān)鍵技術(shù)之一,隨著前端技術(shù)的不斷發(fā)展,CSS的用法也日益豐富和高級,本文將2025-04-07
css中的 vertical-align與line-height作用詳解
文章詳細介紹了CSS中的`vertical-align`和`line-height`屬性,包括它們的作用、適用元素、屬性值、常見使用場景、常見問題及解決方案,感興趣的朋友跟隨小編一起看看吧2025-03-26淺析CSS 中z - index屬性的作用及在什么情況下會失效
z-index屬性用于控制元素的堆疊順序,值越大,元素越顯示在上層,它需要元素具有定位屬性(如relative、absolute、fixed或sticky),本文給大家介紹CSS 中z - index屬性的作用2025-03-21- 文章詳細介紹了CSS中的打印媒體查詢@mediaprint包括基本語法、常見使用場景和代碼示例,如隱藏非必要元素、調(diào)整字體和顏色、處理鏈接的URL顯示、分頁控制、調(diào)整邊距和背景等2025-03-18
CSS模擬 html 的 title 屬性(鼠標懸浮顯示提示文字效果)
本文介紹了如何使用CSS模擬HTML的title屬性,通過鼠標懸浮顯示提示文字效果,通過設(shè)置`.tipBox`和`.tipBox.tipContent`的樣式,實現(xiàn)了提示內(nèi)容的隱藏和顯示,感興趣的朋友一起2025-03-10前端 CSS 動態(tài)設(shè)置樣式::class、:style 等技巧(推薦)
本文介紹了Vue.js中動態(tài)綁定類名和內(nèi)聯(lián)樣式的兩種方法:對象語法和數(shù)組語法,通過對象語法,可以根據(jù)條件動態(tài)切換類名或樣式;通過數(shù)組語法,可以同時綁定多個類名或樣式,此外2025-02-26