CSS布局出现水平滚动条 如何让页面适配浏览器不显示滚动条

我正在搭建页面示例，当前页面渲染后出现了非预期的水平滚动条，问题效果如下：

我需要页面完美适配浏览器视口，不出现水平滚动条，期望效果如下：

页面出现横向滚动条的本质是有元素的渲染总宽度超出了当前视口宽度，常见触发情况：

• 未统一盒模型，元素设置的宽度是内容宽度，加上padding、border后总宽度超出父容器
• 元素设置了横向负margin、或者定位偏移值过大，把部分内容推到视口范围外
• 使用了100vw作为宽度值，这个单位的计算包含浏览器纵向滚动条宽度，会直接撑出横向滚动条
• Flex/Grid布局下子元素内容过长，没有设置收缩规则，被内容撑开超出容器宽度

按顺序操作即可解决：

1. 先在全局CSS最顶部加入重置样式，统一盒模型规则，避免浏览器默认样式干扰：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html, body {
  width: 100%;
  overflow-x: hidden;
}

注意：overflow-x: hidden必须同时加在html和body标签上，单独加body在部分移动端浏览器中不生效

2. 打开浏览器开发者工具，触发横向滚动状态时，开发者工具会高亮标出超出视口的元素，针对该元素调整属性：
   • 如果是固定宽度元素在小屏幕下溢出，把固定宽度替换为max-width: 100%，适配不同视口宽度
   • 如果是带横向负margin的元素溢出，直接给它的父级容器加overflow-x: hidden裁剪超出部分即可
   • 如果是Flex布局子项被内容撑开溢出，给Flex容器加flex-wrap: wrap允许换行，同时给子项加min-width: 0允许收缩
   • 如果是用了width: 100vw的元素溢出，把宽度值改成width: 100%即可
3. 如果是全屏布局场景，给最外层容器设置height: 100vh、overflow: auto，内部模块都按100%宽度适配，就不会出现横向溢出。

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