【学习】【HTML】块级元素，行内元素，行内块级元素
块级元素
块级元素是 HTML 中一类重要的元素，它们在页面布局中占据整行空间，通常用于创建页面的主要结构组件。
常见的块级元素有哪些？
<div>: 通用的容器元素，常用于创建布局块。<p>：段落元素，用于包含文本段落。<h1>至<h6>：标题元素，用于表示不同级别的标题。<ul>、<ol>、<li>：列表元素，分别用于无序列表、有序列表和列表项。<table>：表格元素，用于创建数据表格。<form>：表单元素，用于创建用户输入表单。<header>：页眉元素，用于定义文档或节的头部(HTML5 新增)。<footer>：页脚元素，用于定义文档或节的底部(HTML5 新增)。<nav>:导航元素，用于定义导航链接的集合(HTML5 新增)。<article>：文章元素，用于定义独立的、自包含的内容(HTML5 新增)。<section>：节元素，用于定义文档中的节或区域(HTML5 新增)。<main>：主内容元素，用于定义文档或应用程序的主要内容(HTML5 新增)。<aside>：侧边栏元素，用于定义与主要内容相关的辅助信息(HTML5 新增)。<figure>和<figcaption>：用于包含图像、图表、视频等内容及其标题或说明(HTML5 新增)。
块级元素的特点？
- 独占一行，并且其后的内容也会从新的一行开始。
- 如果没有显式设置宽度，块级元素的默认宽度是其父级元素的可填充宽度(标准盒模型/怪异盒模型/边框盒模型)。
- 可以设置宽度、高度、内外边距等样式属性。
- 许多块级元素具有明确的语义含义，有助于提高文档的可读性和可维护性。例如，
<header>用于定义页面头部，<footer>用于定义页面底部，<article>用于定义独立的文章内容。
标准盒模型
width 不包括 padding 和 border，总宽度是 width + padding + border。
边框盒模型
width 包括 padding 和 border，总宽度是 width，在标准模式下通过 box-sizing: border-box; 启用。
怪异盒模型
width 包括 padding 和 border，总宽度是 width，通常在怪异模式下使用。
触发怪异模式
浏览器会根据文档类型声明（Doctype）来决定是否进入怪异模式。以下是一些常见的 Doctype 声明及其效果：
- 标准模式：使用现代的 Doctype 声明，如
<!DOCTYPE html>或<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">，浏览器会进入标准模式。 - 怪异模式：使用旧的或不完整的 Doctype 声明，如
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">或完全省略 Doctype 声明，浏览器会进入怪异模式。
块级元素的嵌套规则？
块级元素可以包含其他块级元素、行内块级元素，也可以包含行内元素。
<p> 可以嵌套<div>吗？
- 规范要求
<p>元素用于定义段落，它应该只包含文本和其他行内元素，如<span>,<a>,<strong>,<em>等。- 块级元素（如
<div>,<h1>至<h6>,<ul>,<ol>,<li>,<table>,<form>,<header>,<footer>,<nav>,<article>,<section>等）不应该嵌套在<p>元素中。
- 原因
- 语义清晰：
<p>元素的目的是定义一段文本，嵌套块级元素会破坏这一语义，使文档结构变得混乱。 - 浏览器解析：大多数现代浏览器会自动修正不规范的嵌套，但这可能导致意外的布局问题和不可预测的行为。
- 正确做法
- 使用合适的块级元素：如果需要在段落中插入块级元素，可以考虑使用其他块级元素来替代
<p>，或者将块级元素放在段落之外。
行内块级元素
行内块级元素在布局中表现为行内元素，但可以设置宽度、高度、边距和内边距，类似于块级元素。
常见的行内块级元素有哪些？
<img>：图像元素。<input>：输入元素。<button>：按钮元素。<textarea>：文本区域元素。<select>：选择框元素。
行内块级元素的特点？
- 行内块级元素不会独占一行，可以与其他行内元素和文本内容在同一行内显示。
- 行内块级元素可以设置宽度和高度，可以使用百分比或固定值。
- 行内块级元素可以设置所有方向的边距（margin）和内边距（padding）。
css:vertical-align
CSS vertical-align 属性用来指定行内（inline）、行内区块（inline-block）、表格单元格（table-cell）盒子的垂直对齐方式。
行内块级元素的嵌套规则？
- 行内块级元素可以嵌套其他行内块级元素。
- 行内块级元素可以包含行内元素，文本内容。
- 行内块级元素不应该包含块级元素。
行内元素
行内元素不会独占一行，而是与其他内容在同一行内显示。它们通常用于对文本进行标记和修饰，如链接、强调、图片等。
常见的行内元素有哪些？
<a>：超链接。<span>：通用的行内容器，用于对文本进行标记和修饰。<strong>：表示重要文本，通常以粗体显示。<em>：表示强调文本，通常以斜体显示。<img>：图像。<code>：表示计算机代码。<b>：表示粗体文本。<i>：表示斜体文本。<sub>：表示下标文本。<sup>：表示上标文本。<u>：表示下划线文本。<s>：表示删除线文本。<var>：表示变量。<abbr>：表示缩写。<mark>：表示高亮文本。<small>：表示小号文本。<time>：表示日期和时间。
行内元素的特点？
- 行内元素不会独占一行，而是与其他行内元素,行内块级元素和文本内容在同一行内显示。
- 行内元素不能设置宽度和高度。如果尝试设置宽度和高度，这些属性会被忽略。
- 行内元素可以设置左右边距（margin-left 和 margin-right）和内边距（padding-left 和 padding-right），但不能设置上下边距（margin-top 和 margin-bottom）和内边距（padding-top 和 padding-bottom）。
- 行内元素不会打断文本流，因此不会影响周围其他内容的布局。
文本流
文本流（Text Flow）是指文本在页面上的自然排列方式。在 HTML 中，文本流通常是从左到右、从上到下的顺序排列。行内元素不会打断这种自然排列方式，而是与其他文本内容在同一行内显示。这与块级元素的行为形成对比，块级元素会从新的一行开始，并且其后的内容也会从新的一行开始。
行内元素的嵌套规则？
- 行内元素可以包含其他行内元素，行内块级元素，文本内容。
- 行内元素不应该包含块级元素。
<a> 可以包含块级元素吗？
- 规范要求
HTML5：在 HTML5 中，<a>元素可以包含块级元素。这是为了提高灵活性和语义化，允许创建更复杂的链接结构。
HTML4 和 XHTML：在 HTML4 和 XHTML 中，<a>元素只能包含行内元素，不能包含块级元素。 - 注意事项
语义清晰：虽然<a>元素可以包含块级元素，但应确保这样做不会破坏文档的语义和可读性。
用户体验：包含块级元素的<a>元素可能会导致较大的点击区域，这可能会影响用户体验。确保链接的目标内容是明确的，避免用户误点击。
display
display 属性是 CSS 中一个非常重要的属性，用于控制元素的显示方式。所有 HTML 元素都可以使用 display 属性来控制其显示方式。
display: inline;
行内元素，不独占一行，不能设置宽度和高度，适用于对文本进行标记和修饰。
display: inline-block
行内块级元素，可以与其他行内元素在同一行内显示，可以设置宽度、高度、边距和内边距，适用于创建复杂的布局。
display: block
块级元素，独占一行，可以设置宽度、高度、边距和内边距，适用于定义段落、标题、列表等结构化内容。
原文地址：https://blog.csdn.net/m0_61097007/article/details/143690765
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！