直接用 width/height 设置按钮尺寸最简单，但需注意 display 值、元素类型（如 input[type="image"] 忽略 css height）、box-sizing、padding 与 font-size 配合更可靠，响应式推荐 min-width/max-width 组合。
直接用 width 和 height 设置按钮尺寸最简单，但有前提
对 <button></button> 或 <input type="button"> 元素，width 和 height 能立刻生效，前提是它们的 display 值不是 inline（默认是 inline-block，所以通常没问题）。但对 <input type="image">，height 是原生 HTML 属性，必须写在标签里：<input type="image" height="48" width="48">，CSS 的 height 在这里会被忽略。
- 不要给
<input type="submit">同时设width+height又加大font-size，容易触发浏览器渲染错位（尤其旧版 Edge） -
width: 100%对<button></button>有效，但若父容器没设宽，结果可能不可控 - 用
px单位最稳妥；用%时注意父元素是否为block且有明确宽度
padding + font-size 比直接设 width/height 更可靠
按钮实际点击区域由内容区 + 内边距共同构成。只调 width/height 容易压扁文字或留白突兀，而加大 padding 和 font-size 能自然撑开尺寸，同时保持比例协调。
-
padding: 12px 24px比height: 48px; width: 160px更适应不同字号和行高 - 配合
box-sizing: border-box，能让padding包含在设定的width内，避免尺寸意外溢出 - 移动端慎用固定
px的padding，可改用rem或em配合根字体缩放
响应式场景下，min-width 和 min-height 比 width/height 更实用
纯 width: 100% 在小屏上可能把按钮压得太窄，而固定像素值又在大屏上显得局促。此时用 min-width 保底线、max-width 设上限，再配合 width: fit-content 或 width: 100%，更可控。
-
min-width: 120px; width: 100%; max-width: 280px;是按钮响应式的常见组合 -
height很少设为百分比，因为高度依赖内容；优先用min-height防止文字挤在一起 - 媒体查询中改
padding比改width/height更安全，避免重排（reflow）抖动
border-radius 和 line-height 会悄悄影响视觉大小感
圆角会让按钮看起来比实际尺寸“小”一点，尤其当 border-radius 接近半高时；而 line-height 不匹配 height 会导致文字上下偏移，误判按钮高度。
- 设
border-radius: 8px时，建议同步微增padding-top和padding-bottom补偿视觉收缩 - 对单行文字按钮，
height和line-height设为相同值能确保垂直居中；否则用display: flex; align-items: center; -
vertical-align: middle对inline-block按钮仍有影响，尤其和文字混排时，别忽略
box-sizing 默认值、line-height 失配、或响应断点处 padding 与 font-size 没同步缩放。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
