直接写 body { margin: 0; } 不够用，因为浏览器对 h1、ul、form、blockquote 等元素各自有独立默认 margin 和 padding，只清 body 仍会出现“意外留白”；必须配合 box-sizing: border-box 并重置关键元素或伪元素，否则 width + padding 会超出预期，且表单控件等需单独声明。
为什么直接写 body { margin: 0; } 不够用
因为浏览器对 h1、ul、form、blockquote 等元素各自有独立的默认 margin 和 padding，只清空 body 的边距，页面里依然会冒出“意外留白”。比如 Chrome 给 h1 默认加了上下 0.67em，Firefox 可能略高，Safari 在某些版本里还会叠加字体缩放逻辑——这些都不是你写的样式，但会影响布局起点。
必须搭配 box-sizing: border-box 才算真正归零
光清边距不改盒模型，后续写 width: 100px; + padding: 10px; 时，实际宽度变成 120px，调试时容易误判是边距没清干净。真正可控的做法是把两者绑在一起：
-
*, *::before, *::after { box-sizing: border-box; }—— 覆盖所有元素及伪元素，避免::before做装饰三角形时尺寸错乱 - 不要只写
* { box-sizing: border-box; }，漏掉伪元素在 Flex/Grid 中可能引发子项溢出 - 某些第三方组件（如旧版 Bootstrap）会用
!important覆盖该规则，需针对性补一句.btn { box-sizing: border-box !important; }
button 和 input 必须单独声明 box-sizing
全局通配符对表单控件经常失效，尤其在 Safari/iOS WebView 中：button 的 line-height 解析异常，input 在部分 Android WebView 里会忽略继承。所以必须显式写：
button, input, textarea, select { box-sizing: border-box; }- 再同步重置
padding（Chrome 默认6px 12px，Firefox 是4px 8px），推荐统一为padding: 8px 16px; -
border推荐用1px solid transparent，既占位又不显色，避免 IE6–7 把无色边框当“隐形挤压器”
IE8 及更早版本需要降级处理
这些浏览器根本不识别 box-sizing，任何前缀或写法都无效。真要兼容，就得放弃“单属性覆盖”思路：
-
padding: 0;+border: 1px solid transparent;是底线，否则内容区会被进一步挤压 -
line-height: normal;或显式设line-height: 1.4;，再配height: 28px;（尽量与行高一致），防止文字偏上 -
display: inline-block;+zoom: 1;触发 hasLayout，修复 IE7/8 下的渲染抖动
现代项目基本不用管 IE8–，但若遇到遗留系统，这些细节就是布局不崩的关键——不是写得越多越稳，而是哪几行不能少。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
