如何让导航栏覆盖body内边距？并解释CSS通配符*{}的作用

安全阿岳

2026-7-11

问题解答

一、让导航栏覆盖body内边距的实现方法

你的body设置了padding: 0 30px，所有子元素默认会被限制在这个内边距范围内。要让导航栏单独突破这个约束，可以通过负margin实现，具体修改如下：

修改.navigation的CSS代码：

.navigation {
  background-color: $primary-color;
  text-align: center;
  clear: both;
  height: 10vh;
  font-size: 25px;
  /* 关键修改：左右负margin抵消body的30px padding，保留底部margin */
  margin: 0 -30px 50px;
  /* 移除原width:100%，块级元素默认width:auto，配合负margin自动延伸至视口两侧 */
  box-sizing: border-box; /* 确保内部元素不会超出导航栏范围 */
  position: relative;
  
  a {
    text-decoration: none;
    color: black;
    margin-right: 15px;
    margin-left: 15px;
  }
  a:hover {
    color: rgb(41, 175, 175);
  }
}

原理说明：

margin: 0 -30px让导航栏向左右两侧各延伸30px，刚好抵消body的内边距，实现全屏覆盖效果。
块级元素默认width:auto，会自动填充父元素空间，加上负margin后会超出body的padding范围，无需手动设置width:100%。
box-sizing: border-box确保导航栏的内边距、边框不会额外增加宽度，避免布局错乱。

二、CSS中`*{}`选择器的工作原理

*是CSS的通配选择器，核心特性如下：

匹配范围：选中页面上所有HTML元素（包括<div>、<p>、<a>、表单元素等所有标准HTML节点），但不会匹配伪元素（如::before、::after，需通过*::before这类写法单独选中）。
优先级：是CSS选择器中优先级最低的，任何其他选择器（标签、类、ID选择器等）定义的样式都会覆盖它的样式。
常见用途：用于统一初始化页面样式，消除不同浏览器的默认样式差异，比如：
```
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
```
注意事项：现代浏览器对通配选择器优化较好，日常开发中使用基本不会有性能问题，但页面元素极多时可能会有轻微影响。