设置width:100%后导航栏宽度仍超出屏幕的问题排查

你的问题根源在于CSS盒模型的默认行为：

• 元素默认的width仅计算内容区域宽度，边框（border）和内边距（padding）会额外增加元素总宽度。
• 你给nav设置了width:100%和border:1px solid red，导致导航栏总宽度为100% + 2px（左右各1px边框），自然超出屏幕范围。

修复方案 #

方案1：全局设置box-sizing: border-box #

这个属性会让元素的width包含内容、内边距和边框的总宽度，彻底避免盒模型导致的溢出问题。修改CSS如下：

html {
  font-size: 16px;
}

* {
  font-family: Verdana;
  padding: 0;
  margin: 0;
  /* 全局统一盒模型规则 */
  box-sizing: border-box;
}

nav {
  height: 50px;
  border: 1px solid red;
  width: 100%;
}

方案2：移除width:100% #

nav这类块级元素默认宽度就是父容器的100%，无需手动设置。去掉width:100%后，边框会被包含在默认宽度范围内：

nav {
  height: 50px;
  border: 1px solid red;
  /* 移除多余的width:100% */
}

两个方案都能解决溢出问题，推荐方案1，全局设置box-sizing可以避免后续其他元素出现同类问题。

内容的提问来源于stack exchange，提问作者markisawesome4