display: block 作用于容器不会改变其子元素的默认显示行为；要使 垂直排列，需显式设置 input { display: block }，因为原生 是 inline-level 元素。
`display: block` 作用于容器不会改变其子元素的默认显示行为；要使 `` 垂直排列，需显式设置 `input { display: block }`，因为原生 `` 是 inline-level 元素。
在 CSS 中，display 属性控制的是当前元素自身的盒模型类型，而非其子元素的布局方式。这意味着：将 .container { display: block } 仅表示该 <form></form> 元素自身以块级方式参与文档流（例如独占一行、可设宽高），但对内部 <input> 和 <button></button> 的排列毫无影响——它们仍按浏览器默认规则渲染。
HTML 中，<input> 默认是 display: inline-block（部分浏览器可能表现为 inline，但行为一致）：它具有内联元素的流动特性（不换行、同行排列），同时支持部分块级样式（如 height、padding）。因此，两个 <input> 会像文字一样水平并排显示。
✅ 正确解法是直接为输入控件设置块级显示：
.container input,
.container button {
display: block;
margin: 8px auto; /* 可选：垂直间距 + 水平居中 */
width: 240px; /* 推荐设定宽度，避免过宽或过窄 */
}
这样每个 <input> 和 <button></button> 都成为独立的块级元素，自然从上到下依次排列，且默认占据父容器全宽（除非另有宽度限制）。
⚠️ 注意事项：
- 不要依赖
display: block在父容器上“传染”给子元素——CSS 没有继承display的机制； - 若需保持按钮与输入框同宽并对齐，建议统一设置
width和box-sizing: border-box； - 在 React 等框架中，
className写法正确（非class），但确保 CSS 文件已正确引入； - 更现代的替代方案是使用 Flexbox：
.container { display: flex; flex-direction: column; align-items: center; }，语义更清晰、控制更灵活。
总结：布局控制权始终在具体元素自身。理解“谁负责什么”是掌握 CSS 布局的关键——容器定义结构上下文，子元素决定自身呈现方式。
