行内元素，块级元素和行内块级元素

行内元素块级元素区别和使用方式

1. 行内元素 (Inline Elements)

• 显示方式: 在一行内显示，尽可能水平排列。
• 占据空间: 只占据内容所需的宽度，宽度由内容决定。
• 尺寸控制: width 和 height 属性无效。
• 内外边距: 水平方向内外边距有效，垂直方向内外边距可能有效但不影响布局。
• 包含性: 通常只能包含数据和其他行内元素，不能包含块级元素。
• 特点:
  • 不会强制换行。
  • 多个行内元素可以在同一行显示。
• 常见元素:
  • <span>
  • <a>
  • <em>
  • <strong>
  • <br>
  • <code>

2. 块级元素 (Block Elements)

• 显示方式: 独占一行，从新的一行开始。
• 占据空间: 占据父元素的所有可用宽度（除非显式设置了宽度）。
• 尺寸控制: 可以显式设置 width 和 height 属性。
• 内外边距: 所有方向的内外边距都有效，影响周围元素的布局。
• 包含性: 可以包含其他块级元素和行内元素。
• 特点:
  • 强制换行。
  • 每个元素占据一行。
• 常见元素:
  • <div>
  • <p>
  • <h1> 到 <h6>
  • <form>
  • <header>
  • <footer>
  • <section>
  • <article>
  • <aside>
  • <nav>
  • <ul>
  • <ol>
  • <li>
  • <address>
  • <hr>
  • <table>

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

• 显示方式: 在一行内显示，但可以像块级元素一样设置宽度和高度。
• 占据空间: 元素本身的内容决定其大小，但可以显式设置 width 和 height。
• 尺寸控制: 可以显式设置 width 和 height 属性。
• 内外边距: 所有方向的内外边距都有效，影响周围元素的布局。
• 包含性: 可以包含其他行内元素和块级元素。
• 特点:
  • 不会强制换行，可以在同一行显示。
  • 可以设置宽度和高度。
  • 内外边距都有效。
• 常见元素:
  • <input>
  • <textarea>
  • <select>
  • <button>
  • <img>
• 常见用法:
  • 通过设置 display: inline-block; 将元素转换为行内块级元素。
• 示例:
• • 自定义导航菜单的按钮
  • 在同一行显示多个具有固定尺寸的元素

4. 总结表格 (Block Elements)

特性	行内元素 (Inline)	块级元素 (Block)	行内块级元素 (Inline-Block)
显示方式	一行内	独占一行	一行内
占据空间	内容宽度	父元素宽度	内容宽度（可设置）
尺寸控制	width/height 无效	width/height 有效	width/height 有效
内外边距	水平有效，垂直部分有效	全部有效	全部有效
是否换行	否	是	否
包含性	行内元素/文本	行内/块级元素	行内/块级元素