CSS 块元素、行内元素、行内块元素

主要区别

• 是否独占一行
• 能否设置宽高

块元素 Block Elements

独占一行，支持宽高设置，可容纳其他块级元素，盒子模型完整生效。

• 结构类
  • <div>
  • <p>
  • <ul>
  • <ol>
  • <li>
  • <header>
  • <footer>
  • <nav>
  • <section>
• 功能类
  • <table>
  • <form>
  • <blockquote>
  • <hr>

行内元素 Inline Elements

不独占一行，不支持设置宽高，仅能容纳文本和其他行内元素（不能嵌套块元素），盒子模型部分生效（垂直方向间距不会把元素撑开）。

• 文本类
  • <span>
  • <a>
  • <strong>：加粗
  • <em>：斜体
  • <b>：加粗
  • <code>：代码片段
  • <sup>：上标
  • <sub>：下标
• 功能类
  • <img>：特殊，属于行内替换元素
  • <input>
  • <button>
  • <label>
  • <br>

行内块元素 Inline-Block Elements

不独占一行，支持设置宽高，盒子模型完全生效。

• <select>
• <textarea>
• display: inline-block的元素

行内替换元素 Inline Replaced Elements

替换元素：元素的内容不是由HTML直接写的文本，而是外部资源（图片、视频、表单控件）填充的。