select默认content-box盒模型，width只作用于内容区，不包含padding和border，导致视觉“缩水”；而input/div常被设为border-box，同样width值实际占位更小，造成对齐偏差。
直接说结论：不是你写错了，是 select 默认用 content-box 盒模型，而多数现代 UI 框架或设计稿默认按 border-box 理解宽度——这中间差了 padding 和 border 的像素。
为什么width: 100%在select上总“缩水”？
浏览器对 select 的原生样式处理很保守：width 只管内容区，不包含边框和内边距；但 input 或 div 在重置后常被设为 border-box，导致同样写 width: 200px，select 实际占位更宽（内容区 200px + padding + border），视觉上反而显得“窄”或“对不齐”。
- Chrome / Firefox 下，
select默认padding约 4–6px，border1px，加起来可能多出 10+px - 如果父容器是
flex，且没设flex-shrink: 0，它还会被自动压缩，进一步放大偏差 - Safari 更麻烦：它给
select加了隐藏的background-image（下拉箭头），会偷偷影响可用宽度
Element Plus / Ant Design 等组件库中el-select或Antd Select为啥更难调？
这些封装组件在原生 select 外又套了多层 DOM，比如 .el-select → .el-input → .el-input__inner，每一层都可能有独立的 box-sizing、padding 或 max-width。尤其 el-select 的下拉触发器（.el-input__suffix）会挤占内容宽度，而 Antd Select 的样式还受 CSS Modules 隔离影响，直接写 .ant-select { width: 100% } 常常无效。
- Element Plus 中，优先改
.el-select .el-input__inner的宽度，而不是外层.el-select - Antd 场景下，得用
:global(.ant-select)或覆盖style属性（如dropdownStyle={{ minWidth: '100%' }}）才能穿透作用域 - 所有封装组件都要注意：
append-to-body模式会让下拉面板脱离父容器流，此时它的宽度不再继承父级width，需额外用minWidth或 JS 同步
怎么一劳永逸地统一表单控件宽度？
别指望靠全局 * { box-sizing: border-box } 解决所有问题——旧版 Element UI 等库内部逻辑依赖 content-box，强行重置反而让内边距错乱。稳妥做法是精准控制关键元素：
- 显式设置：
input, select, textarea { box-sizing: border-box; }，并补上background-image: none（防 Safari 箭头干扰） - Flex 容器里避免只写
width：改用flex: 0 0 200px或min-width: 0+flex-basis: 200px，防止内容撑开 - 响应式场景下，
select的min-width很关键：比如设min-width: 0配合flex-basis: 0，否则长选项文字会强制撑宽整个容器
最易被忽略的一点：第三方库的样式重置往往不覆盖 select 的 appearance，导致不同浏览器渲染差异极大。调试时务必在真实设备或真机模式下验证，不能只信桌面 Chrome 的表现。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
