如何为页面区块设宽度而非全局body？新手CSS布局疑问

你的当前方案完全合理，精准解决了「部分区块需要满宽背景、部分区块需要固定内容宽度」的需求，实现简单且效果达标，对于学习两周的新手来说，能想到这种针对性的解决思路已经很棒了。

更优的通用实现思路 #

实际前端项目里，更常用的是「区块满宽承载背景 + 内部容器控制内容宽度」的嵌套结构，这样不用反复给不同区块加类，结构逻辑更清晰：

1. 保持body默认的全屏宽度，不需要设置固定宽度
2. 创建一个通用的内容容器类（比如命名为.content-container）：

.content-container {
  width: 144rem;
  margin: 0 auto;
  padding: 0 1.2rem;
}

3. 布局逻辑：
   • 需要满宽背景的section：直接给section设置背景色，把区块内的所有内容放进.content-container里，这样背景撑满屏幕，内容保持固定宽度
   • 不需要满宽背景的section：同样把内容放进.content-container里即可（section本身不用额外设置背景，默认继承父级背景）

举个HTML结构示例：

<!-- 带满宽白背景的section -->
<section style="background-color: #ffffff;">
  <div class="content-container">
    <!-- 这里放置该区块的具体内容 -->
  </div>
</section>

<!-- 不需要满宽背景的section -->
<section>
  <div class="content-container">
    <!-- 这里放置该区块的具体内容 -->
  </div>
</section>

这种方式的优势：

• 语义更清晰，把「背景承载」和「内容宽度控制」的职责分开
• 不用记忆哪些区块需要加特殊类，所有需要固定宽度的内容统一套进容器即可
• 后续维护更高效，比如要调整固定宽度、内边距，只需要修改.content-container这一处样式

另外提个小细节：你使用rem作为单位是个很好的习惯，但要确保根元素（html）的字体大小设置合理，避免在不同设备上出现尺寸偏差。

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