HTML重置代碼是一種標準化的CSS樣式表,用于消除瀏覽器默認樣式,從而在不同瀏覽器上獲得統一的樣式效果。HTML重置代碼將通用屬性重置,并將所有元素的默認規則設置為一致的值。下面是一個基本的HTML重置代碼:
/** * HTML重置代碼 */ html, body, div, span, h1, h2, h3, h4, h5, h6, p, strong, em, a, img, ol, ul, li, form, label, input, textarea, table, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /** * HTML5 文檔元素樣式 */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display:block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; }
HTML重置代碼中,margin:0
和padding:0
用于消除元素默認的外邊距和內邊距,border:0
用于消除元素的默認邊框,font-size:100%
和font:inherit
用于將字體大小恢復為瀏覽器默認的大小,vertical-align:baseline
用于將元素在基線上對齊。
其他的樣式屬性則是通過重置元素的默認值,消除不必要的樣式,從而實現單一樣式效果。第二部分包含了HTML5的文檔元素樣式。
因為瀏覽器的行為各有不同,HTML重置代碼不能將每個問題都解決。但是它可以消除大部分的默認樣式問題,從而在各種瀏覽器和設備上提供更一致的外觀和體驗。