通过语义化 html 结构分离导航与主体内容，为 `
在网页布局中，常需兼顾视觉一致性与功能性需求：例如，希望页眉导航栏（navbar）始终铺满整个视口宽度，而正文内容（如文章、卡片列表等）则需在大屏下保持可读性，因此限制其最大宽度（如 2024px）。此时，不应直接在 <body> 上设置 max-width——因为这会全局约束所有子元素，导致导航栏也被限制，违背设计初衷。
正确做法是利用 HTML5 语义化标签进行结构解耦：
- 将导航部分置于 <header> 或独立 <nav> 中，脱离内容流限制；
- 将主要内容包裹在 <main> 标签内，并为其单独设置 max-width 和居中显示（通常配合 margin: 0 auto）；
- 确保 <nav> 默认块级且无额外 max-width 干扰，必要时显式声明 width: 100% 或 width: 100vw。
以下是推荐实现代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>全宽导航 + 限定主体宽度</title>
<style>
/* 导航栏：强制占满视口宽度 */
nav {
width: 100%;
background-color: #333;
color: white;
padding: 1rem 0;
}
/* 主体内容：限制最大宽度并水平居中 */
main {
max-width: 2024px; /* 按你的需求设为 2024px */
margin: 0 auto;
padding: 2rem;
}
/* 可选：重置 body 默认 margin，避免意外偏移 */
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
</style>
</head>
<body>
<header>
<nav>
<ul style="list-style: none; margin: 0; padding: 0; display: flex; justify-content: center; gap: 2rem;">
<li><a href="#" style="color: white; text-decoration: none;">首页</a></li>
<li><a href="#" style="color: white; text-decoration: none;">产品</a></li>
<li><a href="#" style="color: white; text-decoration: none;">关于</a></li>
</ul>
</nav>
</header>
<main>
<h1>欢迎来到我的网站</h1>
<p>这段内容将严格控制在 2024px 最大宽度内，无论屏幕多宽，文字阅读体验始终舒适。而上方导航栏始终保持全屏宽度。</p>
</main>
</body>
</html>⚠️ 注意事项：
- 避免在 <body> 或 <html> 上设置 max-width，否则会影响所有后代元素；
- 若使用 CSS 重置库（如 Normalize.css），请确认未意外为 <nav> 添加 max-width；
- 在响应式设计中，建议为 main 添加 @media 断点，例如在小屏下设为 max-width: 100%，保证移动端适配；
- 使用 width: 100vw 替代 width: 100% 可更精准覆盖视口（尤其当 <body> 有滚动条时），但需注意 100vw 包含滚动条宽度，必要时可用 width: 100% + position: relative 配合父容器处理。
这种结构清晰、职责分明的布局方式，既符合现代 Web 标准，也便于后续维护与扩展。
