【前端入门】行内元素和块级元素
概述
在网页构建的过程中，HTML扮演着至关重要的角色，为网页提供基本的结构框架。HTML元素根据其显示行为被划分为行内元素和块级元素两大类。
掌握这两种元素的性质、差异以及在何种情况下使用它们，对于进行有效的网页设计和开发极为关键。本篇文章旨在深入探讨行内元素与块级元素的定义、特性、常见实例，并指导如何在实际的前端开发实践中加以运用。
行内元素
定义
行内元素（Inline Elements）是HTML中的一种元素类型，它们的特点是在页面布局中不会开始新的一行，而是与周围的行内元素并排显示，如果空间不足，它们会换行继续显示。行内元素通常用于包裹文本或少量内容，它们的主要目的是在文本流中嵌入小段的内容，而不是改变文档的整体布局。
特点
- 宽度：行内元素的宽度通常由其内容决定，不能通过设置宽度来改变。
- 高度：行内元素的高度同样通常由其内容决定，不能通过设置高度来改变，但可以设置行高（line-height）。
- 边距和边框：行内元素的上下边距（margin）和边框（border）不会影响其他元素的布局，但左右边距和边框会影响。
- 内边距：行内元素可以设置内边距（padding），但垂直方向的内边距不会影响页面的布局。
有哪些？
按照使用频率，以下是一些常见的HTML行内元素，从高到低排序：
<a>: 创建超链接。<img>: 嵌入图像。<span>通用行内元素，用于样式化或脚本操作。<strong>: 表示重要文本。<em>: 表示强调文本。<input>: 表单输入元素，有多种类型，如文本框、单选按钮等。<label>: 定义表单控件的标签。<br>: 强制文本换行。<b>: 表示关键字或产品名称等重要文本。<i>: 表示文本中的斜体，用于技术术语、其他语言的词汇等。<code>: 表示代码片段。<cite>: 表示作品的标题。<q>: 表示短的行内引用。<small>: 表示小号文本，如旁注或法律文本。<time>: 表示日期或时间。<kbd>: 表示用户输入，如键盘输入。<dfn>: 表示术语的定义。<abbr>: 表示缩写或首字母缩略词。<var>: 表示变量或程序中的值。<samp>: 表示计算机程序的输出。<sub>: 表示下标文本。<sup>: 表示上标文本。
块级元素
定义
块级元素是指在文档中会独占一行，并且可以设置宽度、高度和内外边距的元素。
特点
- 占据整行空间：块级元素会占据其父元素的全部宽度，默认情况下从左到右延伸。
- 换行显示：块级元素前后会自动生成一个换行，即它在页面中前后不会与其他元素并列。
- 可设置宽高：可以设置块级元素的宽度和高度属性，以控制其大小。
- 内边距和外边距：块级元素可以接受内边距（padding）和外边距（margin）的设置，这些设置会影响元素周围的空间。
- 宽度自动填满父元素：如果没有设置宽度，块级元素会自动扩展以填满其父元素的宽度。
- 可以包含其他块级元素或行内元素：块级元素可以包含其他块级元素或行内元素（inline elements），但不能被行内元素所包含。
- 垂直排列：如果没有特别设置，块级元素会垂直排列，即一个块级元素会在另一个块级元素的下方。
有哪些？
按照使用频率列出一些常见的块级元素
<div>- 通用容器，用于组合其他HTML元素的容器，是最常用的块级元素之一。<h1> - <h6>- 标题元素，用于定义HTML文档中的标题，通常用于主标题，其使用频率高于更小的标题。<p>- 段落元素，用于定义文本的段落。<ul>- 无序列表，用于创建项目列表。<ol>- 有序列表，用于创建带有编号的项目列表。<li>- 列表项，用于<ul>或<ol>中，表示列表中的一个项目。<header>- 用于定义页面或区域的页眉。<footer>- 用于定义页面或区域的页脚。<section>- 用于定义文档中的一个区段，比如章节、页眉、页脚或文档中的其他部分。<article>- 用于独立的内容，如博客条目、新闻故事、论坛帖子等。<form>- 用于创建交互式表单，以收集用户输入。<nav>- 用于包含页面主导航链接的容器。<main>- 用于表示页面中的主要内容。<aside>- 用于包含与页面内容相关但可以独立于内容的边栏或插入内容。
行内块元素
定义
行内块级元素（inline-block elements）在HTML中是一种特殊的元素类型，它们的行为类似于行内元素（inline elements），可以与其他内容在同一行显示，同时它们也具有块级元素（block elements）的特性，比如可以设置宽度和高度。
特点
行内块元素（inline-block elements）的几个显著特点包括：
- 并排显示：行内块元素可以与其他行内内容（如文本或行内元素）并排在同一行，不会自动换行。
- 可设置宽高：与块级元素类似，行内块元素可以设置宽度和高度，而这是普通行内元素所不具备的特性。
- 垂直外边距和内边距：行内块元素可以设置垂直方向的外边距（margin）和内边距（padding），这些设置会影响周围的布局。
- 边框：行内块元素可以拥有边框，且边框会显示在元素周围，不会影响同一行内的其他内容。
- 不换行：即使设置了宽度，行内块元素也不会像块级元素那样自动换行，除非其父容器的宽度不足以容纳它们。
- 基线对齐：行内块元素默认沿着它们的基线与周围的文本或其他行内元素对齐。
- 空白间隙：在HTML代码中，行内块元素之间的空白字符（如空格、换行符）会被渲染成间隙，这是因为在HTML中，空白字符被视为正常的字符。
- 宽度自适应内容：如果没有明确设置宽度，行内块元素的宽度会根据其内容自适应。
- 高度自适应内容：如果没有明确设置高度，行内块元素的高度也会根据其内容自适应。
- 不影响块级元素布局：行内块元素不会像块级元素那样影响其他块级元素的布局，它们只会影响同一行内的元素。
有哪些？
<img>：图像元素
<input>：输入元素（如文本框、单选按钮、复选框等）
<button>：按钮元素
<select>：下拉列表元素
<textarea>：多行文本输入元素