如何通过CSS重置盒模型来简化布局设计？-css教程-PHP中文网

必须全局设置、::before、*::after { box-sizing: border-box; }，否则伪元素及子元素仍按content-box计算，导致width: 100%加padding时总宽超限溢出。

如何通过css重置盒模型来简化布局设计？

box-sizing: border-box 必须全局设置，否则尺寸计算不可控

不设 box-sizing: border-box，width: 100% 的元素加 padding: 16px 就会溢出父容器——这不是 bug，是 content-box 的标准行为。浏览器默认就是 content-box，reset 文件里只清 margin/padding 并不能改变它。

正确做法是紧贴 <style></style> 开头或 :root 下写：

*, *::before, *::after {
  box-sizing: border-box;
}

* 覆盖所有元素，但不匹配伪元素，所以必须显式加上 *::before, *::after
漏掉伪元素会导致用 ::before 画的装饰边框、三角箭头等多出几像素，在 flex 容器里容易换行
不要用 inherit 替代，IE8– 不支持，且根节点没设 border-box 时会回退到 content-box
这条规则必须放在所有 reset 样式之后，否则可能被后续样式覆盖

reset 清掉 margin/padding 后，语义间距得重定义

清掉 <p></p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板"><img src="https://img.php.cn/upload/webcode/000/000/018/178607072210981.jpg" alt="CSS婚礼策划服务机构宣传网站模板" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="overflowclass">CSS婚礼策划服务机构宣传网站模板</a> <p class="overflowclass">CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。</p> </div> <a rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> 的 margin: 1em 0 是为了统一起点，不是为了“消灭间距”。清完你会发现段落糊在一起、标题挤成一团——这说明你还没定义设计系统需要的语义间距。

别恢复浏览器默认值，而是按组件粒度声明：p { margin-bottom: 1.2rem; }、h2 { margin-bottom: 0.8rem; }
卡片类组件内部用 padding 控制内容呼吸感，卡片之间用 margin 控制组合间距，职责分离更易维护
避免外边距合并（margin collapse）：对父容器触发 BFC（如 overflow: hidden），或统一用 margin-bottom 避免上下同时设 margin

为什么 minireset.css 比通配符 reset 更可靠

minireset.css 不是简单清零，它只做两件事：html { box-sizing: border-box; } + *::before, *::after { box-sizing: inherit; }，再配合极简的 margin/padding 归一化。体积小、无副作用、兼容性好。

通配符 * { margin: 0; padding: 0; box-sizing: border-box; } 在大型项目中可能影响性能，尤其当 DOM 深度大时
minireset.css 的 box-sizing: inherit 确保伪元素继承根节点设置，比通配符更精准，也规避了 IE 兼容问题
它不碰 font-size、line-height 等，留给开发者按需定义，而不是强加一套“归一化字体”