程序员面试必看！难到很多Web前端工程师的面试题分享

迷南。 2023-02-21 06:57 87阅读 0赞

相比于后端技术，Web前端开发对于非科班出身的学习者来讲，进入门槛更低也更加容易。随着人们对用户体验感的重视，Web前端行业不断走俏，招聘需求也在不断扩大。目前，Web前端可以说是一个绝佳的就业选择。那么，Web前端面试题有哪些呢？本文和大家分享一个难到了很多Web前端工程师的面试题：Quirks模式是什么？它和 Standards 模式有什么区别？  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpYW94aWppbmc_size_16_color_FFFFFF_t_70]  
准备参加Web前端工程师面试的小伙伴们来和我一起看一看吧，希望本篇文章能够对大家有所帮助。

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

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

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

**区别：**

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

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

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

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

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

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

关注我，会定期为大家分享最新Web前端发展趋势、学习资料，助力大家学好Web前端。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpYW94aWppbmc_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200629174303932.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpYW94aWppbmc=,size_16,color_FFFFFF,t_70