CSS 嵌套元素的隐藏规则

devtools/2024/11/18 15:27:16/

简单介绍一下,在 HTML 和 CSS 中,元素大体分为 块级元素、内联元素(行内元素)、块级内联元素(行内块元素)。它们有着不同的嵌套规则和特殊之处。

1. 行内元素

行内元素特点:不独占一行、不可设置宽高、内容决定元素所占位置、不会打断上下文流畅。

包括<span>、<a>、<img>、<strong>、<em>等。

嵌套规则:只能嵌套行级元素,即行级元素内部只能包含其他行级元素,不能包含块级元素。

举个 🌰

正常的渲染:

非正常的渲染:

按道理来说,浏览器应该将 div 元素从 span 元素中移除,但实际没有。

虽然将 div 放在 span 中违反了 HTML 的规范,,但现代浏览器的错误处理机制,不会强制移除或改变这种结构,而是尽力按照嵌套结构正常渲染页面。这是因为:

1、浏览器宽容度高:为了尽可能显示开发者意图,浏览器会尽量渲染不符合标准的 HTML。

2、没有特定语义冲突,只是嵌套不符合规范。

2. 块级元素

块级元素特点:独占一行、可以设置宽高。

包括:<div>、<p>、<h1> 至 <h6>、<ul>、<ol>、<li>等。

嵌套规则:可以嵌套任何元素。块级元素内部既可以包含其他块级元素,也可以包含行级元素。

举个 🌰

3. 特殊规则

3.1 p 标签内不能嵌套 div 元素

当我们在 p 标签内嵌套一个 div 元素时,浏览器会自动将 div 元素移出 p 标签,并将 p 元素拆分为两个独立的段落。

举个 🌰

<p>这是段落的开始部分。<div>这是一个块级元素。</div>这是段落的剩余部分。
</p> 

渲染结果:

3.2 a 标签不能嵌套 a 标签

在 HTML5 规范中,<a> 标签不允许嵌套另一个 <a> 标签。

举个 🌰

<body><a href="#">外层 a 标签的内容<a href="#"> 内层 a 标签的内容</a></a>
</body>

浏览器解析:a 标签内部不允许嵌套另一个 a 标签。这是因为 a 标签定义的是一个超链接区域,嵌套的 a 标签会导致 HTML 语法和功能上的混乱。浏览器遇到这种情况,会将内部的 a 标签自动移到外部。

3.3 table 标签内的结构

table 标签只能包含特定的子元素,如 thead、tbody、tr、td 等。如果不合法的元素直接在 table 中,浏览器会自动将其移出 table,指定元素保留。

举个 🌰

<table><tr>第一行</tr><div>不合法的元素</div><tr>第二行</tr>
</table>

渲染如下:

3.4 head 标签内的非元数据元素

head 标签通过包含页面的元数据(如 meta、title 等)。如果在 head 内插入非元数据元素(如 div、p 等),浏览器会将其移动 body 中,保证文档结构的正确性。

举个 🌰

<head><title>页面标题</title><div>不合法的内容</div>
</head>

渲染如下:


http://www.ppmy.cn/devtools/104838.html

相关文章

数学基础 -- 线性代数之向量空间

向量空间与基变换 1. 向量空间的定义 向量空间&#xff08;Vector Space&#xff09;是指一组具有向量加法和数乘运算的元素的集合&#xff0c;并且这些运算满足以下公理&#xff1a; 加法封闭性&#xff1a;对于任意两个向量 u u u 和 v v v&#xff0c;它们的和 u v u…

无人机 PX4 飞控 | ROS应用层开发:指令(字符串)订阅功能

无人机 PX4 飞控 | ROS应用层开发&#xff1a;指令&#xff08;字符串&#xff09;订阅功能 指令&#xff08;字符串&#xff09;订阅功能代码测试 指令&#xff08;字符串&#xff09;订阅功能 为了通过键盘触发mavros 的不同功能&#xff0c;需要实现一个订阅字符串的功能 该…

【日常记录-Linux】unzip指令

Author&#xff1a;赵志乾 Date&#xff1a;2024-08-28 Declaration&#xff1a;All Right Reserved&#xff01;&#xff01;&#xff01; 1. 简介 unzip是一个在类Unix系统(如Linux、macOS)上广泛使用的命令行工具&#xff0c;用于解压缩.zip格式的文件。.zip是一种广泛支持…

【Go高性能】测试(单元测试、基准测试)

Go测试 一、分类1. 单元测试2. 基准测试 二、基准测试1. 介绍2. 基准测试基本原则3. 使用testing包构建基准测试3.1 执行基准测试3.2 基准测试工作原理3.3 改进基准测试的准确性3.3.1 -benchtime3.3.2 -count3.3.3 -cpu 4. 使用benchstat工具比较基准测试(可跳过&#xff09;4.…

C#上位机使用Microsoft.Office.Interop.Excel和EPPlus库对Excel或WPS表格进行写操作

C#上位机使用Microsoft.Office.Interop.Excel和EPPlus库对Excel或WPS表格进行写操作 一、使用Microsoft.Office.Interop.Excel库 1、通过NuGet包管理器添加引用 按照下图中红框所示进行操作。 需要安装Microsoft.Office.Interop.Excel包 添加Microsoft Office 16.0 Object …

新年伊始,暗网掀起泄露数据发布狂潮

新的一年已经到来&#xff0c;网络犯罪分子的脚步仍然没有停歇。为了庆祝圣诞节&#xff0c;犯罪分子在暗网上发布了大量窃取的数据。这些泄露的数据都被打上了 Free Leaksmas 的标签&#xff0c;犯罪分子将数据作为圣诞礼物进行互相共享。对受害者来说&#xff0c;就没有那么开…

焦虑相关症状与错误相关大脑活动的机器学习研究

摘要 焦虑症状可能会影响大脑对错误的加工方式。然而&#xff0c;许多研究报告的结果相互矛盾且不可再现&#xff0c;因此大脑对错误的反应(即错误相关负波[ERN]&#xff1b;错误相关正波[Pe])与特定焦虑症状的对应关系仍不清楚。本研究收集了171名被试的16个焦虑维度自述评分…

Redis:浅谈Redis持久化机制-RDB和AOF

Redis提供了两种持久化方式&#xff1a; 1、RDB持久化&#xff1a;在指定的时间间隔对数据进行快照存储。 2、AOF持久化&#xff1a;记录每次对服务器写的操作&#xff0c;当服务器重启的时候会重新执行这些命令来恢复原始的数据。AOF命令以redis协议追加保存每次写的操作到文件…