請解釋我Eric Meyer的CSS重置

Question

首先我想告訴你爲什麼我問這個問題。我通常更新那些寫得不好而且沒有重置的項目。我想提高項目的質量，所以似乎應用CSS重置是絕對必要的。

我不想每次我改變的東西，我不想完全重寫所有的CSS時間做的像素完善的檢測一個辛勤工作在每一個瀏覽器。

所以：

當我寫：

*{ 
    margin:0; 
    padding:0; 
    border:0; 
} 

我知道會發生什麼麻煩：<p>將鬆散填充和<input>, <select>, etc.將鬆散填充和邊界。所以我必須手動指定它們。

此代碼是更難理解：

*{ 
    font-size: 100%; 
    font: inherit; 
    vertical-align: baseline; 
} 

而且我完全糊塗了這一點：

body { 
    line-height: 1; 
} 

Answer 1

*{ 
    font-size: 100%; 
    font: inherit; 
    vertical-align: baseline; 
} 

這將文檔中的所有元素繼承字體和字體默認情況下，父元素的大小除非另有規定，否則可能會阻止用戶代理樣式表應用具有較少特定規則的字體樣式。

vertical-align: baseline;是另一種普遍的規則，以避免並不總是適用此預期（我相信）的默認行爲的所有元素的用戶代理的規則。

這裏是什麼這樣做一個簡單的介紹一下：demo。在演示中，嘗試將規則設置爲middle而不是文本頂部。

body { 
    line-height: 1; 
} 

這是一樣的。如果你不熟悉線條高度，那很簡單。您可能在沒有意識到的情況下處理了它：有時，如果元素的行高超出您的預期，有時會出現保證金問題。當您將字體放入與其他字體具有非常不同的x高度的設計中時，通常會發生這種情況。

如果你不明白它的功能，拋出一些虛擬的文本插入到文檔中，並開始使用它。在不同情況下製作好排版非常有用（必不可少）。

看來你是不是對的CSS屬性的明確，以及它們如何影響因素。你越瞭解這一點越好，你可以利用重置。出於幾個原因，沒有重置真的適合所有。例如，您可能未使用任何可能導致vertical-align不匹配的元素。您可能在適用於您甚至沒有的元素的大型重置中有規則。

與網頁設計任何東西，如果你不理解，實際操作經驗會教你很多東西。

Answer 2

看看這個撥弄着一個形式簡單的輸入控制：

http://jsfiddle.net/KXYHw/

切換復位，看看如何輸入字體和字體大小的變化。