分清display的三个属性值

display 三兄弟行为对比表格

属性值	是否换行	能否设置宽高	默认宽度	常用标签	典型用途
block	是	可以	撑满父容器	<div>, <p>, <section>	页面结构、布局容器
inline	否	不行	随内容大小	<span>, <a>	文字中嵌套、小图标
inline-block	否	可以	随内容大小	<img>, <button>	按钮、导航、卡片横排

---

应用建议

• block → 用于布局结构，如容器、标题、大块内容区域
• inline → 适用于文本中加修饰、图标
• inline-block → 做“能排队又能设置尺寸”的小组件最优（如按钮、横排卡片）

---

实用记忆口诀

block：独占一行，页面骨架靠它撑；
inline：随文字流，宽高都不灵；
inline-block：居中又好控，按钮卡片都用它。