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文档，包含严格DTD的DOCTYPE常常导致页面以标准模式呈现。包含过渡DTD和URI的DOCTYPE也导致页面以标准模式呈现，但是有过渡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 ”方法写注释。

9.

里加float

，这是一个典型的，棘手的兼容问题，希望引起大家正视，给li 不同的属性