前端面试题

[HTML && CSS]
1 Doctype严格模式与混杂模式-如何触发这两种模式，区分它们有何意义?

2 行内元素有哪些？块级元素有哪些？画一下CSS的盒模型
3 CSS引入的方式有哪些? link和@import的区别是?
4 CSS选择符有哪些？哪些属性可以继承？优先级算法如何计算？内联和important哪个优先级高？
5:前端页面有哪三层构成，分别是什么？作用是什么？

最准确的网页设计思路是把网页分成三个层次，即：结构层、表示层、行为层。

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

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

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

网页的表示层和行为层总是存在的，即使我们未明确地给出任何具体的指令也是如此。此时， Web 浏览器将把它的默认样式和默认事件处理函数施加在网页的结构层上。例如，浏览器会在呈现“文本段”元素时留出页边距，有些浏览器会在用户把鼠标指针悬停在 某个元素的上方时弹出一个显示着该元素的 title 属性值的提示框，等等。

分离

在所有的产品设计活动中，选择最适用的工具去解决问题是最基本的原则。具体到网页设计工作，这意味着：

使用 (X)HTML 去搭建文档的结构。

使用 CSS 去设置文档的呈现效果。

使用 DOM 脚本去实现文档的行为。

不过，在这三种技术之间存在着一些潜在的重叠区域，如：DOM 技术可以用来改变网页的结构。在 CSS 身上也可以找到这种技术相互重叠的例子。诸如 :hover 和 :focus 之类的预定义符号（伪 class 属性） 使我们可以根据用户触发事件来改变呈现效果。改变元素的呈现效果当然是表示层的“势力范围”，但对用户触发事件做出反应却是行为层的领地。表示层和行为层 的这种重叠形成了一个灰色地带。

伪 class 属性是 CSS 正在深入 DOM 领地证据，但 DOM 在这方面也不是毫无作为。我们完全可以利用 DOM 技术把样式信息施加在 HTML 元素身上。

分离的效果要做到即使去掉表示层和行为层，文档的内容也依然可以访问，因为“内容才是一切”。而且网页的行为层 (javascript) 与其结构 (XHTML) 是彼此互不干扰的，不能混杂在一起。还要给行为层“预留退路”，要考虑到如果你的用户禁用了 Javascript 会怎样？是不可网页还可以正常运作。

6:css的基本语句构成是？

选择器{属性：赋值；}
8：你做的页面在哪些流览器测试过？这些浏览器的内核分别是什么?经常遇到的浏览器的兼容性有哪些？怎么会出现？解决方法是什么？

Firefox：Geckos内核

IE：Trident内核

Safari:Webkit内核

Chorome:Webkit内核
9.如何居中一个浮动元素?

嵌套DIV（外包围用absoult+负margin）
10.有没有关注HTML5和CSS3?如有请简单说一些您对它们的了解情况！
11.你怎么来实现下面这个设计图,主要讲述思路 （效果图省略）
13:如果让你来制作一个访问量很高的大型网站，你会如何来管理所有CSS文件、JS与图片？
14：你对前端界面工程师这个职位是怎么样理解的？它的前景会怎么样？
[Javascript]
1：js是什么，js和html 的开发如何结合？
2.怎样添加、移除、移动、复制、创建和查找节点
3.怎样使用事件以及IE和DOM事件模型之间存在哪些主要差别
4.面向对象编程:b怎么继承a
5.看看下面alert的结果是什么
view sourceprint?1.function b(x, y, a) {
.arguments[2] = 10;
.alert(a);
}
b(1, 2, 3);
如果函数体改成下面，结果又会是什么？
a = 10;
alert(arguments[2] );
6.请编写一个JavaScript函数 parseQueryString，它的用途是把URL参数解析为一个对象
var obj = parseQueryString(url);
alert(obj.key0)  // 输出0
7.ajax是什么?  ajax的交互模型? 同步和异步的区别? 如何解决跨域问题?
8.什么是闭包？下面这个ul，如何点击每一列的时候alert其index?
<ul id=”test”>
<li>这是第一条</li><li>这是第二条</li><li>这是第三条</li>
</ul>
9.最近看的一篇Javascript的文章是？
10.常使用的库有哪些？常用的前端开发工具？开发过什么应用或组件？
11.说说YSlow(可以详细一点)

上机试题

利用三个div做一个十字架 要求：屏幕绝对居中（包括改变浏览器分辨率）

语言栏(仿淘宝效果)

面包屑\幻灯片\手风琴\三选一

转载于:https://www.cnblogs.com/yuchav/archive/2011/10/19/2217619.html