正确做法是为表单控件统一设置 width: 100%; max-width: 400px; box-sizing: border-box，并补充 -webkit-appearance: none、margin: 0 和 vertical-align: middle；textarea 不可遗漏，字号宜用 rem 或 clamp() 响应式控制。
用 width: 100% + max-width 是对的，但得加 box-sizing: border-box
直接写 width: 100% 很容易导致控件撑出父容器——因为默认 box-sizing: content-box，而表单控件（如 、）自带 border 和 padding，会叠加在 100% 宽度之外。
- 必须显式设置
box-sizing: border-box，让 padding/border 包含在宽度内 -
max-width建议设为具体像素值（如max-width: 400px），避免在大屏上过宽影响可读性 - 别只写
width: 100%就完事，没box-sizing的 100% 在多数浏览器里都会溢出
需要统一处理所有表单控件？用属性选择器批量覆盖
手动给每个 、、 加样式太累，CSS 属性选择器更稳妥：
input,
textarea,
select {
width: 100%;
max-width: 400px;
box-sizing: border-box;
}
注意：不要漏掉 textarea，它默认是块级但不自动填满父容器；也不要只写 input[type="text"]，会漏掉 email、number 等类型。
遇到 input[type="search"] 或 WebKit 自定义外观失效？加 -webkit-appearance: none
某些浏览器（尤其是 Safari / Chrome）会给 search、number 等输入框加原生 UI 样式，导致 width 计算异常或右侧出现多余空白。
立即学习“前端免费学习笔记（深入）”；
- 加上
-webkit-appearance: none可重置原生样式 - 配合
margin: 0和vertical-align: middle消除基线对齐错位 - 如果用了自定义清除按钮（
::-webkit-search-cancel-button），记得单独隐藏或重置它的尺寸
响应式断点里要不要改 max-width？看设计需求，不是必须
很多教程一提响应式就加媒体查询，但实际中：max-width 本身已是响应式基础——它保证小屏下填满、大屏下不无限拉伸。除非设计稿明确要求：
- 手机端：填满屏幕（
max-width: 100%或保持400px） -
平板横屏：放宽到
500px - 桌面端：固定
320px防止过长（比如登录表单）
这时候才加媒体查询。否则，一套 width: 100%; max-width: 400px; box-sizing: border-box 足够应付绝大多数场景。
真正容易被忽略的是：表单控件的 font-size 和 line-height 在小屏上没同步缩放，会导致文字挤出或高度塌陷——建议用 rem 或 clamp() 控制字号，而不是只盯着宽度。
