由于浏览器实现上的差异，导致相同的页面在不同浏览器下的呈现不同，甚至会有错乱。
所以，一般前端框架会使用一个重置样式打底，以确保不同浏览器下的显示效果统一。
reset.css对所有组件的默认样式进行统一定义
An unmodified copy of Eric Meyer's CSS reset.
https://www.npmjs.com/package/reset-css
normalize.css针对部分样式进行修补
https://www.npmjs.com/package/normalize-css
参考资料与拓展阅读
- 现代 CSS 解决方案：Modern CSS Reset
- The Best CSS Reset Stylesheets
- GitHub Search, reset css
- 100 Bytes of CSS to look great everywhere
html {
max-width: 70ch;
padding: 3em 1em;
margin: auto;
line-height: 1.75;
font-size: 1.25em;
}
Let’s break this down. I’ve adapted the original text with my own commentary.
max-width: 70ch: the “readable range” is usually 60-80 character widths, and CSS lets you express that directly with thechunit. I blogged more on line lengths last year.padding: 3em 1em: If the display’s width goes under themax-widthset above, then this padding prevents edge-to-edge text on mobile. We use3emto provide top/bottom whitespace.margin: auto: This is really all that is needed to center the page - applied onhtml, because Dan’s site doesnt have a semantic<main>tag and<html>is more likely to exist in most sites (no judgment pls, i’ve heard enough semantic HTML preaching). That the top tag centers itself relative to nothing is unintuitive, but thats how browsers do.line-height: 1.75: Spacing between the lines to help increase visual clarity. Always leave line height unitless because reasons.font-size: 1.5em: I’ve noticed that recent design trends and screen sizes have tended toward bigger font sizes. Or maybe I’m getting old. Preferemorremoverpxif you want to let users scale it.
Tushar points out that you can use :root instead of <html> to guarantee that there is some selector present, but its a touch too fancy for me and uses an extra character :)
Optional:
h1,
h2,
h3,
h4,
h5,
h6 {
margin: 3em 0 1em;
}
p,
ul,
ol {
margin-bottom: 2em;
color: #1d1d1d;
font-family: sans-serif;
}
- Being Picky about a CSS Reset for Fun & Pleasure
著名 CSS 作者 Chris Coyier 的最新文章，解释浏览器的 CSS 重置（CSS reset）每一行的意思。
