step属性仅对type="number"、"range"、"date"、"time"等特定input有效，控制值的最小增量，与CSS布局无关。
step属性只对特定表单控件有效
step 属性不是通用 HTML 布局或比例分配工具，它仅在部分 <input> 类型中起作用，比如 type="number"、type="range"、type="date"、type="time" 等。它控制的是用户可选值的“最小增量”，不是 CSS 中的尺寸比例或 flex/grid 分配逻辑。
常见误解是想用 step 实现“把容器分成 5 份，每份占 20%”这类布局——这完全走错了方向，应该用 flex、grid 或百分比宽度。
number 和 range 输入框中 step 的实际作用
在 <input type="number"> 或 <input type="range"> 中，step 决定合法输入值之间的间隔：
-
step="1"：只允许整数（如 0、1、2、3…） -
step="0.1"：允许一位小数（如 1.0、1.1、1.2…） -
step="any"：取消限制，允许任意精度数值 - 若未设
step，type="number"默认为1，type="range"默认为1（但显示范围仍由min/max控制）
示例：
立即学习“前端免费学习笔记（深入）”；
<input type="range" min="0" max="100" step="25">
这个滑块只能停在 0、25、50、75、100 这 5 个位置——它“分成了 5 段”，但这是值域离散化，不是 DOM 元素尺寸分配。
为什么 step="0.33" 不会帮你实现三等分布局
有人尝试写：
<div step="0.33"></div>或给
<input type="text"> 加 step，结果发现毫无效果。这是因为：
-
step对type="text"、type="email"、<div> 等非数字/时间类元素完全无效，浏览器忽略该属性<li>即使属性被解析，它也不触发样式计算或盒模型重排</li> <li>CSS 中没有机制会读取 <code>step并据此设置width或flex-basis
如果你真需要“按比例分配”，直接用：
.container { display: flex; }
.item { flex: 1; } /* 均分 */
.item:nth-child(1) { flex: 2; } /* 第一项占两份 */容易被忽略的兼容性与校验细节
step 不只是 UI 提示，它参与原生表单验证：
- 用户手动输入不满足
step的值（如step="5"却输 12），提交时会触发ValidityState.stepMismatch === true - Safari 对
step="any"支持较晚（iOS 15.4+），旧版本可能退化为step="1" -
step值必须能被max - min整除才不会导致末端值不可达（例如min="0" max="10" step="3"，10 就无法选中）
真正要“按比例控制输入粒度”，得先确认场景是否属于数字/时间类输入；否则，别碰 step，它不负责布局，也不管样式。
