css除了块元素，还有什么元素？

在 CSS 中，元素主要分为三大类，每种类型在页面布局和表现上有不同的特性：

---

1. 块级元素（Block Elements）

• 特点：
  • 独占一行（前后自动换行）
  • 可设置宽高（width/height）
  • 默认宽度撑满父容器（width: 100%）
• 常见标签：

  <div>, <p>, <h1>-<h6>, <ul>, <ol>, <li>, <section>, <article>
  

---

2. 行内元素（Inline Elements）

• 特点：
  • 不换行（与其他行内元素共处一行）
  • 宽高由内容决定（设置 width/height 无效）
  • 只能设置水平方向的 padding/margin（垂直方向不影响布局）
• 常见标签：

  <span>, <a>, <strong>, <em>, <img>, <input>, <label>
  

---

3. 行内块元素（Inline-Block Elements）

• 特点：
  • 不换行（类似行内元素）
  • 可设置宽高（类似块级元素）
  • 默认有间隙（可通过 font-size: 0 消除）
• 常见标签：

  <button>, <select>, <textarea>, <img>（默认行为）
  

• 手动转换：

  span {
    display: inline-block; /* 将行内元素转为行内块 */
    width: 100px;         /* 此时宽高生效 */
  }
  

---

其他特殊类型

4. 表格元素（Table Elements）

display: table;       /* 类似 <table> */
display: table-row;   /* 类似 <tr> */
display: table-cell;  /* 类似 <td> */

5. 弹性盒子（Flex Items）

display: flex;        /* 容器 */
display: inline-flex; /* 行内弹性容器 */

6. 网格元素（Grid Items）

display: grid;        /* 网格容器 */
display: inline-grid; /* 行内网格容器 */

7. 替换元素（Replaced Elements）

• 内容由外部资源决定的元素（尺寸默认由内容定义）：

  <img>, <video>, <iframe>, <embed>
  

---

显示类型转换（关键属性）

通过 display 属性可互相转换：

div {
  display: inline;     /* 块级 → 行内 */
}
span {
  display: block;      /* 行内 → 块级 */
}
a {
  display: inline-block; /* 行内 → 行内块 */
}

---

总结对比表

类型	是否换行	可设宽高	垂直边距生效	典型标签
块级	✅ 换行	✅	✅	<div>, <p>, <h1>
行内	❌	❌	❌	<span>, <a>
行内块	❌	✅	✅	<img>, <button>
Flex/Grid	依赖布局	✅	✅	需设置 display

理解这些元素类型是掌握 CSS 布局的基础，通过 display 属性可以灵活控制它们的表现。