必须同时声明, ::before, *::after { box-sizing: border-box }，因为伪元素不继承box-sizing，默认content-box会导致UI库装饰元素撑开容器；表单控件还需单独声明以对抗UA样式覆盖。
为什么只写 * { box-sizing: border-box } 会漏掉表单控件
因为 ::before 和 ::after 伪元素不继承 box-sizing，而很多 UI 库（比如 Ant Design 的下拉箭头、日期选择器的图标）依赖这些伪元素做装饰；它们若仍用默认的 content-box，padding/border 就会额外撑开容器，在 Safari 或旧版 Chrome 中尤其容易导致布局错位。表单控件如 在 Safari 中对继承行为也不稳定，光靠通配符压不住。
-
*、*::before、*::after必须同时声明box-sizing: border-box -
input、textarea、select、button要单独再写一遍，防止被框架或 UA 样式覆盖 - 这条规则必须放在所有 CSS（包括 normalize.css 和框架样式）之前载入，否则会被后续
!important覆盖
如何清除表单元素的默认边框与聚焦轮廓
浏览器对 input、select、textarea 等有强 UA 样式干预：Chrome 加聚焦阴影、Firefox 保留原生下拉箭头、Safari 给 button 暗色边框。只写 border: none 不够，还必须处理 outline、box-shadow 和 -webkit-appearance。
-
border: 0+outline: none+box-shadow: none是基础三件套 - Firefox 必须加
-moz-appearance: none，否则border: 0会被忽略 - WebKit 浏览器（Safari / Chrome）需加
-webkit-appearance: none去除原生控件外观（如下拉箭头、滚动条） - 若要保留可访问性焦点态，别真删
outline，改用outline: 2px solid #007bff并确保对比度达标
哪些表单元素容易被 reset.css 漏掉
多数轻量 reset（包括 normalize.css）不碰 fieldset、legend、optgroup 和 progress 这类“冷门”表单元素。它们在 Chrome 里默认带 border，IE 里 button 有奇怪的 padding，而 input[type="range"] 的轨道和滑块更是各浏览器实现天差地别。
-
fieldset默认有border: 1px groove，需显式设为border: 0 -
legend默认有 margin 和 font-weight，建议统一设margin: 0和font-weight: normal -
input[type="range"]需分别重置::-webkit-slider-runnable-track和::-moz-range-track伪元素 -
progress元素在 Firefox 中默认无背景，Chrome 中有蓝色填充，得手动补全各浏览器前缀
reset 后还要手动补什么才真正可用
清空不等于可用。去掉默认边框后，用户可能无法识别哪里是输入区；移除默认 padding 后，文字会贴边；没了 focus outline，键盘用户直接失焦。所谓“彻底重置”，其实是为自定义留出干净接口，不是追求视觉“真空”。
-
input、textarea、select至少补padding: 8px 12px和line-height: 1.5 -
textarea加resize: vertical或resize: none，避免失控拉伸 -
button补cursor: pointer和user-select: none，防误选文字 - 所有表单控件加
font-family: inherit和font-size: 100%，确保字体继承一致
真正难的不是写出那几行 reset，而是有人 later 加了个 .legacy-form input { box-sizing: content-box !important }，或者某插件 CSS 漏写了 *::after，问题只在 iOS Safari 上偶现——这时候你得知道该去哪查。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
