Skip to content

[html] 第34天 Standards模式和Quirks模式有什么区别? #122

Open
@haizhilin2013

Description

@haizhilin2013
Collaborator

第34天 Standards模式和Quirks模式有什么区别?

Activity

xiangshuo1992

xiangshuo1992 commented on May 20, 2019

@xiangshuo1992
Contributor

一开始我以为是浏览器的极速模式和兼容模式。

后来查了下是浏览器渲染模式,最大区别还是盒模型的解释吧
标准盒模型:元素实际宽度=margin2+border2+padding2+width
怪异盒模型:元素内容宽度=width-margin
2-border2-padding2

后面的同学继续解释下

github-linong

github-linong commented on May 21, 2019

@github-linong

怪异盒模型:元素内容宽度=width-margin2-border2-padding2?

其实我建议这样说
标准盒模型:元素内容宽度=width,元素实际宽度=margin2+border2+padding2+width
怪异盒模型:元素内容宽度=width-border2-padding2,元素实际宽度=margin2+border2+padding2+width=margin2+width

http://jsrun.net/mhyKp/edit

superXJg

superXJg commented on May 21, 2019

@superXJg

楼上说的好。

cleverboy32

cleverboy32 commented on May 21, 2019

@cleverboy32

Standards 严格按照 w3c 统一标准, 怪异模式,兼容不同浏览器的规范

tzjoke

tzjoke commented on May 28, 2019

@tzjoke

楼上公式其实没必要,其实很简单,标准模式宽度就是内容本身,而怪异模式是内容加上padding加上border,但是不加margin

可以看到很多网站都使用 * { box-sizing: border-box; } 这个样式,因为浏览器默认是标准模式,也就是 content-box , 而大家其实更习惯使用怪异模式

DarthVaderrr

DarthVaderrr commented on Jul 4, 2019

@DarthVaderrr

怪异模式是IE的默认盒模型,我觉得这是IE浏览器唯一让我肯定的地方。盒子的大小就是你给定的样式的大小,不用自己计算padding和border造成的向外渲染的差值,布局很方便很稳定。

Konata9

Konata9 commented on Aug 31, 2019

@Konata9

总结一下前面老哥们的回答。毕竟提还是要自己答的。

怪异模式和标准模式最早是为了对旧版本网页进行兼容而设计的,可以通过 <!DOCTYPE> 来进行区分。

两者最主要的区别就是在盒子模型上,元素的宽度。
在标准模式下,元素的宽度只是指 width,如果添加了 paddingborder 元素实际的宽度需要加上 paddingborders。
在怪异模式下,元素的 width 是包含了 paddingborder

通过 CSS 的 {box-sizing: border-box;} 来对盒模型进行设置。

虽然标准模式可以算是标准,但实际使用过程中怪异模式反而更符合人的直觉(个人认为),这样可以减少对 paddingborder 的额外计算。

zivenday

zivenday commented on Sep 4, 2019

@zivenday

想问问大家,html5没有dtd,我知道是它不基于sgml,html4浏览器有自己的方式解释同一个html,导致诸多差异。那么这种差异和混合模式有什么关系。html5难道各个浏览器也有差异吧?为啥它不需要兼容各种模式呢

Toeat

Toeat commented on Oct 5, 2019

@Toeat

怪异盒模型在移动端表现良好,标椎下百分比不好计算,用了box-sizing:border-box;可以让你在百分比布局下不打乱布局

adi0754

adi0754 commented on Jun 11, 2020

@adi0754

标准盒模型:元素内容宽度=width
怪异盒模型:元素内容宽度=width-border2-padding2

blueRoach

blueRoach commented on Jul 3, 2020

@blueRoach

standards模式和quirks模式主要是以HTML是否加!DOCTYPE
quirks主要是为了兼容各个浏览器,远古时期遗留下来的BUG(或者说是当时的标准,对于现在来说的BUG),它并未遵循W3C的标准

主要的区别在盒模型上:
standards盒模型:width = content
quirks盒模型:width = content + border + padding

可以通过box-sizing: border-box、content-box来切换

smile-2008

smile-2008 commented on Oct 19, 2020

@smile-2008

楼上公式其实没必要,其实很简单,标准模式宽度就是内容本身,而怪异模式是内容加上padding加上border,但是不加margin

可以看到很多网站都使用 * { box-sizing: border-box; } 这个样式,因为浏览器默认是标准模式,也就是 content-box , 而大家其实更习惯使用怪异模式

怪异盒模型在移动端表现良好,标椎下百分比不好计算,用了box-sizing:border-box;可以让你在百分比布局下不打乱布局

maxthonl

maxthonl commented on Oct 29, 2020

@maxthonl

老觉得怪怪的,昨天终于找到quirk mode 和standard mode的区别了,这个还真不能简单的描述成盒模型的怪异行为,应该说是在推进web标准化的进程中,为了兼容之前已经存在的渲染行为,产生了三种模式, quirk(没有doctype定义的,主要是兼容IE5以及当时的网景), almost standard (大致可以理解成有doctype定义的,但是和标准有些差异,也就是说也有一部分quirky的行为) 和 standard(doctype html), 具体参考

https://developer.mozilla.org/en-US/docs/Mozilla/Gecko_Almost_Standards_Mode,
https://developer.mozilla.org/en-US/docs/Web/HTML/Quirks_Mode_and_Standards_Mode

简单来讲,应该就可以理解成向前兼容

Iambecauseyouare

Iambecauseyouare commented on Mar 19, 2023

@Iambecauseyouare

标准盒模型:width + margin2 + padding2 + border2
怪异盒模型: width + margin2

an31742

an31742 commented on Nov 14, 2023

@an31742

在很久以前的网络上,页面通常有两种版本:为网景(Netscape)的 Navigator 准备的版本,以及为微软(Microsoft)的 Internet Explorer 准备的版本。当 W3C 创立网络标准后,为了不破坏当时既有的网站,浏览器不能直接弃用这些标准。因此,浏览器采用了两种模式,用以把能符合新规范的网站和老旧网站区分开。

目前浏览器的排版引擎使用三种模式:怪异模式(Quirks mode)、接近标准模式(Almost standards mode)、以及标准模式(Standards mode)。在怪异模式下,排版会模拟 Navigator 4 与 Internet Explorer 5 的非标准行为。为了支持在网络标准被广泛采用前,就已经建好的网站,这么做是必要的。在标准模式下,行为即(但愿如此)由 HTML 与 CSS 的规范描述的行为。在接近标准模式下,只有少数的怪异行为被实现
MDN 答案

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @smile-2008@haizhilin2013@zivenday@Konata9@Toeat

        Issue actions

          [html] 第34天 Standards模式和Quirks模式有什么区别? · Issue #122 · haizlin/fe-interview