行内元素块级元素、行内块元素分别有哪些
在 HTML 中，元素可以分为行内元素（Inline Elements）和块级元素（Block-level Elements），它们的行为和特性有所不同。以下是常见的行内元素和块级元素：
1. 行内元素（Inline Elements）
-
特点：
- 默认不独占一行，与其他行内元素在同一行显示。
- 宽度和高度由内容决定，无法直接设置宽度和高度。
- 只能包含文本或其他行内元素。
- 不支持
margin-top和margin-bottom，但支持margin-left和margin-right。
-
常见行内元素：
<span>：用于包裹文本或行内内容。<a>：超链接。<strong>：加粗文本（语义化表示重要内容）。<em>：斜体文本（语义化表示强调内容）。<img>：图片。<input>：输入框。<button>：按钮。<label>：表单标签。<br>：换行符。<i>：斜体文本（无语义）。<b>：加粗文本（无语义）。<small>：小号文本。<sup>：上标文本。<sub>：下标文本。<code>：代码片段。<time>：时间或日期。
2. 块级元素（Block-level Elements）
-
特点：
- 默认独占一行，前后会换行。
- 可以设置宽度、高度、内边距和外边距。
- 可以包含其他块级元素和行内元素。
-
常见块级元素：
<div>：通用容器。<p>：段落。<h1>到<h6>：标题。<ul>：无序列表。<ol>：有序列表。<li>：列表项。<table>：表格。<form>：表单。<header>：页眉。<footer>：页脚。<section>：文档中的节。<article>：独立内容块。<aside>：侧边栏或附加内容。<nav>：导航栏。<main>：文档主要内容。<figure>：插图或图表。<figcaption>：图表的标题。<blockquote>：块引用。<hr>：水平分割线。
3. 行内块元素（Inline-block Elements）
-
特点：
- 结合了行内元素和块级元素的特性。
- 不独占一行，与其他行内元素在同一行显示。
- 可以设置宽度、高度、内边距和外边距。
-
常见行内块元素：
<img>：图片。<input>：输入框。<button>：按钮。<textarea>：多行文本输入框。<select>：下拉选择框。<progress>：进度条。<canvas>：画布。
4. 元素类型转换
通过 CSS 的 display 属性，可以改变元素的默认行为：
- 行内元素转块级元素：
span { display: block; } - 块级元素转行内元素：
div { display: inline; } - 行内块元素：
div { display: inline-block; }
总结
| 类型 | 特点 | 常见元素 |
|---|---|---|
| 行内元素 | 不独占一行，宽度和高度由内容决定，无法直接设置宽高 | <span>、<a>、<strong>、<em>、<img>、<input>、<button> 等 |
| 块级元素 | 独占一行，可以设置宽高、内外边距，可包含其他块级元素和行内元素 | <div>、<p>、<h1>-<h6>、<ul>、<ol>、<li>、<table> 等 |
| 行内块元素 | 不独占一行，可以设置宽高、内外边距 | <img>、<input>、<button>、<textarea>、<select> 等 |
理解这些元素的特性，可以帮助你更好地控制页面布局和样式！
更多vue相关插件及后台管理模板可访问vue admin reference，代码详情请访问github
