如何让body元素宽度拉伸至与html元素宽度一致？

嘿，这个问题其实很好解决，核心是浏览器给body元素默认加了外边距，而且它默认的宽度只包裹内容，所以才会和html元素宽度不一致。咱们直接调整body的CSS就行：

html { 
  background: url(flowers.png) no-repeat center center fixed; 
  background-size: cover; 
}

body { 
  background-color: rgba(255, 255, 255, 0.75);
  margin: 0; /* 清除浏览器默认的8px左右外边距，这是关键 */
  width: 100%; /* 让body宽度完全继承父元素html的宽度 */
  min-height: 100vh; /* 可选：如果页面内容少，确保body高度铺满视口，半透明背景完整显示 */
  box-sizing: border-box; /* 可选：后续加padding时，不会让body宽度超出视口 */
}

关键属性说明： #

• margin: 0：浏览器默认会给body设置margin: 8px左右，这会让body左右两边出现空隙，看起来比html窄，去掉它就能让body和html的边缘对齐。
• width: 100%：让body的宽度和父元素html完全一致（html作为根元素，默认宽度就是整个视口的宽度）。
• min-height: 100vh：这是可选优化，如果你的页面内容不多，body高度可能不够铺满屏幕，加上这个属性可以让body至少占满整个视口高度，半透明背景色就能覆盖全屏了。
• box-sizing: border-box：同样是可选优化，如果你之后需要给body添加padding，这个属性会把padding计算在width: 100%之内，避免body宽度超出视口出现横向滚动条。

这样调整后，body的宽度就会和html完全一致，同时保持你想要的背景图透过半透明body显示的效果啦~

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