块元素、内联元素、行内块元素

一、介绍：

CSS元素划分成块元素、行内元素（内联元素）、行内块元素等多种常用类型。也就是说：在CSS中，元素根据其在页面上的布局方式被分为不同的显示类型。

背景：HTML负责定义网页的结构和内容，而CSS则负责控制这些内容的样式和布局。它们共同协作，构建出功能丰富、视觉吸引人的网页。

二、详细：

（1）块元素

简要：块元素是一个标准的盒子，可以对盒子的任一构成部分进行设置。默认情况下独占一行。

详细：块元素（block element）在HTML中占据其父元素（容器）的全部宽度，前后都会带有换行符，将在其前后都创建新的行。块元素在页面中以块的形式呈现，其特点是，每个块元素通常都会独自占据一行或多行，其宽度自动填满其父元素，高度为其子元素的高度和上下边距的总和，即可以对其设置宽度、高度、内外边距等属性。

常见的块元素有：

<div>、<p>、<h1>-<h6>、<ol>、<ul>、<li>、<dl>、<dt>、<dd>、<table>、<form>[ <header>：定义 section 或 page 的页眉 ]

[ <footer>：定义 section 或 page 的页脚 ]

[ <section>：定义文档中的节（section、区段），比如章节、页眉、页脚或文档中的其他部分。]

等等。

块元素在页面布局中扮演着重要的角色，用于构建页面的主要结构和内容区块。

（2）行内元素（内联元素）

简要：行内元素是一个非标准的盒子，设置宽度、高度、垂直内边距、垂直外边距无效，并且与相邻元素共享一行。

详细：在HTML规范中，内联元素也被称为行内元素（inline element）。它们的主要特点是与其他元素都在同一行上按从左至右的顺序显示，不单独占一行。同时，内联元素的宽度、高度以及顶部和底部的边距都不能设置，其宽度通常就是内容的宽度。内联元素通常用于容纳文本或其他内联元素，并常常被包含在块级元素中使用。

常见的内联元素主要包括：

[ <a>:超链接元素，用于创建链接到其他页面或资源的文本或图像 ]

[ <span>：用于对文本中的一部分进行样式设置或标识。]

[ <img>：图像元素，用于在网页上显示图像 ]

[ <br>、<strong>：加粗文本，其中<strong>表示重要性，而<b>只表示加粗样式。][ <em> 、<i>：强调文本，其中<em>通常表示为斜体，而<i>只表示斜体样式，不带有强调的语义。]

[ <label>：<label> 元素通常通过 for 属性与表单元素关联。for 属性的值应该与相应表单元素的 id 属性的值相匹配（这个在后面的HTML5表单应用再去讨论）。这样，当用户点击标签时，浏览器就知道应该将焦点移到哪个表单元素上。]

[ <input>、<select>、<textarea>：<input>、<select>和<textarea>元素则用于创建表单控件。]

[ <u>：<u> 标签在 HTML 中表示拼写错误或其他需要标注为非正式的文字，通常以下划线形式呈现文本。早期的 HTML 版本中用于表示拼写错误，但在 HTML5 中，其含义已经泛化，可以表示任何形式的拼写或语法上的标注，而不仅仅限于错误。]

等等。

（3）行内块元素：

简要：行内块元素是块元素和行内元素的结合体，可以对盒子的任一构成部分进行设置，并且与相邻元素共享一行。

详细：行内块元素（inline-block element）是内联元素的一种特殊类型。它们具有内联元素的特性，即与其他元素在同一行内显示，但同时又可以设置宽度、高度和对齐等属性，这使得它们在布局上更加灵活。行内块元素的默认宽度是其内容本身的宽度，但可以通过CSS进行设置。常见的行内块元素可以通过给内联元素添加：display: inline-block;样式来创建。

以下是一些常见的行内块元素：

<img>：图片元素。在默认情况下，图片元素就是行内块元素。它不会独占一行，并且可以设置宽度和高度。
<input>：输入框元素。这也是一个行内块元素，通常用于表单中收集用户输入。
<button>：按钮元素。用于创建可点击的按钮，也是行内块元素。
<textarea>：多行文本输入框。虽然它看起来像块级元素，但在CSS中默认是行内块元素。
<select>：可创建单选或多选菜单，即下拉列表元素。允许用户从预定义的选项中选择一个值，是行内块元素。（后面在HTML5表单应用会讨论）
<label>：标签元素。用于定义表单控件的描述，但通常配合display: inline-block;来使用以设置宽度等样式。

其中一部分标签介绍：

（1）这是<select>标签，其中<select>标签中的<option>标签用于定义列表中的可用选项。
   <select>

        <option>苹果</option>

        <option>香蕉</option>

        <option>樱桃</option>

    </select>
运行效果：