原创 Web前端程序员必备前端面试题汇总（1）

发布时间：2019-06-27 18:15:42 浏览 2666 来源：博学谷资讯作者：枫调

　　任何技术岗位面试的时候都要经过人力面试和技术岗位面试至少两次。人力面试一般也就是考察一下个人品质以及薪资问题，而技术岗位则是考察你是否有真才实学。本文和大家分享一个难到了很多前端工程师的面试题：Quirks模式是什么？它和 Standards 模式有什么区别？

Web前端程序员必备前端面试题汇总（1）

　　下面就是针对这个问题的讲解。

　　从 IE6 开始，引入了 Standards模式，标准模式中，浏览器尝试给符合标准的文档在规范上的正确处理达到在指定浏览器中的程度。

　　在 IE6 之前 CSS 还不够成熟，所以 IE5 等之前的浏览器对 CSS 的支持很差， IE6 将对 CSS提供更好的支持，然而这时的问题就来了，因为有很多页面是基于旧的布局方式写的，而如果 IE6 支持 CSS 则将令这些页面显示不正常，如何在即保证不破坏现有页面，又提供新的渲染机制呢？

　　在写程序时我们也会经常遇到这样的问题，如何保证原来的接口不变，又提供更强大的功能，尤其是新功能不兼容旧功能时。遇到这种问题时的一个常见做法是增加参数和分支，即当某个参数为真时，我们就使用新功能，而如果这个参数不为真时，dd 就使用旧功能，这样就能不破坏原有的程序，又提供新功能。IE6 也是类似这样做的，它将 DTD 当成了这个“参数”，因为以前的页面大家都不会去写 DTD，所以 IE6 就假定如果写了 DTD，就意味着这个页面将采用对 CSS 支持更好的布局，而如果没有，则采用兼容之前的布局方式。这就是Quirks 模式（怪癖模式，诡异模式，怪异模式）。

　　区别：

　　总体会有布局、样式解析和脚本执行三个方面的区别。

　　盒模型：在 W3C 标准中，如果设置一个元素的宽度和高度，指的是元素内容的宽度和高度，而在 Quirks 模式下，IE 的宽度和高度还包含了 padding 和 border。

　　设置行内元素的高宽：在 Standards 模式下，给<span>等行内元素设置 wdith 和 height 都不会生效，而在 quirks 模式下，则会生效。

　　设置百分比的高度：在 standards 模式下，一个元素的高度是由其包含的内容来决定的，如果父元素没有设置百分比的高度，子元素设置一个百分比的高度是无效的用margin:0 auto 设置水平居中：使用 margin:0 auto 在 standards 模式下可以使元素水平居中，但在 quirks 模式下却会失效。

　　其实面试过程中遇到不会回答的问题很正常，如果经过考察证明你的学习能力强，遇到不会的问题能够通过自己的能力快速掌握，面试官也有可能给你这个机会。但是实际的面试过程中并不能完全把希望寄托在面试官的善良上面。拥有真才实学才是你立足于职场的不败真理。

　　Quirks模式是什么？它和 Standards 模式有什么区别？这个问题，本文已经大体上解答了，还有很多内容并不能一一赘述。希望你在实际应用的过程中自己多多总结归纳。

Web前端面试题