HTML 块级与行内元素
理解块级元素和行内元素的区别与转换 · 难度：入门 · +10XP
块级元素 vs 行内元素
HTML元素分为两大类型：块级（Block）和行内（Inline）。理解它们的区别是掌握CSS布局的基础。
块级元素 Block
独占一整行，自动在前后换行。可以设置width和height。
| 元素 | 说明 |
|---|---|
<div> | 通用容器，最常用 |
<h1>-<h6> | 标题 |
<p> | 段落 |
<ul>/<ol>/<li> | 列表 |
<section> | 页面分区 |
<header>/<footer> | 页头/页脚 |
行内元素 Inline
不换行，和其他元素共享一行。宽高由内容决定，设置width/height无效。
| 元素 | 说明 |
|---|---|
<span> | 行内容器 |
<a> | 超链接 |
<strong> | 加粗强调 |
<em> | 斜体强调 |
<img> | 图片 |
<br> | 换行 |
display属性转换
用CSS的display属性可以在块级和行内之间切换：
div{display:inline} /* 块级变行内 */
span{display:block} /* 行内变块级 */
li{display:inline-block} /* 行内但可设宽高 */
.hidden{display:none} /* 隐藏且不占空间 */???? 练习任务
创建3个div和3个span，设置不同display值观察变化。