2021年WEB前端开发工程师面试题

[HTML && CSS]

1. Doctype?严格模式与混杂模式-如何触发这两种模式，区别它们有何意义?

Doctype声明位于文档中最前面位置，处在标签之前。此标签可告知浏览器文档使用哪种HTML 或XHTML 规范。该标签可声明三种DTD 类型，分别表达严格版本、过渡版本以及基于框架HTML 文档。

当浏览器厂商开始创立与原则兼容浏览器时，她们但愿保证向后兼容性。为了实现这一点，她们创立了两种呈现模式：原则模式和混杂模式（quirks mode）。在原则模式中，浏览器依照规范呈现页面；

在混杂模式中，页面以一种比较宽松向后兼容方式显示。混杂模式普通模仿老式浏览器（例如Microsoft IE 4和Netscape Navigator 4）行为以防止老站点无法工作。

浏览器依照DOCTYPE与否存在以及使用哪种DTD来选取要使用呈现办法。如果XHTML文档包括形式完整DOCTYPE，那么它普通以原则模式呈现。对于HTML 4.01文档，包括严格DTDDOCTYPE 经常导致页面以原则模式呈现。包括过渡DTD和URIDOCTYPE也导致页面以原则模式呈现，但是有过渡DTD而没有URI会导致页面以混杂模式呈现。DOCTYPE不存在或形式不对的会导致HTML和XHTML文档以混杂模式呈现。

2. 行内元素有哪些？块级元素有哪些？CSS盒模型？

行内元素有：a b span I b em img input select strong

块级元素有：div ul ol li dl dt dd h1 h2 h3 h4…p

盒模型：margin border padding width

3. CSS引入方式有哪些?link和@import区别是?

两者区别：加载顺序差别。当一种页面被加载时候，link引用CSS会同步被加载，而@import引用CSS 会等到页面所有被下载完再被加载。@import可以在css中再次引入其她样式表，例如可以创立一种主样式表，在主样式表中再引入其她样式表，如：

main.css

———————-

@import “sub1.css”;

@import “sub2.css”;

这样做有一种缺陷，会对网站服务器产生过多HTTP祈求，此前是一种文献，而当前却是两个或更多文献了，服务器压力增大，浏览量大网站还是谨慎使用。

4. CSS选取符有哪些？哪些属性可以继承？优先级算法如何计算？内联和important哪个优先级高？

可以继承有：font-size font-family color

不可继承普通有：border padding margin background-color width height等============================

使用!important可以变化优先级别为最高，另一方面是style对象，然后是id > class >tag ，此外在同级样式按照声明顺序后浮现样式具备高优先级。

5. 前端页面由哪三层构成，分别是什么？作用是什么？

网页提成三个层次，即：构造层、表达层、行为层。

网页构造层（structural layer）由HTML 或XHTML 之类标记语言负责创立。标签，也就是那些出当前尖括号里单词，对网页内容语义含义做出了描述，但这些标签不包括任何关于如何显示关于内容信息。例如，P 标签表达了这样一种语义：“这是一种文本段。”

网页表达层（presentation layer）由CSS 负责创立。CSS 对“如何显示关于内容”问题做出了回答。

网页行为层（behavior layer）负责回答“内容应当如何对事件做出反映”这一问题。这是Javascript 语言和DOM 主宰领域。

6. css基本语句构成是？

选取器{属性1:值1;属性2:值2;……}

7. 你做页面在哪些流览器测试过？这些浏览器内核分别是什么?经常遇到浏览器兼容性有哪些？怎么会

浮现？解决办法是什么？

IE内核浏览器：360，傲游，搜狗，世界之窗，腾讯TT

非IE内核浏览器：firefox opera safari chrome

1.就是ie6双倍边距问题，在使用了float状况下，不论是向左还是向右都会浮现双倍，最简朴解决办

法就是用display:inline;加到css里面去。

2.文字自身大小不兼容。同样是font-size:14px宋体文字，在不同浏览器下占空间是不同样，ie下实际

占高16px，下留白3px，ff下实际占高17px，上留白1px，下留白3px，opera下就更不同样了。解决方案：给文字设定line-height 。保证所有文字均有默认line-height 值。这点很重要，在高度上咱们不能容忍1px 差别。

3.ff下容器高度限定，即容器定义了height之后，容器边框外形就拟定了，不会被内容撑大，而ie下

是会被内容撑大，高度限定失效。因此不要容易给容器定义height。

4.还讨论内容撑破容器问题，横向上。如果float 容器未定义宽度，ff下内容会尽量撑开容器宽度，ie

下则会优先考虑内容折行。故，内容也许撑破浮动容器需要定义width。

5.浮动清除，ff下不清除浮动是不行。

6.mirrormargin bug，当外层元素内有float元素时，外层元素如定义margin-top:14px，将自动生成

margin-bottom:14px。padding也会浮现类似问题，都是ie6下特产，该类bug 浮现状况较为复杂，远不只这一种浮现条件，还没系统整顿。解决方案：外层元素设定border 或设定float。

7.吞吃现象，限于篇幅，我就不展开了。还是ie6，上下两个div，上面div设立背景，却发现下面没

有设立背景div 也有了背景，这就是吞吃现象。相应上面背景吞吃现象，尚有滚动下边框缺失现象。解决方案：使用zoom:1。这个zoom好象是专门为解决ie6 bug而生。

8.注释也能产生bug~~~“多余来一只猪。”这是前人总结这个bug使用文案，ie6这个bug 下，人们会在页面看到猪字浮现两遍，重复内容量因注释多少而变。解决方案：用“ picRotate start ”办法写注释。

里加float

，这是一种典型，棘手兼容问题，但愿引起人们正视，给li 不同属性会有不同解释效果，ff下解释稍可理解，ie6下解释会让你摸不着头脑，由于问题复杂性，将另起一文专门讨论该问题。在《ul使专心得》一文里有有关成果，却没给出问题解决过程。

10.img下留白。解决方案：给img设定display:block。

11.失去line-height。

文字

，很遗憾，在ie6下单行文字line-height 效果消失了。。。，因素是这个inline-block元素和inline元素写在一起了。解决方案：让img 和文字都float起来。

12.链接hover状态。a:hover img{width:300px} 咱们想让鼠标hover时，链接里包括图片宽度变化，可惜在ie6下无效，ie7、ff下有效。

13.非链接hover状态。div:hover{} 这样样式ie6是不认，在ie7、ff下才有效果。

14.ie下overflow:hidden对其下绝对层position:absolute或者相对层position:relative无效。解决方案：给overflow:hidden加position:relative或者position:absolute。另，ie6支持overflow-x或者overflow-y特性，ie7、ff不支持。

15.ie6下严重bug，float元素如没定义宽度，内部如有div定义了height或zoom:1，这个div就会占满一整行，虽然你给了宽度。float元素如果作为布局用或复杂容器，都要给个宽度。

16.ie6下bug，绝对定位div下包括相对定位div，如果给内层相对定位div高度height详细值，内层相对层将具备100%width值，外层绝对层将被撑大。解决方案给内层相对层float属性。

17. ie6下bug，内有状况下，position:relative层下float 层内文字无法选中。

18. 终于来了个ff缺陷。width:100%这个东西在ie里用很以便，会向上逐级搜索width值，忽视浮动

层影响，ff下搜索至浮动层结束，如此，只能给中间所有浮动层加width:100%才行，累啊。opera这点倒学乖了跟了ie。

8. 如何居中一种浮动元素?

设立容器浮动方式为相对定位，然后拟定容器宽高，例如宽500 高300 层，然后设立层外边距。

div{Width:500px;height:300px;Margin：-150px 0 0 -250px;position:relative;left:50%;top:50%;}

9. 有无关注HTML5和CSS3?如有请简朴说某些您对它们理解状况！

HTML5标签变化：

，