播面

在 HTML 和 CSS 中，元素默认的显示模式（display 属性）主要分为三类。以下是它们的常见标签及特点总结：

1. 块级元素 (Block-level Elements)

特点：

• 独占一行：每个块级元素都会从新的一行开始，其后的元素也会另起一行。
• 宽高可控：可以设置 width、height、margin 和 padding。
• 默认宽度：如果不设置宽度，默认是父容器宽度的 100%。
• 容器特性：可以包含其他块级元素或行内元素。

常见标签：

• 布局/容器类： <div> (最常用), <form>, <table>, <hr> (水平线)
• 文本类： <p> (段落), <h1> ~ <h6> (标题), <blockquote> (引用), <pre> (预格式化文本)
• 列表类： <ul> (无序列表), <ol> (有序列表), <li> (列表项), <dl>, <dt>, <dd>
• HTML5 语义化标签： <header>, <footer>, <nav>, <section>, <article>, <aside>

---

2. 行内元素 (Inline Elements)

特点：

• 不独占一行：与其他行内元素并排显示，直到一行排不下才会换行。
• 宽高不可控：设置 width 和 height 无效。
• 边距限制：
  • 水平方向的 margin 和 padding 有效。
  • 垂直方向的 margin 和 padding 不会推开其他元素（虽然样式上可能看到背景色撑开，但不影响布局流）。
• 内容限制：通常只能包含文本或其他行内元素，不能包含块级元素。

常见标签：

• 文本修饰类： <span> (最常用), <a> (链接), <strong> / <b> (加粗), <em> / <i> (斜体), <sub> / <sup> (上下标)
• 其他： <label> (表单标签), <br> (换行), <code> (代码片段)

---

3. 行内块元素 (Inline-block Elements)

特点：

• 结合体：同时具备块级和行内元素的特点。
• 不独占一行：像行内元素一样，可以与其他元素并排显示。
• 宽高可控：像块级元素一样，可以设置 width、height、margin 和 padding。
• 空白间隙：代码中的换行符会被解析为空格，导致并排显示时元素之间会有微小的间隙（这是行内块的一个著名“坑”）。

常见标签：

• 图片/媒体： <img>
• 表单控件： <input>, <button>, <textarea>, <select>

---

总结对比表

注意：所有元素的显示模式都可以通过 CSS 的 display 属性进行修改。例如，可以通过设置 display: block 让 <a> 标签变成块级元素，或者设置 display: inline-block 让 <div> 并排显示。