CSS 的 display: block 作用于父容器时，并不会改变其子元素的默认显示行为；要使 垂直排列，需显式设置子元素为 display: block，因为 默认是 inline-block。
css 的 `display: block` 作用于父容器时，并不会改变其子元素的默认显示行为；要使 `` 垂直排列，需显式设置子元素为 `display: block`，因为 `` 默认是 `inline-block`。
在 Web 开发中，理解 CSS display 属性的作用范围至关重要。许多初学者误以为给父容器（如 .container）设置 display: block 就能“强制”所有子元素竖向堆叠——但事实并非如此。
display 是每个元素自身的属性，它只决定该元素在文档流中的布局行为，不会继承，也不会级联影响子元素。<input> 元素在浏览器中的默认 display 值是 inline-block（而非 inline 或 block），这意味着它们：
- 可以设置宽高、内边距、外边距；
- 默认在同一行内水平排列（类似文字）；
- 不会自动换行，除非遇到容器边界或显式换行符。
因此，即使你将 <form class="container"></form> 设为 display: block，它的两个 <input> 仍保持 inline-block 行为，继续横向并排。
✅ 正确做法是直接控制子元素的显示模式：
.container input {
display: block;
margin: 0.5rem auto; /* 可选：居中 + 垂直间距 */
width: 80%; /* 可选：避免过宽 */
}同时注意：HTML 中 className 是 React 写法，标准 HTML 应使用 class（示例已修正）：
<div>
<form class="container" action="">
<input name="fName" placeholder="First Name" type="text" value={props.fName} />
<input name="sName" placeholder="Second Name" type="text" value={props.sName} />
<button type="submit">Submit</button>
</form>
</div>⚠️ 补充说明：
-
<button></button>同样默认为inline-block，若需统一垂直对齐，也建议添加.container button { display: block; }； - 更现代的替代方案包括使用 Flexbox（
.container { display: flex; flex-direction: column; align-items: center; }）或 Grid，语义更清晰、控制更灵活； - 避免依赖
text-align: center实现块级元素居中——它仅对行内内容有效；块级子元素需配合margin: 0 auto或 Flex/Grid 才能真正水平居中。
掌握 display 的“个体性”与元素的默认渲染行为，是写出可预测、易维护 CSS 的关键基础。
