8. 元素显示类型与转换
每个元素都有 display 属性，默认值取决于元素类型。
通过 display 属性可以相互转换。
block 独占一行；inline 不换行但无法设置宽高；
inline-block 不换行且可设宽高。
display 对比（三个独立元素，可分别调整）
div标签(display: block)
span标签(display: inline)
img标签(display: inline-block)
💡 观察要点：
· block 元素独占一行，宽高可自由设置；
· inline 元素不换行，但宽高设置无效（滑块会变灰）；
· inline-block 元素不换行，同时宽高可以设置。
| 类型 | 换行 | 宽高 | 边距 | 示例元素 |
|---|---|---|---|---|
| block | 是 | 可设 | 四方向 | <div> <p> <h1>-<h6> <section> <ul> <li> |
| inline | 否 | 不可 | 仅左右 | <span> <a> <strong> <em> <label> |
| inline-block | 否 | 可设 | 四方向 | <img> <input> <button> <select> |
| flex | 取决于容器 | 可设 | 四方向 | 弹性容器 |
| grid | 取决于容器 | 可设 | 四方向 | 网格容器 |
display 设置
元素 1 · 模拟 <div>（默认 block）
元素 2 · 模拟 <span>（默认 inline）
元素 3 · 模拟 <img>（默认 inline-block）