HTML按钮默认display为inline-block而非block或inline，因其UA样式含vertical-align:middle和padding；改display需谨慎，避免破坏对齐或引发兼容性问题，多数布局需求应通过容器而非按钮自身display解决。
HTML按钮没有“显示类型”这个独立可设的属性，display 值由 CSS 控制，且默认是 inline-block——不是 block，也不是 inline，这点容易误判。
为什么
因为浏览器 UA 样式给 <button> 设了 display: inline-block，同时附带 vertical-align: middle 和非零 padding。直接写 display: block 会生效，但可能破坏原有对齐或尺寸预期。
- 在表单内，
inline-block能和<input>、文字自然同行；改成block会强制换行，常导致布局错位 -
vertical-align: middle是隐式存在的，若删掉又没重设，按钮可能和旁边文字上下错开 - 部分旧版 IE 对
button的display改写支持不稳定，尤其配合float或flex时
修改 display 的常见场景与对应写法
真正需要改 display，通常是为了适配特定布局容器，而非“让按钮变大”或“居中”这类表面需求。
- 放进
flex容器并希望撑满宽度：用display: flex不必要，直接设width: 100%更稳妥；若必须 flex 化（比如内部图标+文字需弹性分布），应保留display: inline-block，在外层容器设display: flex - 在 Grid 布局中占整格：无需改
display，用grid-column: 1 / -1或justify-self: stretch即可 - 替换为
display: none隐藏按钮：注意这会彻底移出文档流，如需保留占位，改用visibility: hidden或opacity: 0 - 模拟链接行为（如跳转）：不推荐强行改
display: inline，而应保持inline-block并加cursor: pointer+text-decoration: none（若套了<a>）
容易被忽略的 display 兼容性细节
display 值本身兼容性极好，但组合使用时隐患多：
立即学习“前端免费学习笔记（深入）”；
-
display: contents在按钮上基本无效——它会让<button>失去语义和可访问性，屏幕阅读器可能跳过，且点击区域丢失 -
display: table-cell会导致padding行为异常，某些 Safari 版本中垂直居中失效 - 用 JavaScript 动态改
style.display时，若原样式来自 class（如.btn--full），直接写el.style.display = "block"会覆盖 class，建议用el.classList.toggle("is-hidden")控制显隐 - 移动端键盘弹起时，某些 Android WebView 会对
display: flex按钮触发意外重绘，表现为闪烁或尺寸抖动
真正要动 display，先确认是不是布局容器的问题；大多数时候，问题不在按钮本身，而在它所处的上下文。
