@(css3 box-sizing)[doctype ステートメント | quirks モード | Miaotong]
よく使われるコレクション:
World Wide Web Consortium:
ほとんどの World Wide Web ブラウザは、実際には標準のユニバーサル マークアップ言語パーサーを使用していません。その多くはドキュメントの !DOCTYPE 宣言に基づいており、ファイルの表示方法が異なっていたり、欠落していたりします。
ハイパーテキスト マークアップ言語の機能は、現在のドキュメントでどのハイパーテキストまたは拡張可能なハイパーテキスト仕様が使用されているかをブラウザーに伝えることです。
Hypertext 4.01 では、strict、transitional、および Frameset の 3 つのドキュメント タイプが指定されています。
ハイパーテキスト厳密ドキュメント タイプの定義:
プレゼンテーション レイヤーが乱雑にならないクリーンなマークアップが必要な場合は、このタイプを使用します。カスケード スタイル シートと一緒に使用してください:
(パブリック識別子は「-//W3C//DTD HTML 4.01//en」と呼ばれます。)
ハイパーテキスト トランジション ドキュメント タイプの定義:
世界規模で期待される移行を含めることができます。 Web コンソーシアム スタイルシートのプロパティと要素をレンダリングします。読者がカスケード スタイル シートをサポートしていないブラウザを使用していて、ハイパーテキスト マークアップ言語のレンダリング機能を使用する必要がある場合は、次のタイプを使用します:
(パブリック識別子は「-//W3C//DTD HTML 4.01 Transitional」と呼ばれます) //en".)
ハイパーテキスト フレームセット ドキュメント タイプ定義:
フレームセット ドキュメント タイプ定義は、フレームのあるドキュメントに使用する必要があります。移行ドキュメント タイプ定義:
と同等ですが、frameset 要素が body 要素を置き換える点が異なります:
(パブリック識別子は、「-//W3C//DTD HTML 4.01 Frameset//en」と呼ばれます。)
拡張可能なハイパーテキスト マークアップ言語移行ドキュメント タイプ定義:
W3C がスタイル シートに移動することを想定しているレンダリング属性と要素を含めることができます。読者がカスケード スタイル シート (CSS) をサポートしていないブラウザを使用していて、XHTML のレンダリング機能を使用する必要がある場合は、次のタイプを使用します:
(パブリック識別子は「-//W3C//DTD XHTML 1.0」と呼ばれます) Transitional//en".)
拡張ハイパーテキスト マークアップ言語フレームセット ドキュメント タイプ定義:
フレームを使用したい場合は、このドキュメント タイプ定義を使用してください。
(パブリック識別子は、「-//W3C//DTD XHTML 1.0 Frameset//en」と呼ばれます。)
World Wide Web Consortium:
以下の例の宣言はすべて、準拠を指定しています。 「MathML「数学的マークアップ言語 2.0 文書型定義」」を使用。
(パブリック識別子は総称して「-//W3C//DTD MathML 2.0//en」と呼ばれます。)
2 つ目は、MATHML 名前空間のプレフィックスを MML に設定します。
3 つ目は、Document Type Definition (DTD) のチェックを追加します
公開識別子の名前は「-//IPTC-NAA」です/ /DTD NITF 2.0//en"
Translation Storage Exchange
パブリック識別子は次のように呼ばれます: "-//LISA OSCAR:1998//DTD for Translation Memory eXchange//en"
電子カレンダー
パブリック識別子名前: "-//IETF//DTD iCalendar//en"
パブリック識別子の名前: "-//WAPFORUM//DTD WML 1.1//en"
バージョン 3.0:
上記の DOCTYPE には 6 つの部分が含まれています:
1. 字符串“<!DOCTYPE”2. 根元素通用标识符“HTML”3. 字符串“PUBLIC”4. 被引号括起来的公共标识符（publicId）“-//W3C//DTD HTML 4.01//en”5. 被引号括起来的系统标识符（systemId）“http://www.w3.org/TR/html4/strict.dtd”6. 字符串“>”
概要
:我查看了在淘宝网，京东，天猫，还有博客园上都是用的<!DOCTYPE html>,这个是html5标准网页声明，原先的是一串很长的字符串，现在是这个简洁形式，支持html5标准的主流浏览器都认识这个声明。表示网页采用html5，而HTML 4.01 中的doctype需要对DTD进行引用，因为HTML 4.01基于SGML，而HTML5不基于SGML，因此不需要对 DTD 进行引用，但是需要 doctype 来规范浏览器的行为。我平时也是运用<!DOCTYPE html>，一方面简洁，不会写错，另外一方面，标准主流浏览器都认识，所以可以放心写。
ブラウザの 2 つのドキュメント モードの歴史
: 🎜随着 IE 的发展，其渲染引擎（早期为 MSHTML.dll，后来命名为 Trident）也在不断加入新的特性以及修正一些早先版本的错误。在 2001 年 IE6 正式发布之前，当时的市面主要就是 IE 和 Netscape 的 Navigator 两款浏览器，而 IE 拥有很大的用户群，所以大多数的页面都是针对 IE 而设计的，但是 IE 的渲染引擎却没有遵循 W3C 的规范，当时微软已经认识到 W3C 规范的重要性,所以当 IE 发展到 IE6 的时候，渲染引擎（MSHTML.dll）做出了一个重要的改变，将自己原先不符合 W3C 规范中的盒模型 box mode 绘制方式改为与 W3C 标准一致，由于这个重大的改动，原先针对 IE 旧版本所设计的 HTML 页面都不能正确显示了，所以在 IE6 发布的时候附带了一个切换回 IE5 页面渲染方式的功能，这个功能中就首次提出了 Quirks Mode。IE6.0以后的版本在浏览器内嵌了两种表现模式：Standards Mode（标准模式或Strict Mode）和Quirks mode（怪异模式或兼容模式Compatibility Mode）。在标准模式中，浏览器根据W3C所定的规范来显示页面；而在怪异模式中，页面将以IE5，甚至IE4的显示页面的方式来表现，以保持以前的网页能正常显示。
浏览器是如何决定文档模式？
浏览器在准备解析、绘制一个页面的时候，它是如何决定文档模式的呢？实际上浏览器在渲染页面之前会检查两个内容，一个是页面是否有 doctype 信息，另外一个是页面是否有 x-ua-compatible 信息(暂时不讨论，先讨论doctype)。
Doctype 检测
对于一个 HTML 页面， 声明位于其中最前面的位置，处于标签之前，这个 可以告知浏览器使用哪种 HTML 规范，针对每种规范浏览器同样也会选择对应的文档模式。平时最常见的三种 doctype 信息对应的文档模式如下。
当 doctype 信息如下时，表明该页面是遵守了 HTML5 规范的，浏览器会选择 Standards Mode，这种 doctype 是最推荐的一种，我们平时设计页面都应该加上这一个 doctype。
当 doctype 如下时，浏览器同样会选择 Standards Mode，虽然和第一种 doctype 有一些区别，但是几乎可以认为是一样的。
当 doctype 缺失的时候，浏览器会选择 Quirks Mode，这是非常不推荐的方式，我们应该尽量避免 Quirks Mode，这对一个 web 应用是非常不利的地方。
实例演示：
标准模式(Standards Mode)与怪异模式(Quirks Mode)下的页面区别由于历史原因，早期的 IE 浏览器（IE 6 以前）将盒子的 padding 和 border 算到了盒子的尺寸中，这一模型被称为 IE 盒模型。
在 IE 盒模型中，
box width = content width + padding left + padding right + border left + border right
box height = content height + padding top + padding bottom + border top + border bottom
而在W3C 标准的盒模型中，box 的大小就是 content 的大小。
box width = content width，
box height = content height
如下代码所示：
IE5.5下的盒子总宽度为100px.
谷歌上的盒子总宽度为160px
总结
由此可见，Quirks 和 Standards 这两种文档模式渲染页面的时候会有很大的差别，特别是盒子模型的解释造成很多麻烦，这些差别主要是由于渲染引擎在历史的发展过程中与 W3C 标准的差异性而导致的。所以对doctype的声明尤为重要，假如没有声明doctype,那么就会开启怪异模式！
代码如下：
IE5.5/IE6/IE7/IE8效果图如下：
就会在Quirks Mode下，而其他的主流标准浏览器的效果是怎样的呢？由于其他主流的标准浏览器都是用的W3C标准，所以效果如下：
（分别是谷歌，360，safari,opera的测试效果）
假如加上了doctype声明，IE5.5/IE6/IE7/IE8的效果是怎样的呢？
IE5.5还是
而IE6/IE7/IE8则是：
总结
跟其他采用W3C的标准浏览器的盒子模型一样。现在大家已经忽视了IE5.5的存在，为了更好实现兼容，所以doctype声明一定不可用缺省。而写上<!DOCTYPE html>即可。
CSS3的box-sizing属性
定义和用法
box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素。
例如，假如您需要并排放置两个带边框的框，可通过将 box-sizing 设置为 "border-box"。这可令浏览器呈现出带有指定宽度和高度的框，并把边框和内边距放入框中。
默认值：content-box
继承性：no
版本：CSS3
JavaScript 语法：object.style.boxSizing="border-box"
语法
box-sizing: content-box|border-box|inherit;
content-box
这是由 CSS2.1 规定的宽度高度行为。
宽度和高度分别应用到元素的内容框。
在宽度和高度之外绘制元素的内边距和边框。
border-box
为元素设定的宽度和高度决定了元素的边框盒。
为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。
通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。
inherit规定应从父元素继承 box-sizing 属性的值。
代码如下：
由上面代码所示，就可以看出，当设置box-sizing:border-box;为元素设定的宽度和高度决定了元素的边框盒。为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。
即是，内容content只有130px，width：150px,在已设定的150px内，减去左右两边border,就是内容值130px。
-moz-box-sizing:border-box; /* Firefox /
-webkit-box-sizing:border-box; / Safari */
上面两行代码则兼容了Firefox和Safari,同时测试了opera,效果图一致如下：
那么IE5.5的效果如下：
IE6/IE7的效果如下：
IE8的效果如下：
总结
从以上可以看出，box-sizing属性在IE8上是可以实现其他标准浏览器的效果，可是IE5.5/IE6/IE7 却不能完全兼容，从兼容性上考虑，在大型的项目上尽量不用box-sizing。有兴趣的朋友，可以去查下box-sizing 如何实现兼容咯。本篇文章还涉及了很多知识点，就不一一赘述了，至于页面渲染引擎这个点，我还不是很清楚，所以后面再总结写文咯。
结语
假如有错误的地方，欢迎大家指正，谢谢！ ----妙瞳
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
