导航栏无法居中、调整尺寸及页面溢出问题求助

嘿，我来帮你搞定这几个前端问题！咱们一个个拆解解决：

1. 尺寸无法调整的解决思路 #

大概率是浏览器默认样式或者box-sizing属性在搞鬼！默认情况下，元素的内边距和边框会额外撑大尺寸，而且body、nav这类元素自带默认margin/padding。给你两个关键设置：

• 给导航栏设置明确的宽高，同时加上box-sizing: border-box，确保内边距不会超出你设置的尺寸：

nav {
  width: 85%; /* 可以换成固定值比如900px，或者百分比 */
  height: 70px; /* 自定义高度 */
  box-sizing: border-box; /* 核心！内边距和边框不会额外扩大元素 */
  padding: 0 15px; /* 加内边距也不会撑破尺寸啦 */
}

2. 导航栏居中的两种方法 #

方法一：利用margin自动居中（最简便）

前提是导航栏必须有明确的宽度，然后设置左右margin为auto：

nav {
  width: 85%;
  margin: 0 auto; /* 水平居中，上下margin可以自己调 */
}

方法二：flex布局父元素

如果想让导航栏在页面水平+垂直都居中，给父元素（比如body或者header）设置flex布局：

body {
  display: flex;
  flex-direction: column; /* 垂直排列子元素 */
  align-items: center; /* 子元素水平居中 */
  justify-content: flex-start; /* 垂直方向靠顶部，可换成center实现垂直居中 */
}

你设置100vw和100vh还溢出，主要有两个原因：

1. 浏览器默认给body加了margin: 8px，导致整体尺寸超出视口
2. 100vw会包含垂直滚动条的宽度（如果页面有滚动条的话），直接用会导致横向溢出

解决步骤： #

1. 全局重置默认样式，把所有元素的margin、padding清零，同时全局设置box-sizing: border-box，从根源避免尺寸溢出：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

2. 调整body的宽度设置，把100vw换成100%，因为100%是相对于父元素（html）的宽度，不会包含滚动条：

body {
  width: 100%;
  height: 100vh;
  /* 如果不需要页面滚动，加下面这行禁止溢出；如果内容需要滚动就删掉 */
  /* overflow: hidden; */
}

最后给你整合好的完整示例代码，直接套用就能解决问题：

/* 全局样式重置 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  width: 100%;
  height: 100vh;
  /* 若需页面滚动则删除overflow: hidden */
  /* overflow: hidden; */
  display: flex;
  flex-direction: column;
  align-items: center;
}

nav {
  width: 85%;
  height: 70px;
  background-color: #2c3e50;
  color: white;
  display: flex;
  align-items: center;
  justify-content: space-between; /* 导航栏内部元素左右分布，可按需调整 */
  padding: 0 20px;
}

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