通过语义化 html 结构分离导航与主体内容，为 `
在网页布局中，常需兼顾视觉一致性与功能性需求：例如，希望页眉导航栏（navbar）始终铺满整个视口宽度，而正文内容（如文章、卡片列表等）则需在大屏下保持可读性，因此限制其最大宽度（如 2024px）。此时，不应直接在 上设置 max-width——因为这会全局约束所有子元素，导致导航栏也被限制，违背设计初衷。
正确做法是利用 HTML5 语义化标签进行结构解耦：
- 将导航部分置于
或独立 - 将主要内容包裹在
标签内，并为其单独设置 max-width 和居中显示（通常配合 margin: 0 auto）； - 确保
以下是推荐实现代码：
全宽导航 + 限定主体宽度 欢迎来到我的网站
这段内容将严格控制在 2024px 最大宽度内，无论屏幕多宽，文字阅读体验始终舒适。而上方导航栏始终保持全屏宽度。
⚠️ 注意事项：
- 避免在 或 上设置 max-width，否则会影响所有后代元素；
- 若使用 CSS 重置库（如 Normalize.css），请确认未意外为
- 在响应式设计中，建议为 main 添加 @media 断点，例如在小屏下设为 max-width: 100%，保证移动端适配；
- 使用 width: 100vw 替代 width: 100% 可更精准覆盖视口（尤其当 有滚动条时），但需注意 100vw 包含滚动条宽度，必要时可用 width: 100% + position: relative 配合父容器处理。
这种结构清晰、职责分明的布局方式，既符合现代 Web 标准，也便于后续维护与扩展。
