月半小夜曲下的畅想DOCTYPE模式(Markdown)_html/css_WEB-ITnose
Jun 24, 2016 am 11:39 AM
月半小夜曲下的畅想--DOCTYPE模式
@(css3 box-sizing)[doctype声明|quirks模式|妙瞳]
常用集合 ：
互联网工程任务组超文本标记语言2.0：
公共标识符称为：“-//IETF//DTD HTML//en”。
万维网联盟：
大多数万维网浏览器实际上并没有使用标准通用标记语言解析器，其中许多基于对文档的!DOCTYPE声明，显示有所不同的文件或缺乏。
在超级文本标记语言下的作用是告知浏览器当前文档所使用的是哪种超文本或可扩展超文本规范。
超文本4.01 规定了叁种文档类型：严格、过渡以及框架集。
超文本严格文档类型定义：
如果您需要干净的标记，免于表现层的混乱，请使用此类型。请与层叠样式表配合使用：
（公共标识符称为：“-//W3C//DTD HTML 4.01//en”。）
超文本过渡文档类型定义：
可包含万维网联盟所期望移入样式表的呈现属性和元素。如果您的读者使用了不支持层叠样式表的浏览器以至于您不得不使用超文本标记语言的呈现特性时，请使用此类型：
（公共标识符称为：“-//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”。）
万维网联盟：
下面例子中的声明都指定了遵从“MathML”数学标记语言 2.0 文档类型定义。
（公共标识符统称为：“-//W3C//DTD MathML 2.0//en”。）
第二种将设置MATHML命名空间的前缀到MML。
]>
第三种附加了检查文档类型定义（DTD）
]>
公共标识符称为：“-//IPTC-NAA//DTD NITF 2.0//en”
翻译存储交换
公共标识符称为：“-//LISA OSCAR:1998//DTD for Translation Memory eXchange//en”
电子日历
公共标识符称为：“-//IETF//DTD iCalendar//en”
公共标识符称为：“-//WAPFORUM//DTD WML 1.1//en”
三点零版本：
上面的 DOCTYPE 包含 6 部分：
1 |
|
其中根元素通用标识符、公共标识符、系统标识符均可以通过脚本调用 DOM 接口获得，分别对应 document.doctype.name、document.doctype.publicId、document.doctype.systemId
总结：
1 |
|
具体解释参照：http://baike.baidu.com/link?url=dTCobBuXTUw0jTNi4dpsIOU2Dt0owC8WnazmV1gsgQXOegyPSDZAMZ95BN81ckCyspnO5TTgrX-hm3_ktPagruZzvIfqBISloJIXiFgJcs_euma9v9I5iABX7g0Zyxpo3zJAzbDPCoH7zBJFg13TKa
浏览器的两种文档模式历史：
1 |
|
浏览器是如何决定文档模式？
浏览器在准备解析、绘制一个页面的时候，它是如何决定文档模式的呢？实际上浏览器在渲染页面之前会检查两个内容，一个是页面是否有 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 应用是非常不利的地方。
实例演示：
1 |
|
在 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
总结
1 |
|
代码如下：
IE5.5/IE6/IE7/IE8效果图如下：
就会在Quirks Mode下，而其他的主流标准浏览器的效果是怎样的呢？由于其他主流的标准浏览器都是用的W3C标准，所以效果如下：
（分别是谷歌，360，safari,opera的测试效果）
假如加上了doctype声明，IE5.5/IE6/IE7/IE8的效果是怎样的呢？
IE5.5还是
而IE6/IE7/IE8则是：
总结
1 |
|
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 属性的值。
代码如下：
1 |
|
即是，内容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的效果如下：
总结
1 |
|
结语
1 |
|
Artikel Panas
Alat panas Tag
Artikel Panas
Tag artikel panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
Kesukaran mengemas kini caching laman web akaun rasmi: Bagaimana untuk mengelakkan cache lama yang mempengaruhi pengalaman pengguna selepas kemas kini versi?
Mar 04, 2025 pm 12:32 PM
Kesukaran mengemas kini caching laman web akaun rasmi: Bagaimana untuk mengelakkan cache lama yang mempengaruhi pengalaman pengguna selepas kemas kini versi?
Bagaimana saya menggunakan atribut pengesahan borang html5 untuk mengesahkan input pengguna?
Mar 17, 2025 pm 12:27 PM
Bagaimana saya menggunakan atribut pengesahan borang html5 untuk mengesahkan input pengguna?
Bagaimana cara menambah kesan strok kepada imej PNG di laman web?
Mar 04, 2025 pm 02:39 PM
Bagaimana cara menambah kesan strok kepada imej PNG di laman web?
Apakah tujuan & lt; iframe & gt; Tag? Apakah pertimbangan keselamatan semasa menggunakannya?
Mar 20, 2025 pm 06:05 PM
Apakah tujuan & lt; iframe & gt; Tag? Apakah pertimbangan keselamatan semasa menggunakannya?
Apakah implikasi keselamatan menggunakan iframes, dan bagaimana saya dapat mengurangkannya?
Mar 18, 2025 pm 02:51 PM
Apakah implikasi keselamatan menggunakan iframes, dan bagaimana saya dapat mengurangkannya?
Bagaimana saya menggunakan html5 & lt; meter & gt; elemen untuk memaparkan data berangka dalam julat?
Mar 12, 2025 pm 04:08 PM
Bagaimana saya menggunakan html5 & lt; meter & gt; elemen untuk memaparkan data berangka dalam julat?
Apakah amalan terbaik untuk keserasian penyemak imbas dalam HTML5?
Mar 17, 2025 pm 12:20 PM
Apakah amalan terbaik untuk keserasian penyemak imbas dalam HTML5?
Bagaimana saya menggunakan html5 & lt; masa & gt; elemen untuk mewakili tarikh dan masa secara semantik?
Mar 12, 2025 pm 04:05 PM
Bagaimana saya menggunakan html5 & lt; masa & gt; elemen untuk mewakili tarikh dan masa secara semantik?
