因为input默认是内联元素（display: inline），不响应width和height；需显式设display: block或inline-block，并配合box-sizing: border-box、min-width: 0（Flex下）、清除UA样式等才能生效。
为什么直接写 width 和 height 常常没反应
因为 <input> 默认是内联元素（display: inline），它不响应 width 和 height，除非显式改变显示模式。很多新手在 style 里写了 width: 200px 却发现没变化，八成是被这个默认行为卡住了。
更隐蔽的问题包括：
-
box-sizing是content-box（默认）时，padding和border会额外撑出宽度，导致实际控件比预期宽 - 父容器用了
flex或grid，但没设min-width: 0，导致width: 100%被压缩失效 -
type="number"在 Chrome/Firefox 中自带上下箭头，会侵占可用宽度，且无法通过width精确覆盖
size 属性到底能不能当宽度用
size 是 HTML 原生属性，只对 type="text"、type="search"、type="tel" 等少数类型生效，它表示“当前字体下能显示几个等宽字符”，不是像素值，也不响应缩放。
适用场景很窄：
立即学习“前端免费学习笔记（深入）”；
- 后台配置表单里一排短字段（比如端口号
size="5"、协议size="8"） - 不涉及中英文混排、不需响应式、不依赖精确对齐的简单页面
踩坑点：
-
size="10"+maxlength="10"≠ 刚好装下 10 个中文——汉字视觉宽度远大于英文，常出现输入框溢出或文字被截断 - 用了非等宽字体（如
font-family: "Helvetica", sans-serif）后，size完全不可靠 -
type="email"或type="url"下，某些浏览器 UA 样式会忽略size
用 CSS 控制宽高的稳妥写法
真正可控、可预测、跨浏览器一致的做法是纯 CSS，且必须组合使用几个关键声明：
- 加
box-sizing: border-box—— 否则padding和border会让总宽超出设定值 - 高度优先用
height + padding，而不是只靠height；文字垂直居中靠padding-top和padding-bottom，比调line-height更稳 - 宽度推荐
width: 100%配合max-width: 300px（防在宽屏下拉得太开） - 对字符宽度敏感的场景，改用
width: 20ch（1ch ≈ 字体中 “0” 的宽度），比size更现代、更可控
示例：
input[type="text"] {
width: 100%;
max-width: 280px;
height: 40px;
padding: 8px 12px;
box-sizing: border-box;
font-size: 14px;
}
type="number" 的宽度怎么清掉箭头干扰
Chrome/Firefox 给 type="number" 加了原生上下箭头，它们算作控件一部分，会吃掉左右空间，导致你设的 width: 200px 实际内容区可能只剩 170px 左右。
要彻底解决，得手动清除：
- 加
appearance: none（Firefox 需-moz-appearance: textfield） - 重置
padding和border，避免 UA 样式残留 - 如果还要保留箭头功能，得自己用 CSS + JS 模拟，不能依赖原生
最小可用样式：
input[type="number"] {
-webkit-appearance: none;
-moz-appearance: textfield;
appearance: none;
width: 100%;
max-width: 120px;
padding: 8px 12px;
box-sizing: border-box;
}
实际项目里最常被忽略的，是没统一处理 box-sizing。哪怕只在一个 input 上漏了 border-box，配合 padding 时就会和其他输入框高度错位——这种细节在表单密集页（比如注册页、后台配置页）里特别伤调试时间。 
