目前比較全的CSS重設 reset 方法總結

2021-09-08 06:50:22 字數 1977 閱讀 6160

在當今網頁設計/開發實踐中,使用css來為語義化的(x)html標記新增樣式風格是重要的關鍵。在設計師們的夢想中都存在著這樣的乙個完美世界:所有的瀏覽器都能夠理解和適用多有css規則,並且呈現相同的視覺效果(沒有相容性問題)。但是,我們並沒有生活在這個完美的世界,現實中發生的失竊卻總是恰恰相反,很多css樣式在不同的瀏覽器中有著不同的解釋和呈現。

當今流行的瀏覽器(如:firefox、opera、internet explorer、chrome、safari等等)中,有一些都是以自己的方式去理解css規範,這就會導致有的瀏覽器對css的解釋與設計師的css定義初衷相衝突,使得網頁的樣子在某些瀏覽器下能正確按照設計師的想法顯示,但有些瀏覽器卻並沒有按照設計師想要的樣子顯示出來,這就導致瀏覽器的相容性問題。更糟的是,有的瀏覽器完全無視css的一些宣告和屬性。

正因為上述衝突和問題依然存在於這個」不完美的世界」,所以一些設計師想到了一種避免瀏覽器相容性問題的方法,那就是css reset,[b]什麼是css reset?我們可以把它叫做css重設,也有人叫做css復位、預設css、css重置等。css重設就是由於各種瀏覽器解釋css樣式的初始值有所不同,導致設計師在沒有定義某個css屬性時,不同的瀏覽器會按照自己的預設值來為沒有定義的樣式賦值,所以我們要先定義好一些css樣式,來讓所有瀏覽器都按照同樣的規則解釋css,這樣就能避免發生這種問題。[/b]

今天暴風彬彬總結收集了[b]15套css重設例項[/b],您可以在前端開發工作中進行參考和使用,有些是很簡化的css reset,有些則是非常複雜非常全面的css reset,至於使用哪套,全看您的愛好或需要。

一.最簡化的css reset(重設) :

padding: 0;

margin: 0;

這是最普遍最簡單的css重設,將所有元素的padding和margin值都設為0,可以避免一些瀏覽器在理解這兩個屬性預設值上的」分歧」。

padding: 0;

margin: 0;

border: 0;

這是在上乙個重設的基礎上新增了對border屬性的重設,初始值為0的確能避免一些問題。

outline: 0;

padding: 0;

margin: 0;

border: 0;

在前兩個的基礎上新增了outline屬性的重設,防止一些衝突。

二.濃縮實用型css reset(重設):

vertical-align: baseline;

font-weight: inherit;

font-family: inherit;

font-style: inherit;

font-size: 100%;

outline: 0;

padding: 0;

margin: 0;

border: 0;

該css重設方法出自perishable press,這是他常用的方法。

三.poor man 的css reset:

html, body

ul,ol

h1,h2,h3,h4,h5,h6,pre,code

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

a img,:link img,:visited img

address

十二.christian montoya reset css

html, body, form, fieldset

/* == clearfix == */

.clearfix:after

* html .clearfix

.clearfix

好了,css重設目前先總結到這裡,這15套重設方法其實都是有共同點的,也許有的實現方法不同,但大部分都是同乙個目的,就是為了讓更多的瀏覽器能顯示同樣的效果。有了這些css重設作為資料和參考,也許會對你的工作有所幫助甚至提高效率,但是,畢竟這些重設都是別人寫的,你完全也可以為自己量身定製一套css重設。

目前比較全的CSS重設 reset 方法總結

在當今網頁設計 開發實踐中,使用css來為語義化的 x html標記新增樣式風格是重要的關鍵。在設計師們的夢想中都存在著這樣的乙個完美 世界 所有的瀏覽器都能夠理解和適用多有css規則,並且呈現相同的視覺效果 沒有相容性問題 但是,我們並沒有生活在這個完美的世界,現實中發生的失 竊卻總是恰恰相反,很...

目前比較全的CSS重設 reset 方法總結

在當今網頁設計 開發實踐中,使用css來為語義化的 x html標記新增樣式風格是重要的關鍵。在設計師們的夢想中都存在著這樣的乙個完美世界 所有的瀏覽器都能夠理解和適用多有css規則,並且呈現相同的視覺效果 沒有相容性問題 但是,我們並沒有生活在這個完美的世界,現實中發生的失竊卻總是恰恰相反,很多c...

目前比較全的CSS重設 reset 方法總結

在當今網頁設計 開發實踐中,使用css來為語義化的 x html標記新增樣式風格是重要的關鍵。在設計師們的夢想中都存在著這樣的乙個完美世界 所有的瀏覽器都能夠理解和適用多有css規則,並且呈現相同的視覺效果 沒有相容性問題 但是,我們並沒有生活在這個完美的世界,現實中發生的失竊卻總是恰恰相反,很多c...