css重置
css 重置
CSS 重置的主要目标是确保浏览器之间的一致性，并撤消所有默认样式，创建一个空白板。
如今，主流浏览器都实现了css规范，在布局或间距方面没有太大差异。但是通过自定义 CSS 重置，也可以改善用户体验和提高开发者编写CSS的体验。
本文主要讲解以下几条规则：
/*
使用盒子模型
*/
*, *::before, *::after {
box-sizing: border-box;
}
/*
移除浏览器默认的margin值
*/
* {
margin: 0;
}
/*
调整默认行高
*/
body {
line-height: 1.5;
}
/*
更合理的媒体标签默认设置
*/
img, picture, video, canvas, svg {
display: block;
max-width: 100%;
}
/*
继承表单控件的文本样式
*/
input, button, textarea, select {
font: inherit;
}
/*
自动换行
*/
p, h1, h2, h3, h4, h5, h6 {
overflow-wrap: break-word;
}
/*
根堆叠上下文
*/
#root, #__next {
isolation: isolate;
}
下面我们来一个个看看：
使用盒子模型
<style>
.parent {
width: 200px;
}
.box {
width: 100%;
border: 2px solid hotpink;
padding: 20px;
}
style>
<div class="parent">
<div class="box">div>
div>
我们先来看看上面的代码，.box元素的宽度是多少呢？
答案是244px。
.box元素有width: 100%。 由于其父级宽度为 200px，因此 100% 将解析为 200px。
但是200px 宽度应用在哪里呢？默认情况下，它将该大小应用于内容框。
可能有些人会不熟悉，“内容框”是盒模型中实际保存内容的矩形，位于边框和填充内：
width: 100%声明会将.box的 content-box属性 设置为 200px。内边距将额外添加 40px（每边 20px）。边框最后添加 4px（每边 2px的边界线条宽度）。当我们进行数学计算时，整个宽度将是 244px宽。
当我们尝试将 244px 的盒子塞进 200px 宽的父盒子中时，它就会溢出。
通过设置以下规则就可以更改这种溢出：
*, *::before, *::after {
box-sizing: border-box;
}
应用此规则后，百分比将根据border-box解析。在上面的图片中，粉红色框将为 200px，内部内容框将缩小到 156px (200px - 40px - 4px)。
在我看来，这是一条必须遵守的规则。它能使 CSS 更易于使用。
删除默认边距
* {
margin: 0;
}
浏览器存在默认的边距，就比如html标签的margin就不为0，或者对于h1标签，它的margin值会比普通文本更大。
这些默认值在文档的上下文中是合理的，但对于现代 Web 应用程序来说可能不准确。而且我们在开发时可能更希望元素默认情况下是没有任何边距的。因此直接删除会更好。
调整行高
body {
line-height: 1.5;
}
line-height用于控制段落中每行文本之间的垂直间距。默认值因浏览器而异，但通常在 1.2 左右。
这个无单位的数字是基于字体大小的比例。当 line-height 为 1.2 时，每行将比元素的字体大小大 20%。
问题是：对于那些有阅读困难的人来说，这些行太紧密地排列在一起，使其难以阅读。WCAG标准规定 line-height 应至少为 1.5。
更合理的媒体标签默认设置
img, picture, video, canvas, svg {
display: block;
max-width: 100%;
}
img被认为是“内联”元素。这意味着它们应该用在段落中间，例如或。
这与我们大多数时候使用img的方式并不相符。通常，我们对待图像的方式与对待段落、标题或侧边栏的方式相同；它们应该是块级元素。
所以我们最好就直接通过display:block设置所有的img。而max-width: 100%是为了防止大图像溢出（如果它们放置在宽度不足以容纳它们的容器中）。
大多数块级元素会自动增大/缩小以适应其父元素，但像img这样的元素很特殊：它们被称为替换元素，并且它们不遵循相同的规则。
如果图像的“原始”尺寸为 800×600，则即使我们将其放入 500px 宽的父元素中，该元素也将是 800px 宽。而max-width: 100%规则将防止该图像超出其容器的范围，这应该是更明智的默认行为。
继承表单控件的字体
input, button, textarea, select {
font: inherit;
}
默认情况下，按钮和输入不会从其父级继承文本样式。相反，他们有自己奇怪的样式。
例如，