每日三面试题HTML+CSS(1)

145 阅读4分钟

1、常用浏览器内核

(1)IE:Trident
(2)FireFox:Gecko
(3)Safari:Webkit
(4)Opera:之前是Presto,现在使用Blink
(5)Chrome:Blink

2、HTML中文件开头Doctype的作用?严格模式与混杂模式的区别?

(1)Doctype作用:告知浏览器文档使用哪种规范解析页面(HTML或XHTML规范)。
(2)严格模式与混杂模式
严格模式下,页面排版及JS解析是以浏览器支持的最高标准来执行。 混杂模式下,不严格按照标准执行,主要用来兼容旧的浏览器,向后兼容(向下兼容)。

3、Quirks模式是什么?它和Standards模式有什么区别

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

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

在写程序时我们也会经常遇到这样的问题,如何保证原来的接口不变,又提供更强大的功能,尤其是新功能不兼容旧功能时。遇到这种问题时的一个常见做法是增加参数和分支,即当某个参数为真时,我们就使用新功能,而如果这个参数不为真时,就使用旧功能,这样就能不破坏原有的程序,又提供新功能。

IE6也是类似这样做的,它将DTD当成了这个“参数”,因为以前的页面大家都不会去写DTD,所以IE6就假定如果写了DTD,就意味着这个页面将采用对CSS支持更好的布局,而如果没有,则采用兼容之前的布局方式。这就是Quirks模式(怪癖模式,诡异模式,怪异模式)。

(Quirks模式(Quirks mode)是一种网页渲染模式,也称为怪异模式(quirk mode)或兼容模式(compatibility mode)。在这种模式下,浏览器会以一种更加宽松、兼容旧式网页设计的方式来呈现网页内容。Quirks模式存在的主要原因是为了向后兼容旧的网页设计标准,这些标准在当前的现代浏览器中可能已经过时或被废弃。

区别:

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

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

(2)设置行内元素的高宽:在Standards模式下,给‘span’等行内元素设置wdith和height都不会生效,而在quirks模式下,则会生效。

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

image.png  

相对于Quirks模式,Standards模式(标准模式,也称为严格模式)则更加严格地遵循当前的网页设计标准和规范。在这种模式下,浏览器会更加严格地执行HTML和CSS标准,从而确保网页能够以一致的方式在不同的浏览器中呈现,并且提供更好的性能、可靠性和可维护性

在HTML5中,如果DOCTYPE声明正确地指定为HTML5标准,那么浏览器将默认使用标准模式来呈现网页。如果DOCTYPE声明不正确或缺失,浏览器将会使用Quirks模式来呈现网页,这可能导致网页在不同浏览器中呈现不一致。因此,在编写网页时,建议始终指定正确的DOCTYPE声明来确保使用标准模式来呈现网页。)