input默认为inline元素，width/height无效；需设display:block/inline-block、box-sizing:border-box，并用padding+line-height控高，width+max-width控宽，避免依赖size属性。
input 的长度和宽度控制，不是写个 size 或 width 就完事——浏览器默认把它当内联元素，width 和 height 直接失效，size 又不可控、不响应式、还容易和 CSS 冲突。真要稳，得靠组合拳。
为什么 width 和 height 在 input 上经常没反应
因为 input 默认是 display: inline，它不认 width/height，除非你显式改显示模式。更常见的是被父容器约束、浏览器默认样式覆盖，或者 box-sizing 没设对，导致 padding/border 算在 width 外面，实际内容区被挤窄。
- 必须加
box-sizing: border-box，否则width: 200px; padding: 10px;实际占宽是 220px - 单设
height对文本输入框效果差，文字常上下偏移；用padding+line-height（或只用padding）更可靠 -
input[type="number"]自带上下箭头，会侵占宽度，需加appearance: none并重置padding-right - Flex 或 Grid 容器里，
width: 100%可能被拉伸过宽，建议配max-width
size 属性到底能不能用
size 不是像素单位，它只是“约等于多少个等宽字符”的估算值，受字体、字号、缩放、浏览器实现影响极大。现代项目里它只剩两个价值：老旧系统兼容 fallback，或极简静态页无 CSS 场景下的降级显示。
-
size="30"在 14px 微软雅黑下可能渲染成 280px，在 16px 苹果字体下变成 320px，无法预测 - 和
style="width: 200px"共存时，CSS 优先级更高，size被静默忽略 - 对
type="password"或含 emoji 的输入，视觉宽度偏差更明显 - 真正需要“字符宽度语义”时，用
width: 30ch（CSS 单位）比size稳定得多
怎么写出真正可控的输入框尺寸
最稳妥的写法是类名驱动 + 明确 box-sizing + 宽高组合逻辑，而不是依赖单属性或内联 style。
- 统一基础样式：
.form-input { width: 100%; max-width: 400px; height: 40px; padding: 8px 12px; box-sizing: border-box; } - 对
type="number"额外处理：appearance: none; padding-right: 24px;（再加自定义箭头图标） - 响应式场景下避免固定
px，改用width: 100%; max-width: 30ch或min(400px, 100%) - 不要给
input设font-size单独调大小，它会影响ch单位和行高计算，统一在父容器或全局基础样式里控
maxlength 和显示宽度怎么协同
maxlength 是唯一能真正拦截超长输入的原生属性，但它和显示宽度无关。用户看到一个宽框，就默认能输很多字——如果 maxlength 比显示宽度暗示的字符数小太多，体验会断裂。
- 搜索框：
width: 100%; max-width: 50ch;+maxlength="100"（显示宽，但后端防滥用） - 验证码：
width: 8ch;+maxlength="4"（视觉字符数 ≈ 实际上限） - 中文昵称：
width: 200px;+maxlength="16"（汉字基本 1:1，但 emoji 仍可能超，服务端必须二次校验） - 千万别写
size="50" maxlength="10"——用户第一眼会觉得“这框明明还能输更多”，产生困惑
最易被忽略的一点：所有这些尺寸控制，最终都要在真实设备上测缩放、测字体替换、测暗色模式下 border contrast 是否够——box-sizing 和 padding 组合看着简单，但少一个，整个表单高度就错一像素，文字就贴边或悬空。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
