什么是 CSS Reset？
在 Web 开发中，不同浏览器对 HTML 元素的默认样式存在差异。为了避免这些差异对页面的渲染产生影响，开发者们会使用一些 CSS Reset 工具来将所有元素的样式重置为一致的状态，从而达到更好的一致性和可控性。
目前比较流行的 CSS Reset 工具有 Normalize.css 和 Reset.css 等。
Width: 100% 造成的边距问题
在开发中，我们经常需要将某个元素的宽度设置为 100% 来使其充满父元素的宽度。但是，这样做会带来一个问题：当父元素存在边距（margin）时，子元素的宽度会受到边距的影响而超出父元素的宽度，从而导致页面布局出现问题。
下面是一个示例代码：
// javascriptcn.com 代码示例
<div class="parent">
<div class="child"></div>
</div>
<style>
.parent {
width: 300px;
margin: 20px;
background-color: #ccc;
}
.child {
width: 100%;
height: 50px;
background-color: #f00;
}
</style>在上面的代码中，父元素 .parent 的宽度为 300px，边距为 20px。子元素 .child 的宽度为 100%，高度为 50px。我们期望子元素的宽度应该为 300px，但实际上它的宽度是 340px，因为它受到了父元素的边距影响。
如何解决这个问题？
解决这个问题的方法有很多，下面介绍几种常用的方法。
1. 使用 box-sizing 属性
box-sizing 属性可以用来设置元素的盒模型。默认情况下，元素的盒模型为 content-box，即元素的宽度不包括内边距和边框，只包括内容区域的宽度。而当我们将元素的盒模型设置为 border-box 时，元素的宽度就包括了内边距和边框的宽度，从而避免了宽度超出的问题。
修改示例代码如下：
// javascriptcn.com 代码示例
<div class="parent">
<div class="child"></div>
</div>
<style>
.parent {
width: 300px;
margin: 20px;
background-color: #ccc;
box-sizing: border-box; /* 添加 box-sizing 属性 */
}
.child {
width: 100%;
height: 50px;
background-color: #f00;
box-sizing: border-box; /* 添加 box-sizing 属性 */
}
</style>2. 使用 calc() 函数
calc() 函数可以用来计算元素的宽度，它支持加减乘除等基本运算符。我们可以使用 calc() 函数来计算子元素的宽度，以避免受到父元素边距的影响。
修改示例代码如下：
// javascriptcn.com 代码示例
<div class="parent">
<div class="child"></div>
</div>
<style>
.parent {
width: 300px;
margin: 20px;
background-color: #ccc;
}
.child {
width: calc(100% - 40px); /* 使用 calc() 函数计算宽度 */
height: 50px;
background-color: #f00;
}
</style>3. 使用负边距
使用负边距也可以解决这个问题。我们可以给子元素添加一个负的 margin 值，从而抵消父元素的边距，使子元素的宽度正好等于父元素的宽度。
修改示例代码如下：
// javascriptcn.com 代码示例
<div class="parent">
<div class="child"></div>
</div>
<style>
.parent {
width: 300px;
margin: 20px;
background-color: #ccc;
}
.child {
width: 100%;
height: 50px;
background-color: #f00;
margin: 0 -20px; /* 添加负边距 */
}
</style>总结
CSS Reset 工具可以使页面在不同浏览器中呈现一致的样式，提高页面的可控性。但是，使用 Width: 100% 时会存在边距问题，我们可以使用 box-sizing 属性、calc() 函数或负边距等方法来解决这个问题。在实际开发中，我们需要根据具体情况选择合适的方法来解决这个问题。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/653b51487d4982a6eb5a7a3b