HTML 元素默认样式和 reset
元素默认样式
默认样式
HTML 元素的默认样式是由浏览器提供的，它们在浏览器中被称为 " 用户代理样式表 "（user agent stylesheet）。
不同的浏览器提供的默认样式可能有所不同，但是通常包括以下内容：
- 字体样式：默认字体大小、颜色、字体家族等
- 边框样式：默认边框宽度、样式、颜色等
- 行高和行距：默认行高和行距
- 文本样式：默认文本对齐方式、缩进、间距等
默认样式的意义
- 因为 HTML 是一个比较简单的文档型的，这样一种标记语言，所以它必然要带一些默认样式才让我们直接写完标记有表现。
- HTML 默认样式的意义在于为网页提供一个基础的样式框架，使得页面中所有 HTML 元素在不同的浏览器和操作系统上都能够以一致的方式呈现。这样，用户可以更加便捷地访问和使用网页，给用户更加统一的使用体验。同时也可以帮助开发人员减少开发时间和成本。
- HTML 默认样式的另一个作用是提供了一种默认的样式表，使得开发人员可以基于默认样式进行调整和定制，而不必从头开始编写样式。这可以节省开发时间和精力，同时也可以提高开发效率和一致性。
默认样式带来的问题
- 由于不同的浏览器提供的默认样式可能存在差异，而且默认样式不一定符合每个开发人员的需求。
- 因此，在实际开发中，为了确保页面的外观和行为一致，开发者需要编写 CSS 样式重置默认样式，以确保所有元素都以一致的方式显示，以满足具体的设计要求和需求。
CSS Reset
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>default style</title>
</head>
<body>
<div>DIV 元素</div> // [!code focus:5]
<ul>
<li>LI 元素</li>
<li>LI 元素</li>
</ul>
</body>
</html>
浏览器提供的默认样式也会带来一些问题：
- 有一些样式是我们预期之外的
- 各个浏览器的默认样式并不完全一样
那处理这个问题的解决方案呢？就是 CSS reset。
通用选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>default style</title>
<style> // [!code focus:6]
* {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div>DIV 元素</div> // [!code focus:5]
<ul>
<li>LI 元素</li>
<li>LI 元素</li>
</ul>
</body>
</html>
这种方式因为使用通用选择器，所以会带来性能的问题。
样式归零
把默认样式都干掉归零。
CSS Tools: Reset CSS
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
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;
}
CSS Reset - YUI Library
<!-- Include Dependencies -->
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css" />
<!-- Using CSS Reset Contextually -->
<div>
<div id="left-column" class="yui3-cssreset"> <h1> Lorem Ipsum</h1> </div>
<div id="right-column"> <h1> Lorem Ipsum</h1> </div>
</div>
样式调整
Normalize.css makes browsers render all elements more consistently and in line with modern standards. It precisely targets only the styles that need normalizing.
Normalize.css 使用了一种不同的思路。它的基本策略是这样的，既然浏览器给了我们默认样式，那它就是有意义的，那我为什么要把这个默认样式干掉呢？我应该处理的是，如果这个默认样式不一致，我把它变得一致就好了，所以这就是 normalize 的出发点。
normalize 会保留一些元素的 margin 和 padding。同时它会去做一些修正，比如说输入框在各个浏览器下面的宽度，高度的定义是不统一的。那么它会尝试去做一些修正，让你的定义变得更统一。
<link rel="stylesheet" type="text/css" href="https://yarnpkg.com/en/package/normalize.css" />