HTML中为何在<body>下用<div class="container">？三种容器写法的CSS适配疑问

一、为什么不在上直接设置样式，而是嵌套

？ #

你测试的两段CSS在简单场景下显示效果一致，但实际项目中两者的差异会逐渐显现，核心原因在于布局隔离性、全局样式的独立性以及可扩展性：

• 避免全局样式冲突：浏览器默认给设置了margin（比如Chrome是8px），很多第三方CSS框架也会对有默认样式定义。如果直接修改的宽、边距，后续引入外部样式时容易发生冲突；而独立的.container只作用于内容区域，不会干扰的全局属性。
• 全局样式与内容样式分离：比如你想给页面加全屏背景色，直接给设background: #eee即可，内容在.container里居中显示，两者互不影响。如果直接给设固定宽度，背景色只会在这个窄宽度区域显示，达不到全屏效果。
• 样式复用性：.container类可以复用在页面其他局部模块上（比如某个弹窗、侧边栏也需要相同的居中宽度），而是唯一元素，样式无法复用。
• 布局结构清晰：后续扩展页面时，比如添加全屏的头部导航、页脚，可以直接放在.container外面，作为全局容器承载这些元素，内容区域则由.container专门负责，结构更易维护。

二、三种写法的选择及适用场景 #

1. 直接给写样式 #

body {
    width: 80vw;
    margin: 0 auto;
    margin-top: 3vh;
}

• 优势：少一层DOM节点，结构极简。
• 劣势：样式无法复用，容易和全局样式冲突，后续扩展布局时（比如加全屏组件）需要重新调整样式，灵活性差。
• 适用场景：仅用于极简静态页面，不需要后续功能扩展，且完全自主控制所有样式，无第三方依赖。

2. 嵌套

#

.container {
    width: 80vw;
    margin: 0 auto;
    margin-top: 3vh;
}

• 优势：布局隔离清晰，不干扰的全局属性，样式可复用，后续扩展页面组件（如全屏header、footer）非常方便，是行业通用的布局方案。
• 劣势：多一层DOM节点，但现代浏览器对这种层级的性能影响可以忽略不计。
• 适用场景：绝大多数常规项目，尤其是需要复杂布局、后续可能迭代扩展，或使用Bootstrap等第三方CSS框架的场景。

3. #

.container {
    width: 80vw;
    margin: 0 auto;
    margin-top: 3vh;
}

• 优势：兼具直接写样式的简洁性（少一层DOM）和类样式的复用性，且类选择器的优先级比直接写选择器更高，遇到样式冲突时更容易覆盖。
• 劣势：如果.container设置了固定宽度，的全局属性（如背景色）会被限制在这个宽度内，需要额外给单独设置全局样式（比如body { background: #eee; }，再用.container控制内容）。
• 适用场景：想要精简DOM结构，同时需要复用容器样式，且能清晰区分全局样式与内容容器样式的场景。

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