分清display三个属性
display 三兄弟行为对比表格
| 属性值 | 是否换行 | 能否设置宽高 | 默认宽度 | 常用标签 | 典型用途 |
|---|---|---|---|---|---|
block | 是 | 可以 | 撑满父容器 | <div>, <p>, <section> | 页面结构、布局容器 |
inline | 否 | 不行 | 随内容大小 | <span>, <a> | 文字中嵌套、小图标 |
inline-block | 否 | 可以 | 随内容大小 | <img>, <button> | 按钮、导航、卡片横排 |
应用建议
block→ 用于布局结构，如容器、标题、大块内容区域inline→ 适用于文本中加修饰、图标inline-block→ 做“能排队又能设置尺寸”的小组件最优（如按钮、横排卡片）
实用记忆口诀
block：独占一行，页面骨架靠它撑；
inline：随文字流，宽高都不灵；
inline-block：居中又好控，按钮卡片都用它。