在前端開發中,CSS 初始化代碼是一個不可或缺的部分。CSS 初始化代碼可以解決不同瀏覽器之間的樣式差異、默認樣式的問題、頁面布局的問題等。因此,現在很多開發者都使用 CSS 初始化代碼來提高開發效率和頁面穩定性。
下面是一個常用的 CSS 初始化代碼文件,建議在項目中使用,可以將其保存為 reset.css 或者 normalize.css 文件,然后在 HTML 頁面中引用即可:
/** * Normalize.css * URL: https://github.com/necolas/normalize.css */ html { font-family: sans-serif; line-height: 1.15; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; -ms-overflow-style: scrollbar; -webkit-tap-highlight-color: transparent; } body { margin: 0; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; } article, aside, footer, header, nav, section { display: block; } h1 { font-size: 2em; margin: 0.67em 0; } figcaption, figure, main { display: block; } figure { margin: 1em 40px; } hr { box-sizing: content-box; height: 0; overflow: visible; border: 1px solid #cccccc; margin: 1em 0; } pre { font-family: monospace, monospace; font-size: 1em; } code, kbd, pre, samp { font-family: monospace, monospace; font-size: 1em; } a { background-color: transparent; } abbr[title] { border-bottom: none; text-decoration: underline; text-decoration: underline dotted; } b, strong { font-weight: bolder; } small { font-size: 80%; } sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sub { bottom: -0.25em; } sup { top: -0.5em; } img { border-style: none; } button, input, optgroup, select, textarea { font-family: sans-serif; font-size: 100%; line-height: 1.15; margin: 0; } button, input { overflow: visible; } button, select { text-transform: none; } button, [type="button"], [type="reset"], [type="submit"] { -webkit-appearance: button; } button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner { border-style: none; padding: 0; } button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring { outline: 1px dotted ButtonText; } fieldset { padding: 0.35em 0.75em 0.625em; } legend { box-sizing: border-box; color: inherit; display: table; max-width: 100%; padding: 0; white-space: normal; } progress { vertical-align: baseline; } textarea { overflow: auto; } [type="checkbox"], [type="radio"] { box-sizing: border-box; padding: 0; } [type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button { height: auto; } [type="search"] { -webkit-appearance: textfield; outline-offset: -2px; } [type="search"]::-webkit-search-cancel-button, [type="search"]::-webkit-search-decoration { -webkit-appearance: none; } ::-webkit-file-upload-button { -webkit-appearance: button; font: inherit; } details { display: block; } summary { display: list-item; } template { display: none; } [hidden] { display: none !important; }
此外,CSS 初始化代碼并不是必備的,也有可能會影響某些已經定義好的樣式。因此,在使用過程中需要有所取舍,根據實際情況來決定是否使用。
下一篇css初始化原理