元素

置换元素

指不用元素的内容展示，而是用文档内容之外的内容替换展示。比如img

非置换元素

html大部分标签都是非置换元素，指用文档内容进行展示，比如p，h1标签

行内元素、块级元素、行内块元素

display 决定布局行为，而不是标签本身
元素“是什么类型”，本质取决于 display

一、三类元素一句话定义

类型 一句话解释
块级元素（block） 独占一行，可以设置宽高
行内元素（inline） 不独占一行，宽高由内容决定
行内块元素（inline-block） 不独占一行，可以设置宽高

二、块级元素（Block）

1️⃣ 特点

  • 独占一行（前后自动换行）
  • 默认宽度撑满父元素
  • 可以设置 width / height
  • 可以设置 margin / padding（上下左右都生效）

2️⃣ 常见块级元素

1
2
3
4
5
div
p
h1 ~ h6
ul / ol / li
section / article / header / footer / main

3️⃣ 示例

1
2
3
4
5
6
<div class="box">块级元素</div>
.box {
  width: 200px;
  height: 100px;
  background: skyblue;
}

📌 效果：

  • 占一整行
  • 宽高完全可控

三、行内元素（Inline）

1️⃣ 特点（重点）

  • 不独占一行
  • 宽高由内容决定
  • ❌ 不能设置 width / height
  • 上下 margin / padding 不生效（左右可以）

2️⃣ 常见行内元素

1
2
3
4
5
6
7
span
a
strong
em
i
b
label

3️⃣ 示例

1
2
3
4
5
6
<span class="text">行内元素</span>
.text {
  width: 200px;   /* ❌ 无效 */
  height: 100px;  /* ❌ 无效 */
  margin-top: 20px; /* ❌ 无效 */
}

📌 行内元素更像是「文本的一部分」

四、行内块元素（Inline-block）

1️⃣ 为什么会有它？

因为：

  • 行内元素 ❌ 不能设置宽高
  • 块级元素 ❌ 会独占一行

👉 所以需要一个 不换行 + 可控尺寸 的类型

2️⃣ 特点

  • 不独占一行
  • ✅ 可以设置 width / height
  • margin / padding 上下左右都生效
  • 多个元素会在一行排列

3️⃣ 常见行内块元素

1
2
3
4
5
img
input
button
textarea
select

⚠️ 注意：

  • img / input 是 行内块 + 置换元素

4️⃣ 示例

1
2
3
4
5
6
7
8
9
10
11
<div class="container">
  <span class="item">1</span>
  <span class="item">2</span>
</div>
.item {
  display: inline-block;
  width: 100px;
  height: 100px;
  background: orange;
  margin: 10px;
}

五、三者核心对比表

特性 block inline inline-block
是否换行 ✅ ❌ ❌
设置宽高 ✅ ❌ ✅
margin 上下 ✅ ❌ ✅
margin 左右 ✅ ✅ ✅
默认宽度 父元素 100% 内容宽度 内容宽度