唐人阁论坛(品茶)_小姐威客网楼风信信息网_楼凤宫论坛(品茶)_唐人阁论坛 2025

在當今網(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ā)生這種問題。

 

今天暴風彬彬總結(jié)收集了15套CSS重設(shè)實例，您可以在前端開發(fā)工作中進行參考和使用，有些是很簡化的CSS Reset，有些則是非常復雜非常全面的CSS Reset，至于使用哪套，全看您的愛好或需要。

 

彬Go會經(jīng)常更新前端開發(fā)/網(wǎng)頁設(shè)計等相關(guān)技術(shù)及教程文章，歡迎訂閱本博客來及時瀏覽本博客的最新教程及資源。

 

一.最簡化的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: baseline;

       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: baseline;

    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