当前位置： 首页 > news >正文

Quirks(怪癖）模式是什么？它和 Standards（标准）模式有什么区别?

news 2026/1/3 2:54:30

目录

前言:

用法:

代码:

Quirks模式示例:

Standards模式示例:

理解:

Quirks模式：

Standards模式：

高质量讨论:

前言:

"Quirks模式"和"Standards模式"是与HTML文档渲染模式相关的两种模式。它们影响着浏览器如何解释和渲染HTML和CSS。理解它们之间的区别对于前端开发者和网页设计师来说是至关重要的。本文将深入讨论Quirks模式和Standards模式的区别，以及它们的用途和影响。

用法:

要理解Quirks模式和Standards模式，首先需要知道它们是如何触发的。这两种模式的触发方式是通过文档类型（DOCTYPE）声明来确定的。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head><title>示例文档</title></head><body><!-- 页面内容 --></body>
</html>

<!DOCTYPE> 声明指定了文档的类型和版本。不同类型的文档声明会触发不同的渲染模式。

代码:

Quirks模式示例:

如果没有指定文档类型或使用了旧的文档类型，浏览器将进入Quirks模式。这是一种兼容性模式，用于支持旧的HTML文档。

<!-- 没有指定文档类型，将触发Quirks模式 -->
<html><head><title>Quirks模式示例</title></head><body><!-- 页面内容 --></body>
</html>
Standards模式示例:

如果使用了现代的文档类型声明，浏览器将进入Standards模式。这是一种更严格的模式，用于支持HTML5和现代Web标准。

 

<!DOCTYPE html>
<html><head><title>Standards模式示例</title></head><body><!-- 页面内容 --></body>
</html>

 

 

理解:
 

Quirks模式：
 

Quirks模式是一种宽松的渲染模式，它是为了与旧版本的HTML文档兼容而设计的。在Quirks模式下，浏览器的行为可能会有一些怪异之处，与标准模式不同。以下是Quirks模式的一些特点：
 

  1.  
    怪癖盒模型： 在Quirks模式下，浏览器使用怪癖盒模型来计算元素的宽度和高度。这意味着边距和填充会影响元素的实际大小。
     
  2.  
    浮动和定位： 浮动和定位的行为在Quirks模式下与标准模式不同，可能导致页面布局问题。
     
  3.  
    垂直对齐： 垂直对齐可能不一致，可能需要额外的样式来修复。
     
  4.  
    默认字体： 浏览器可能使用不同的默认字体，导致文本呈现不同。
     
 

Standards模式：
 

Standards模式是一种更严格的渲染模式，它遵循HTML5和现代Web标准。在Standards模式下，浏览器按照标准规范解释和渲染HTML和CSS。以下是Standards模式的一些特点：
 

  1.  
    标准盒模型： 在Standards模式下，浏览器使用标准盒模型来计算元素的宽度和高度，边距和填充不会影响实际大小。
     
  2.  
    一致的浮动和定位： 浮动和定位的行为在Standards模式下更一致，更容易控制。
     
  3.  
    一致的垂直对齐： 垂直对齐行为更一致，不太可能出现不一致的问题。
     
  4.  
    一致的字体： 浏览器使用相同的默认字体，文本呈现更一致。
     
 

高质量讨论:
 

一篇高质量的文章应该深入讨论Quirks模式和Standards模式的区别，以及它们如何影响网页的渲染和布局。文章还应提供如何选择正确模式的实际建议，以及如何避免进入Quirks模式。此外，文章还应包括浏览器的兼容性和不同文档类型声明的示例。
 

讨论不同的HTML版本和文档类型声明对模式的影响也是一篇高质量文章的一部分。还可以讨论Quirks模式和Standards模式的历史和发展，以帮助读者更好地理解它们的来龙去脉。
 

最后，一篇高质量文章应该包括示例代码、图表和图像，以帮助读者更好地理解Quirks模式和Standards模式的区别。这将使文章更具吸引力和可理解性。
 















相关文章：
















Quirks(怪癖）模式是什么？它和 Standards（标准）模式有什么区别?




目录 前言: 
用法: 
代码: 
Quirks模式示例: 
Standards模式示例: 
理解: 
Quirks模式&#xff1a; 
Standards模式&#xff1a; 
高质量讨论: 前言: "Quirks模式"和"Standards模式"是与HTML文档渲染模式相关的两种模式。它们影响着浏览器如何解释和渲染HT…...






编程日记
2023/10/25 5:20:27



















自然语言处理---Transformer模型




Transformer概述 相比LSTM和GRU模型&#xff0c;Transformer模型有两个显著的优势&#xff1a; Transformer能够利用分布式GPU进行并行训练&#xff0c;提升模型训练效率。 在分析预测更长的文本时&#xff0c;捕捉间隔较长的语义关联效果更好。 Transformer模型的作用 基于seq…...






编程日记
2023/10/25 5:18:25



















动画系统的前世今生（一）




掐指一算&#xff0c;五年没更新过我的CSDN账号啦&#xff0c;方向也从人工智能变成了计算机图形学&#xff0c;当然也依旧会关注AI的发展&#xff0c;之前在知乎上写了一些文章[传送门]&#xff0c;后续也会逐渐同步到CSDN上&#xff5e; 这个系列将包含五篇文章&#xff0c;内…...






编程日记
2023/10/25 5:17:24



















11 结构型模式- 代理模式




结构性模式一共包括七种&#xff1a; 
代理模式、桥接模式、装饰者模式、适配器模式、门面(外观)模式、组合模式、和享元模式。  
1 代理模式介绍 软件开发中的代理&#xff1a; 代理模式中引入了一个新的代理对象,代理对象在客户端对象和目标对象之间起到了中介的作用,它去掉客…...






编程日记
2023/10/25 5:16:23



















Unity--用户界面




目录 
“使用工具栏”&#xff1a; 
“层次结构”窗口&#xff1a; 
层次结构窗口 
制作子GameObject 
“游戏”视图&#xff1a; 
“场景视图“&#xff1a; 
”项目窗口“&#xff1a; 
项目窗口工具栏&#xff1a; 
"Inspector" 窗口&#xff1a; 
Inspector 游戏…...






编程日记
2023/10/25 5:15:21



















BUUCTF 乌镇峰会种图 1




BUUCTF:https://buuoj.cn/challenges  
题目描述&#xff1a; 乌镇互联网大会召开了&#xff0c;各国巨头汇聚一堂&#xff0c;他们的照片里隐藏着什么信息呢&#xff1f;&#xff08;答案格式&#xff1a;flag&#xff5b;答案&#xff5d;&#xff0c;只需提交答案&#xff0…...






编程日记
2023/10/25 5:14:18



















Runner GoUI自动化测试发布




构建自动化测试体系是当下每个项目团队愿意去做的&#xff0c;自动化测试减少重复操作节省人力成本。 
RunnerGo UI自动化平台 
RunnerGo提供从API管理到API性能再到可视化的API自动化、UI自动化测试功能模块&#xff0c;覆盖了整个产品测试周期。 
RunnerGo UI自动化基于Selen…...






编程日记
2023/10/25 5:13:17



















【Gensim概念】03/3 NLP玩转 word2vec




第三部分 对象函数 八 word2vec对象函数 该对象本质上包含单词和嵌入之间的映射。训练后&#xff0c;可以直接使用它以各种方式查询这些嵌入。有关示例&#xff0c;请参阅模块级别文档字符串。 
类型 
KeyedVectors 
1&#xff09; add_lifecycle_event(event_name, log_level2…...






编程日记
2023/10/25 5:11:15



















【网络协议】聊聊网络路由相关算法




如何配置路由 
路由器是一台网络设备&#xff0c;多张网卡&#xff0c;当一个入口的网络包到达路由器时&#xff0c;会根据本地的信息库决定如何正确的转发流量&#xff0c;通常称为路由表 
路由表主要包含如下 核心思想是根据目的 IP 地址来配置路由 
目的网络&#xff1a;要去…...






编程日记
2023/10/25 5:09:14



















Python 深度学习入门之CNN




CNN 前言一、CNN简介1、简介2、结构 二、CNN简介1、输出层2、卷积层3、池化层4、全连接层5、输出层 前言 
1024快乐&#xff01;1024快乐&#xff01;今天开新坑&#xff0c;学点深度学习相关的&#xff0c;说下比较火的CNN。  
一、CNN简介 
1、简介 
CNN的全称是Convolutiona…...






编程日记
2023/10/25 5:08:12



















国产开发板上打造开源ThingsBoard工业网关--基于米尔芯驰MYD-JD9X开发板




本篇测评由面包板论坛的优秀测评者“JerryZhen”提供。 本文将介绍基于米尔电子MYD-JD9X开发板打造成开源的Thingsboard网关。 
Thingsboard网关是一个开源的软件网关&#xff0c;采用python作为开发语言&#xff0c;可以部署在任何支持 python 运行环境的主机上&#xff0c;灵…...






编程日记
2023/10/25 5:07:11



















英语——语法——从句——名词性从句——笔记




文章目录 名词性从句一、定义二、分类&#xff08;一&#xff09;宾语从句&#xff08;二&#xff09;主语从句&#xff08;三&#xff09;C同位语从句&#xff08;四&#xff09;D表语从句 名词性从句 
一、句子成分 简而言之&#xff0c;构成一个句子的成分&#xff08;或要素…...






编程日记
2023/10/25 5:05:09



















PROSTATEx-2 上前列腺癌的 3D CNN 分类




内容 本文介绍了在多参数 MRI 序列上使用 3D CNN 对前列腺癌进行显着性或不显着性分类。内容如下： 数据集描述Dicom 到 Nifti 文件格式的转换不同 MRI 序列的联合配准...






编程日记
2023/10/25 5:03:07



















npm ERR! node-sass@6.0.1 postinstall: `node scripts/build.js`




1.遇到的问题 
vue npm install提示以下错误  2.首次尝试方法  
尝试用下面的方式重新安装弄得-saas&#xff0c;结果不起作用 。 npm config set sass_binary_sitehttps://npm.taobao.org/mirrors/node-sass npm install node-sass 这时考虑降级node版本&#xff0c;node.js从…...






编程日记
2023/10/25 5:02:06



















3D学习论文参考-ACCURATE EYE PUPIL LOCALIZATION USING HETEROGENEOUS CNN MODELS




以下是该文档的关键内容&#xff1a; 该论文提出了一种使用异构卷积神经网络&#xff08;CNN&#xff09;模型的精确眼睛瞳孔定位算法。这种算法可以抵抗光照、图像分辨率和眼镜佩戴等干扰条件&#xff0c;同时具有高准确性。该算法由两部分组成&#xff1a;一是找到近似眼睛区…...






编程日记
2023/10/25 5:01:04



















迁移conda环境后，非root用户执行pip命令和jupyter命令报错/bad interpreter: Permission denied




移动conda环境&#xff0c;在移动的环境执行pip和jupyter 报错-bash: /data/home/用户名/anaconda3/envs/llm/bin/pip: /root/anaconda3/envs/llm/bin/python: bad interpreter: Permission denied 
报错信息 一、原因 
原因是当前的这个data/home/用户名/anaconda3/envs/环境名…...






编程日记
2023/10/25 4:59:01



















虚拟机使用linux常用问题(虚拟机操作系统:ubuntu 22.04LTS)




1.虚拟机连接外网 
ubuntu解决网络连接的解决方案 CentOS7联网问题解决 
明明连接好了但是没有网络的情况 2.虚拟机磁盘扩容 
相关博客 利用gparted工具时,直接将unallocated空间的前一个位置的磁盘resize,将unallocated的空间全部覆盖 
3.虚拟机与本机共享文件 
安装vmtools 设…...






编程日记
2023/10/25 4:57:59



















编译原理-词法分析器




文章目录 对于词法分析器的要求概念词法分析器的功能和输出形式 词法分析器的设计词法分析器的结构单词符号的识别&#xff1a;超前搜索状态转换图 正规表达式和有限自动机正规式和正规集确定有限自动机&#xff08;DFA&#xff09;非确定有限自动机&#xff08;NFA&#xff09…...






编程日记
2023/10/25 4:53:52



















Kafka与MySQL的组合使用




根据上面给出的student表&#xff0c;编写Python程序完成如下操作&#xff1a; 
&#xff08;1&#xff09;读取student表的数据内容&#xff0c;将其转为JSON格式&#xff0c;发送给Kafka&#xff1b; 
创建Student表的SQL语句如下&#xff1a; 
create table student(
sno ch…...






编程日记
2023/10/25 4:52:50



















2018年亚太杯APMCM数学建模大赛A题老年人平衡能力的实时训练模型求解全过程文档及程序




2018年亚太杯APMCM数学建模大赛 
A题 老年人平衡能力的实时训练模型 
原题再现 跌倒在老年人中很常见。跌倒可能会导致老年人出现许多并发症&#xff0c;因为他们的康复能力通常较差&#xff0c;因此副作用可能会使人衰弱&#xff0c;从而加速身体衰竭。此外&#xff0c;对跌倒…...






编程日记
2023/10/25 4:51:49





















中南大学无人机智能体的全面评估！BEDI：用于评估无人机上具身智能体的综合性基准测试




作者&#xff1a;Mingning Guo, Mengwei Wu, Jiarun He, Shaoxian Li, Haifeng Li, Chao Tao单位&#xff1a;中南大学地球科学与信息物理学院论文标题&#xff1a;BEDI: A Comprehensive Benchmark for Evaluating Embodied Agents on UAVs论文链接&#xff1a;https://arxiv.…...






编程新知
2025/12/28 19:42:37



















Vue3 + Element Plus + TypeScript中el-transfer穿梭框组件使用详解及示例




使用详解 
Element Plus 的 el-transfer 组件是一个强大的穿梭框组件&#xff0c;常用于在两个集合之间进行数据转移&#xff0c;如权限分配、数据选择等场景。下面我将详细介绍其用法并提供一个完整示例。 
核心特性与用法 
基本属性 v-model&#xff1a;绑定右侧列表的值&…...






编程新知
2025/12/25 22:29:43



















关于iview组件中使用 table , 绑定序号分页后序号从1开始的解决方案




问题描述&#xff1a;iview使用table 中type: "index",分页之后 &#xff0c;索引还是从1开始&#xff0c;试过绑定后台返回数据的id, 这种方法可行&#xff0c;就是后台返回数据的每个页面id都不完全是按照从1开始的升序&#xff0c;因此百度了下&#xff0c;找到了…...






编程新知
2025/12/19 16:13:46



















vue3 定时器-定义全局方法 vue+ts




1.创建ts文件 
路径&#xff1a;src/utils/timer.ts 
完整代码&#xff1a; import { onUnmounted } from vuetype TimerCallback  (...args: any[]) > voidexport function useGlobalTimer() {const timers: Map<number, NodeJS.Timeout>  new Map()// 创建定时器con…...






编程新知
2025/8/9 0:31:20



















AI编程--插件对比分析：CodeRider、GitHub Copilot及其他




AI编程插件对比分析&#xff1a;CodeRider、GitHub Copilot及其他 
随着人工智能技术的快速发展&#xff0c;AI编程插件已成为提升开发者生产力的重要工具。CodeRider和GitHub Copilot作为市场上的领先者&#xff0c;分别以其独特的特性和生态系统吸引了大量开发者。本文将从功…...






编程新知
2025/11/16 0:55:46



















第 86 场周赛：矩阵中的幻方、钥匙和房间、将数组拆分成斐波那契序列、猜猜这个单词




Q1、[中等] 矩阵中的幻方 
1、题目描述 
3 x 3 的幻方是一个填充有 从 1 到 9 的不同数字的 3 x 3 矩阵&#xff0c;其中每行&#xff0c;每列以及两条对角线上的各数之和都相等。 
给定一个由整数组成的row x col 的 grid&#xff0c;其中有多少个 3  3 的 “幻方” 子矩阵&am…...






编程新知
2026/1/1 13:23:25



















全面解析各类VPN技术：GRE、IPsec、L2TP、SSL与MPLS VPN对比




目录 引言  VPN技术概述  GRE VPN 3.1 GRE封装结构  3.2 GRE的应用场景   GRE over IPsec 4.1 GRE over IPsec封装结构  4.2 为什么使用GRE over IPsec&#xff1f;   IPsec VPN 5.1 IPsec传输模式&#xff08;Transport Mode&#xff09;  5.2 IPsec隧道模式&#xff08;Tunne…...






编程新知
2025/11/3 0:44:41



















Map相关知识




数据结构 
二叉树 
二叉树&#xff0c;顾名思义&#xff0c;每个节点最多有两个“叉”&#xff0c;也就是两个子节点&#xff0c;分别是左子 节点和右子节点。不过&#xff0c;二叉树并不要求每个节点都有两个子节点&#xff0c;有的节点只 有左子节点&#xff0c;有的节点只有…...






编程新知
2025/12/31 7:45:05



















【HarmonyOS 5 开发速记】如何获取用户信息（头像/昵称/手机号）




1.获取 authorizationCode&#xff1a; 
2.利用 authorizationCode 获取 accessToken&#xff1a;文档中心 
3.获取手机&#xff1a;文档中心 
4.获取昵称头像&#xff1a;文档中心 首先创建 request 
若要获取手机号&#xff0c;scope必填 phone&#xff0c;permissions 必填 …...






编程新知
2025/9/17 2:39:21



















Linux C语言网络编程详细入门教程：如何一步步实现TCP服务端与客户端通信




文章目录 Linux C语言网络编程详细入门教程&#xff1a;如何一步步实现TCP服务端与客户端通信前言一、网络通信基础概念二、服务端与客户端的完整流程图解三、每一步的详细讲解和代码示例1. 创建Socket&#xff08;服务端和客户端都要&#xff09;2. 绑定本地地址和端口&#x…...






编程新知
2025/10/31 21:54:15