You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
在很久以前的网络上,页面通常有两种版本:为网景(Netscape)的 Navigator 准备的版本,以及为微软(Microsoft)的 Internet Explorer 准备的版本。当 W3C 创立网络标准后,为了不破坏当时既有的网站,浏览器不能直接弃用这些标准。因此,浏览器采用了两种模式,用以把能符合新规范的网站和老旧网站区分开。
目前浏览器的排版引擎使用三种模式:怪异模式(Quirks mode)、接近标准模式(Almost standards mode)、以及标准模式(Standards mode)。在怪异模式下,排版会模拟 Navigator 4 与 Internet Explorer 5 的非标准行为。为了支持在网络标准被广泛采用前,就已经建好的网站,这么做是必要的。在标准模式下,行为即(但愿如此)由 HTML 与 CSS 的规范描述的行为。在接近标准模式下,只有少数的怪异行为被实现
MDN 答案
Activity
xiangshuo1992 commentedon May 20, 2019
一开始我以为是浏览器的极速模式和兼容模式。
后来查了下是浏览器渲染模式,最大区别还是盒模型的解释吧
标准盒模型:元素实际宽度=margin2+border2+padding2+width
怪异盒模型:元素内容宽度=width-margin2-border2-padding2
后面的同学继续解释下
github-linong commentedon May 21, 2019
怪异盒模型:元素内容宽度=width-margin2-border2-padding2?
其实我建议这样说
标准盒模型:元素内容宽度=width,元素实际宽度=margin2+border2+padding2+width
怪异盒模型:元素内容宽度=width-border2-padding2,元素实际宽度=margin2+border2+padding2+width=margin2+width
http://jsrun.net/mhyKp/edit
superXJg commentedon May 21, 2019
楼上说的好。
cleverboy32 commentedon May 21, 2019
Standards 严格按照 w3c 统一标准, 怪异模式,兼容不同浏览器的规范
tzjoke commentedon May 28, 2019
楼上公式其实没必要,其实很简单,标准模式宽度就是内容本身,而怪异模式是内容加上padding加上border,但是不加margin
可以看到很多网站都使用
* { box-sizing: border-box; }
这个样式,因为浏览器默认是标准模式,也就是content-box
, 而大家其实更习惯使用怪异模式DarthVaderrr commentedon Jul 4, 2019
怪异模式是IE的默认盒模型,我觉得这是IE浏览器唯一让我肯定的地方。盒子的大小就是你给定的样式的大小,不用自己计算padding和border造成的向外渲染的差值,布局很方便很稳定。
Konata9 commentedon Aug 31, 2019
总结一下前面老哥们的回答。毕竟提还是要自己答的。
怪异模式和标准模式最早是为了对旧版本网页进行兼容而设计的,可以通过
<!DOCTYPE>
来进行区分。两者最主要的区别就是在盒子模型上,元素的宽度。
在标准模式下,元素的宽度只是指 width,如果添加了
padding
和border
元素实际的宽度需要加上padding
和border
s。在怪异模式下,元素的 width 是包含了
padding
和border
。通过 CSS 的
{box-sizing: border-box;}
来对盒模型进行设置。虽然标准模式可以算是标准,但实际使用过程中怪异模式反而更符合人的直觉(个人认为),这样可以减少对
padding
和border
的额外计算。zivenday commentedon Sep 4, 2019
想问问大家,html5没有dtd,我知道是它不基于sgml,html4浏览器有自己的方式解释同一个html,导致诸多差异。那么这种差异和混合模式有什么关系。html5难道各个浏览器也有差异吧?为啥它不需要兼容各种模式呢
Toeat commentedon Oct 5, 2019
怪异盒模型在移动端表现良好,标椎下百分比不好计算,用了box-sizing:border-box;可以让你在百分比布局下不打乱布局
adi0754 commentedon Jun 11, 2020
标准盒模型:元素内容宽度=width
怪异盒模型:元素内容宽度=width-border2-padding2
blueRoach commentedon Jul 3, 2020
standards模式和quirks模式主要是以HTML是否加!DOCTYPE
quirks主要是为了兼容各个浏览器,远古时期遗留下来的BUG(或者说是当时的标准,对于现在来说的BUG),它并未遵循W3C的标准
主要的区别在盒模型上:
standards盒模型:width = content
quirks盒模型:width = content + border + padding
可以通过box-sizing: border-box、content-box来切换
smile-2008 commentedon Oct 19, 2020
楼上公式其实没必要,其实很简单,标准模式宽度就是内容本身,而怪异模式是内容加上padding加上border,但是不加margin
可以看到很多网站都使用 * { box-sizing: border-box; } 这个样式,因为浏览器默认是标准模式,也就是 content-box , 而大家其实更习惯使用怪异模式
怪异盒模型在移动端表现良好,标椎下百分比不好计算,用了box-sizing:border-box;可以让你在百分比布局下不打乱布局
maxthonl commentedon Oct 29, 2020
老觉得怪怪的,昨天终于找到quirk mode 和standard mode的区别了,这个还真不能简单的描述成盒模型的怪异行为,应该说是在推进web标准化的进程中,为了兼容之前已经存在的渲染行为,产生了三种模式, quirk(没有doctype定义的,主要是兼容IE5以及当时的网景), almost standard (大致可以理解成有doctype定义的,但是和标准有些差异,也就是说也有一部分quirky的行为) 和 standard(doctype html), 具体参考
简单来讲,应该就可以理解成向前兼容
Iambecauseyouare commentedon Mar 19, 2023
标准盒模型:width + margin2 + padding2 + border2
怪异盒模型: width + margin2
an31742 commentedon Nov 14, 2023
在很久以前的网络上,页面通常有两种版本:为网景(Netscape)的 Navigator 准备的版本,以及为微软(Microsoft)的 Internet Explorer 准备的版本。当 W3C 创立网络标准后,为了不破坏当时既有的网站,浏览器不能直接弃用这些标准。因此,浏览器采用了两种模式,用以把能符合新规范的网站和老旧网站区分开。
目前浏览器的排版引擎使用三种模式:怪异模式(Quirks mode)、接近标准模式(Almost standards mode)、以及标准模式(Standards mode)。在怪异模式下,排版会模拟 Navigator 4 与 Internet Explorer 5 的非标准行为。为了支持在网络标准被广泛采用前,就已经建好的网站,这么做是必要的。在标准模式下,行为即(但愿如此)由 HTML 与 CSS 的规范描述的行为。在接近标准模式下,只有少数的怪异行为被实现
MDN 答案