通过将页面结构语义化分离（如用 `
在网页布局中，<body> 元素默认会继承视口宽度，但若直接对 body 设置 max-width，整个页面（包括导航栏）都会被约束——这显然违背了“导航栏需铺满全屏”的需求。正确的解法是结构先行、样式分离：利用 HTML5 语义化标签明确划分区域职责。
首先，将导航栏（<nav>）置于 <header> 内并脱离内容容器；再用 <main> 专门包裹主体内容（如标题、段落、卡片等）。这样，CSS 可分别控制：
nav {
width: 100%; /* 确保导航占满可用宽度 */
background: #333;
color: white;
}
main {
max-width: 1024px; /* 主体内容最大宽度 */
margin: 0 auto; /* 水平居中，两侧留白 */
padding: 2rem;
}对应 HTML 结构应清晰分层：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>全宽导航 + 限定主体</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<nav>
<ul>
<li><a href="#home">首页</a></li>
<li><a href="#about">关于</a></li>
<li><a href="#contact">联系</a></li>
</ul>
</nav>
</header>
<main>
<h1>欢迎来到我的网站</h1>
<p>此处内容将严格限制在 1024px 内，无论屏幕多宽，文字和布局均保持舒适阅读宽度。</p>
</main>
</body>
</html>⚠️ 注意事项：
- 避免对 <body> 或 <html> 设置 max-width，否则会影响所有子元素；
- 若导航含内边距（padding）或外边距（margin），需配合 box-sizing: border-box 防止意外溢出；
- 响应式场景下，建议为 main 添加断点（如 @media (max-width: 768px) { main { max-width: 100%; } }），确保小屏友好；
- 语义化标签（<nav>/<main>）不仅利于布局，也提升可访问性与 SEO 表现。
总结：布局自由度源于结构合理性。不依赖 hack 或 !important，仅靠语义化标记 + 精准作用域样式，即可优雅解耦全局与局部宽度控制。
