HTML标签在浏览器中都有默认的样式，例如p标签有上下边距，strong标签有字体加粗样式等。不同浏览器的默认样式之间存在差别，例如ul默认带有缩进样式，在IE下，它的缩进是由margin实现的，而在Firefox下却是由padding实现的。
因为市面上浏览器众多，而不同浏览器之间的默认值又不统一，所以我们需要使用CSS Reset，其实就是给所有元素默认样式，而不用浏览器的默认样式。
比如下面的Reset样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Reset</title>
<style type="text/css">
*, *:before, *:after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<h1>Use a CSS Reset</h1>
<h3>Resetting a browser's base styles gives developers a clean slate to work with.</h3>
<form action=".">
<div class="text">
<label for="type-text">Text (text)</label>
<input type="text" name="type-text" id="type-text">
</div>
<div class="text">
<label for="type-search">Search (search)</label>
<input type="search" name="type-search" id="type-search">
</div>
<div class="text">
<label for="type-tel">Telephone (tel)</label>
<input type="tel" name="type-tel" id="type-tel">
</div>
<div class="text">
<label for="type-url">URL (url)</label>
<input type="url" name="type-url" id="type-url">
</div>
<div class="text">
<label for="type-email">E-mail (email)</label>
<input type="email" name="type-email" id="type-email">
</div>
<div class="text">
<label for="type-datetime">Date and Time (datetime)</label>
<input type="datetime" name="type-datetime" id="type-datetime">
</div>
<div class="text">
<label for="type-date">Date (date)</label>
<input type="date" name="type-date" id="type-date">
</div>
<div class="text">
<label for="type-month">Month (month)</label>
<input type="month" name="type-month" id="type-month">
</div>
<div class="text">
<label for="type-week">Week (week)</label>
<input type="week" name="type-week" id="type-week">
</div>
<div class="text">
<label for="type-time">Time (time)</label>
<input type="time" name="type-time" id="type-time">
</div>
<div class="text">
<label for="type-datetime-local">Local Date and Time (datetime-local)</label>
<input type="datetime-local" name="type-datetime-local" id="type-datetime-local">
</div>
<div class="text">
<label for="type-number">Number (number)</label>
<input type="number" name="type-number" id="type-number" min="0" max="20">
</div>
<div class="text">
<label for="type-range">Range (range)</label>
<input type="range" name="type-range" id="type-range" min="0" max="100">
</div>
<div class="text">
<label for="type-color">Color (color)</label>
<input type="color" name="type-color" id="type-color">
</div>
<div class="submit-area">
<input type="submit" value="Submit" name="submit-1">
</div>
</form>
</body>
</html>一些常见的CSS Reset
-
让
box-sizing继承自htmlhtml { box-sizing: border-box; } *, *::before, *::after { box-sizing: inherit; } -
单独设置
button的重置属性和一次性设置重置属性button { background: none; border: none; color: inherit; font: inherit; outline: none; padding: 0; } button { all: unset; } -
使用
:not()可以指定不应用的样式/* add border */ .nav li { border-right: 1px solid #666; } /* remove border */ .nav li:last-child { border-right: none; } .nav li:not(:last-child) { border-right: 1px solid #666; }