2010-05-22 46 views
2

雖然有些人使用此重置。 * { margin:0; 填充:0; }是所有瀏覽器中邊距和填充最不平衡的東西嗎?

是否每個元素在每個瀏覽器默認樣式表中都有默認邊距和填充(但不同)?

雖然埃裏克邁耶收集了一些最常用的選擇,並給予這一切

{ 
    margin: 0; 
    padding: 0; 
    border: 0; 
    outline: 0; 
    font-size: 100%; 
    vertical-align: baseline; 
    background: transparent; 
} 

是這些元素具有不同類型的字體大小? 不同的基線,不同的背景,輪廓和邊框?

如果我們除了通用選擇器的缺點。

是這個

* { 
     margin: 0; 
     padding: 0; 
     border: 0; 
     outline: 0; 
     font-size: 100%; 
     vertical-align: baseline; 
     background: transparent; 
    } 

比這

* { 
    margin: 0; 
    padding: 0; 
} 

回答

5

你可以在這裏找到所有的默認樣式:CSS2.1 User Agent Style Sheet Defaults

如果您仔細調查列表,那麼您會注意到瀏覽器特定的頁邊距僅設置爲HTML-standard block elements,並且沒有設置瀏覽器特定的填充位置。換句話說,padding: 0是多餘的。但的確,margin是瀏覽器中最不平衡的,以回答你的實際問題。

我可能會踩在別人的腳趾在這裏,但在我最不高興的意見使用CSS重置樣式表是荒謬的。無論如何,您必須重新定義大部分邊距(和填充),您自己。你可以很好地學習並保持自己的規則,爲你自己定義文檔中要使用的每個塊元素的邊距(以及必要的填充)。

至於復位的殘餘:

  • border: 0的是superflous爲好。 <hr>和大多數表單輸入元素是唯一具有默認邊框的元素。沒有它,<hr>是不可見的(實際上,這在IE6/7中失敗),並且具有相同背景顏色的表單上的文本輸入元素也不可見。

  • outline應該肯定不會被重置,它打破了可訪問性。您需要自己控制它,例如僅在具有(背景)圖像的鏈接上重置它,因爲這是重置它的主要原因。但是,它仍然無法使用。而是考慮給它一個不同的輪廓顏色或風格,以便它仍然可見,但不那麼令人不安。

  • font-size: 100%會迫使你自己重新定義他們在<h1><h2>等元素。但即使沒有重新設置,反正你也經常喜歡這樣做。這個重置的重點是什麼?

  • <sub>vertical-align: baseline;休息調整和<sup>讓它們看起來像<small>。此外,表格標題也可能受到影響。那些默認爲middle全部瀏覽器。您需要自己重新定義它們再次。此外,衆所周知,這種重置可能會導致IE6/7對圖像造成嚴重破壞。

  • background: transparent;的價值對我來說還不清楚。我沒有看到這個重置的任何一點,可能會讓IE6/7變得瘋狂。您還需要自己重新定義所有表單輸入元素的背景顏色,這隻需添加更多工作(對於放置在彩色容器中的情況)。我相信,無論什麼時候遇到需要透明背景的元素,都可以輕鬆地發現並親自設置。

恩芬,看看你怎麼用這個信息。我不阻止你使用CSS重置。當我剛剛開始使用HTML/CSS時,我自己發現CSS重置僅在10年前有用。但是,多年來,我也學會了這是純粹的廢話。但我承認,這對初學者很有用,因爲重置會迫使他們自己設置邊距和其他東西明確。如果沒有重置,你可以做得很好。

+0

謝謝你的回答。我認爲人們會在不知道正確的理由和要求的情況下遵循一些流行的重置。我感覺當我們不使用CSS重置時,我們在今天以較少的字符製作CSS。使用重置後,我們將不得不重新設置每個元素。感謝您的好鏈接。 – 2010-05-22 03:31:28

+0

'border:0;'也只用了3-4個元素,所有的添加都會過度(如在eric meyer css中)。它與通用重置一樣糟糕。 – 2010-05-22 03:34:36

+0

啊,我忽略了邊界。添加它。 – BalusC 2010-05-22 03:48:21

0

那麼好,「比這更好的」很難說,但一個有更多的東西做更多。

輪廓0使鏈接沒有他們周圍的虛線邊框。

邊框0使圖像等沒有邊框。

font-size:100%可能會確保字體爲100%。

垂直對齊:基線設置所有垂直定到容器的底部,

背景:透明防止一些PNG問題。

但是margin:0和padding:0是兩個不能從你的重置列表中刪除的。

+0

我覺得當我們沒有使用CSS重置時,我們正在用較少的字符在今天製作CSS。使用重置後,我們將不得不重新設置每個元素。 – 2010-05-22 02:14:45

+0

@Derek - 但那些沒有任何邊框的元素,默認情況下輪廓以及技術上使用reset css,我們爲這些元素添加了「border:0」和「outline:0」。 – 2010-05-22 02:17:06

+0

是的,而不是依靠瀏覽器來設置一個默認值,它可以是null,0,1任何,我們將它設置爲0.主要地,從圖像中刪除鏈接和邊框的輪廓看起來更好。 – Derek 2010-05-22 02:35:32

0

簡短的答案是:隨意設置所有這些,如果你準備好覆蓋任何可能需要它的元素。

但是,請注意,當涉及到表單元素時,您可能會有很多工作要做。它們至少需要一個邊框才能看起來很好,其中一些(如按鈕)也需要填充。此外,默認情況下,某些瀏覽器在按鈕周圍顯示3D邊框。如果將邊框設置爲0,則無法使用CSS獲取3D回顧。

此外,你可能想看看http://www.blueprintcss.org/。它似乎很好地平衡了瀏覽器,儘管我自己並沒有嘗試過。