width: 100%在表单中常失效，根本原因是浏览器对input等控件硬编码默认宽度（如Chrome为130px）并设置min-width:auto或width:auto覆盖样式，必须同时声明width: 100%和box-sizing: border-box才能生效。
为什么 width: 100% 在表单里经常失效
不是 CSS 写错了，而是浏览器对原生控件（input、select、textarea）有默认宽度硬编码——Chrome 桌面端常固定为 130px，Safari 可能更窄。你写了 width: 100%，但它被 min-width 或用户代理样式表里的 width: auto 覆盖了。
必须显式重置两件事：width: 100% + box-sizing: border-box。缺一不可：
-
box-sizing: border-box防止padding和border把实际宽度撑超 100% - 别用
max-width替代width，否则小屏下仍可能溢出视口 -
button同样要加这两条，尤其带图标时容易换行或截断
textarea 的 resize 属性为什么总不生效
resize: none 写了但还能拖，大概率是 overflow 缺失——CSS 规范强制要求：只有当 overflow 为 auto、hidden 或 scroll 时，resize 才起作用。而 textarea 默认是 overflow: visible，此时整个声明被浏览器静默忽略。
- 验证方式：开发者工具 → 「Computed」面板搜
resize，看最终值是不是none - 第三方 UI 库（如 Element Plus）常把真实
textarea包在div里，类名类似.el-textarea__inner，直接写textarea { resize: none; }根本不匹配 - 最稳写法是内联：
大屏下 label 和 input 错位怎么修
这不是 bug，是弹性布局没约束横向节奏。纯靠 display: block 或 flex-direction: column 堆叠，在 2560px+ 宽度下会导致视线横移过大。
- 用
max-width: 720px包裹整个表单区域（不是只设width: 100%），把内容锚定在视觉舒适区 -
label改用display: inline-block+min-width: 120px，防短 label 被压缩导致右对齐失衡 -
input统一加width: calc(100% - 120px)，与label宽度联动，不依赖媒体查询硬切 - 禁用
text-align: right对齐label——宽屏下右对齐会加剧视线跳跃，改用text-align: left+padding-right: 24px
高 DPI 屏幕上原生控件模糊或缩放异常
Windows + Chrome 组合下常见：下拉箭头糊成一团、日期弹层位置偏移、textarea 行高塌陷。本质是浏览器对高 DPI 渲染策略差异。
- 强制启用 subpixel 渲染：
input, select, textarea { -webkit-font-smoothing: antialiased; } - 修复
select箭头尺寸失真：显式设padding: 10px 16px，并用 SVG 替换默认箭头背景 -
textarea必须显式设line-height: 1.5，不能依赖浏览器默认值；同时加resize: vertical并配max-height防无限拉高 - 对
type="date"等控件，加@media (-webkit-min-device-pixel-ratio: 2) { input[type="date"] { font-size: 16px; } }避免 Retina 下字体被压缩
最易被忽略的是提交按钮：它不能和输入框一样宽。必须保持紧凑（width: fit-content），否则在大屏下会割裂视觉动线，且破坏表单的焦点流节奏。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
