文档模式及盒子模型

最新推荐文章于 2022-02-22 20:12:44 发布

墨竹摇曳

最新推荐文章于 2022-02-22 20:12:44 发布

阅读量405

点赞数

分类专栏： html CSS 浏览器文章标签： html5 html css css3 前端

本文链接：https://blog.csdn.net/qq_34516556/article/details/107491022

版权

html 同时被 3 个专栏收录

8 篇文章 0 订阅

订阅专栏

CSS

4 篇文章 0 订阅

订阅专栏

浏览器

1 篇文章 0 订阅

订阅专栏

什么是DOCTYPE？

DOCTYPE是Docment Type的缩写，即文档模式。它用来指明文档（通常是指网页）所遵循的规范(如xhtml或html)及规范的版本（xhtml1.0或html4.0等）。

html文件中<DOCTYPE>标签位于文档最顶部，在<html>标签之前。

一个完整的DTD声明是由Public Identifier和System Identifier两部分组成的，其中system identifier就是指URI，例如：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Public Identifier：-//W3C//DTD HTML 4.01 Transitional//EN
system identifier：http://www.w3.org/TR/html4/loose.dtd

浏览器模式

“浏览器模式（IE11 索性就改名为“用户代理字符串”）用来设置 navigator.userAgent 和 navigator.appVersion 的值。

从 IE8 开始引入了文档兼容模式的概念，作为开发人员的我们可以在开发人员工具中通过“浏览器模式”和“文档模式”（IE11 开始改为“浏览器模式”改成更贴切的“用户代理字符串”）品味一番，它的出现极大地方便了苦逼的前端攻城狮们适配各版本的 IE，但 jser 们也不能完全信任它，因为它只是提供尽可能的文档模式模拟而已。

它唯一需要注意的是，在不同的 IE 版本中，它与文档模式的关系可不相同。

IE89 中，倘若浏览器模式被设置为 Internet Explorer7，那么文档模式的只能设置为 7,6,5；

IE11 中，用户代理字符串设置和文档模式可谓是没有半毛钱关系。

文档模式分类

在这里插入图片描述

现代浏览器普遍有三种模式: 标准模式(standard mode)、近似标准模式(almost standard mode) 及怪异模式(quirks mode).

怪异模式是为了兼容老页面而设计的：早在浏览器大战时期，IE和Netscape各自遵循自己的一套规范，互不兼容，而后随着互联网的迅速发展，W3C制定了html和css规范，之后的浏览器的实现都遵循这套规范，但因为此时互联网上已经存在很多针对旧版IE和Netscape设计的网页，如果依照W3C标准来解析，将会使这些页面错乱，因此浏览器开发商推出了两种模式：quirks mode 和 stardard mode. 其中quirks mode按照Netspace4和IE5的实现解析页面，stardard mode按照W3C标准解析页面。
IE6789 的是 IE5.5 的文档模式，IE10+和 Chrome 等浏览器是 W3C 规范的怪异模式。
IE6 默认使用怪异模式（Quirks），仅当以<!DOCTYPE>作为文档第一行声明文档类型时，才采用 IE6 的标准模式，即使 IE 无法识别所声明的文档类型。（IE7 也是这样）
近似标准模式是为了解决table中内联图片而设计的：早期的网页多是以table布局，单元格的高度会根据内容自动伸缩，所以当一个单元格中只有图片时，即使这个图片的高度是1px，浏览器都可以很好地呈现。但遵循了w3c标准的现代浏览器并不会这么去解析，w3c标准将img定义为内联元素，而内联元素在盒模型中是以基线对齐的。
为了解决这个问题，浏览器开发商提供了“近似标准模式”，这种模式与标准模式一致，除了在处理下面这种情况时：
如果一个块级元素除了空白文本（空格，tab等字符）外再无其它内容，则它的高度按0处理；如果有子元素，则它的高度不能比子元素大，无论它的font-size多大。
IE6、7 的标准模式实际上就是准标准模式，而 IE8+才有实质上的标准模式。
标准模式：遵循标准。

如何触发各种模式

在这里插入图片描述

近似标准模式
HTML 4.01 Transitional or Frameset DOCTYPE(带URL)或 XHTML 1.0 Transitional or Frameset DOCTYPE(带或不带URL) 都会触发近似标准模式。

The public identifier "-//W3C//DTD XHTML 1.0 Transitional//EN"
The public identifier "-//W3C//DTD XHTML 1.0 Frameset//EN"
The public identifier "-//W3C//DTD HTML 4.01 Transitional//EN", with a system identifier
The public identifier "-//W3C//DTD HTML 4.01 Frameset//EN", with a system identifier
The IBM system DOCTYPE "http://www.ibm.com/data/dtd/v11/ibmxhtml1-transitional.dtd"

标准模式

//包括IE6在内的所有浏览器都会以标准模式去呈现。这也是mozilla推荐的做法
<!DOCTYPE html>
//完整的HTML4.01 Strict 和 XHTML1.0 Strict(带或不带URI) 也会触发标准模式
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

如果你的XHTML文档以application/xhtml+xml 作为MIME类型，则你无需再声明DOCTYPE，浏览器始终会以标准模式去解析这类文档。不过一个例外就是IE8及以下版本的IE会将此类文档当成一个下载链接，并弹出文件下载弹窗。IE9开始支持这种类型的文档。但如果你的XHTML文档以text/html 作为MIME类型，则你需要声明DOCTYPE以触发标准模式

怪异模式

不写Doctype或错误的Doctype
Doctype之前有注释或xml声明（在IE9-会触发）
HTML 4.01 Transitional or Frameset DOCTYPE(不带URL)

开发者常用的方式

开发者工具中的“文档模式”；
通过在 head 标签内加入如的元数据标签（该例子将文档模式设置为 IE7 标准模式）；
通过<!DOCTYPE>的增删，在标准模式和怪异模式（Quirks）间切换；
通过 Web 服务器配置(让 http response header 带上 X-UA-Compatible: IE=edge)
用户常用的方式
点击地址栏的兼容性视图切换按钮（仅当 HTTP、HTTPS 协议时才出现该按钮）；
若网页是在 Intranet 区域中加载，配置使用兼容性视图显示 Intranet 区域中的网页；
配置浏览器使用兼容视图浏览所有网页；
将网站加入到兼容性视图名单中；
内网管理员将该网站加入到兼容性视图浏览名单中；
微软的方式
IE 会定期向微软官网拉数据，假如某网站被列入微软的兼容性视图浏览名单中，那么就会 IE 就会以兼容性视图模式来处理该网站。

X-UA-Compatible

所有 IE 浏览器在默认情况下（<meta http-equiv="X-UA-Compatible">与<!DOCTYPE>均没有），是采用怪异模式（Quirks）；当有<!DOCTYPE>时，均采用浏览器版本对应的标准模式（如 IE8 就采用 IE8 标准模式，IE11 就采用 IE11 标准模式）。

现在要注意的是，当出现<meta http-equiv="X-UA-Compatible">时，文档模式将会如何呢？我们首先了解一下 IE11 下它的 content 属性值范围吧，具体范围如下：

  IE=5、IE=7、IE=EmulateIE7、IE=8、IE=EmulateIE8、IE=9、IE=10、 IE=11、 IE=Edge

1. IE=5：表示采用怪异模式；

2. IE=7 等纯数字的值：表示采用对应 IE 版本的标准模式，即使不是以<!DOCTYPE>作为文档第一行，文档模式依旧使用标准模式；

3. IE=EmulateIE7 等含 EmulateIE 字符串的值：表示采用模拟对应 IE 版本的模式，就是以<!DOCTYPE>作为文档第一行则采用标准模式，否则采用怪异模式。

4. IE=Edge：表示采用浏览器自身版本的文档模式，如 IE11，以<!DOCTYPE html>作为文档第一行则采用 IE11 标准模式，否则采用怪异模式。

注意：

由于 document compatibility mode 仅在 IE8/9/10 生效，因此在 IE11 时设置<meta http-equiv="X-UA-Compatible">是无效的，只有在开发工具中设置才有效果。

若要在 IE11 下采用旧版本的文档模式，则要采用 Enterprise Mode(https://blogs.msdn.microsoft.com/ie/2014/04/02/stay-up-to-date-with-enterprise-mode-for-internet-explorer-11/)

10 及以上的文档模式，若文档第一行不是有效的<!DOCTYPE>，则 document.compatMode 返回 BackCompat，但 document.documentMode 却返回正确的文档模式；
9 及以下的文档模式，只要文档第一行出现<!DOCTYPE>，不管是否有效，document.compatMode 均返回 CSS1Compat。当文档第一行没有<!DOCTYPE>且没有指定标准模式时，document.compatMode 才返回 BackCompat，且 document.documentMode 必定返回 5。

由于<meta http-equiv="X-UA-Compatible" content="IE=edge">不一定很生效，
因为当端口不是 80 时，IE 默认设置是将其视为内网应用(intranet site)，
并采用兼容模式来显示(display intranet site in compatibility view)。
因此最好采用 HTTP Response Header 的方式。

标准模式和怪异模式下页面渲染的区别

盒模型
CSS 盒模型描述了以文档树中的元素而生成的矩形框，并根据排版模式进行布局。
怪异模式采用IE盒子模型，标准模式使用W3C标准盒子模型。
css盒模型由两个盒子组成，外在的控制是否换行的盒子，以及内在的控制元素内容的盒子。
比如：display: inline-block, 则它的外在的盒子就是inline也就是不占据一行，而block则表示内部的元素具有块状特性。
所以，display: inline其实就是display: inline-inline的缩写，display: block就是display: block-block的缩写。
每一个内在的盒子有: width/height, padding, border, margin这几个控制盒子大小的属性。
标准盒模型
怪异盒模型
图片元素的垂直对齐方式
对于inline元素和table-cell元素，标准模式下vertical-align属性默认取值为baseline，在怪异模式下，table单元格中的图片的vertical-align属性默认取值为bottom，因此在图片底部会有及像素的空间。
在标准模式下,inline元素和tablecell元素的verticle-aligh属性默认取值是baseline,这也是我们有时会看到图片底部会有几像素留白的原因.
但是当inline元素内只有图,并且处于怪异模式的时候,inline元素里的元素的vertical-aligh属性默认值是bottom,此时就不会有白条的效果.

table元素中的字体
标准模式：对于font的属性都是可以继承的
怪异模式：对于table元素，字体的某些属性将不会从body等其他封装元素中继承得到，特别是font-size属性。

内联元素的尺寸
行内元素分为replaced和non-replaced两类,而像input,textarea,img等可以设置宽高的行内元素,成为replaced元素,而那些不能设置宽高的元素被称为non-replaced元素,例如span。
标准模式：non-replaced inline元素无法自定义大小
怪异模式：定义这些元素的width，height属性可以影响这些元素显示的尺寸。

元素的百分比高度
CSS中对于元素的百分比高度规定如下：百分比为元素包含块的高度，不可为负值，如果包含块的高度没有显示给出，该值等同于auto，所以百分比的高度必须在父元素有高度声明的情况下使用。

当一个元素使用百分比高度时，
标准模式：高度取决于内容变化，
怪异模式：百分比高度被正确应用。

元素溢出的处理
如果一个元素内部的内容出现了溢出,并且我们没有设置overflow属性,即默认vislble时:
标准模式：溢出的部分会超出盒子本身,在盒子外部继续显示.
怪异模式：溢出的部分会扩展盒子本身,即外部盒子的大小不一定由css样式决定,会根据内部内容的大小自动调整.

呈现方面的其他差异比较小，而且是与特定浏览器相关的，包括对于十六进制颜色值不需要#号、假设CSS中没有指定单位的长度的单位是像素，以及在使用关键字时将字号增加一级。

怎么知道浏览器用的是哪种模式

在FF，右键–>查看页面信息—>呈现模式（Render Mode）
在IE，F12—>文档模式

注意

多个标签时只认第一个

<html>
    <head>
      <meta http-equiv="X-UA-Compatible" content="IE=7">
      <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">
    </head>
    <body></body>
    <script type="text/javascript"> console.log(document.documentMode); // 输出 7
    </script>
</html>

无效 content 值，就设置为最接近的文档模式
IE=a：文档模式为 5
IE=7.5：文档模式 7
一个标签设置多个文档模式，浏览器会自动选择可用的最高的文档模式

<html>
    <head>
      <meta http-equiv="X-UA-Compatible" content="IE=7;IE=9;IE=8">
    </head>
    <body></body>
    <script type="text/javascript"> console.log(document.documentMode); // IE11中，输出 9
    </script>
</html>