前端开发面试题3-笔试-白红宇

前端开发面试题3-笔试

阅读量：5263 次

发布时间：2019-06-14

本文共 4615 字，大约阅读时间需要 15 分钟。

帮助朋友们面试成功嘻嘻。

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

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

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

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

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

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

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

9.如何居中一个浮动元素?

10.有没有关注HTML5和CSS3?如有请简单说一些您对它们的了解情况！

11.你怎么来实现下面这个设计图,主要讲述思路（效果图省略）

13:如果让你来制作一个访问量很高的大型网站，你会如何来管理所有CSS文件、JS与图片？

14：你对前端界面工程师这个职位是怎么样理解的？它的前景会怎么样？

1. Doctype? 严格型与框架型-如何触发这两种模式，区分它们有何意义?

回答：在严格模式下，一个最简单的区别就是，IE的盒模型将遵循标准。

IE 6,7,8 触发混杂模式的办法，一是不加DTD，二是就算加了DTD，再加点其他内容也会触发混杂模式。2：行内元素有哪些？块级元素有哪些？CSS的盒模型？

回答：

内联元素(inline element)* a - 锚点* abbr - 缩写* acronym - 首字* b - 粗体(不推荐)* big - 大字体* br - 换行* em - 强调

* font - 字体设定(不推荐)* i - 斜体* img - 图片* input - 输入框* label - 表格标签* s - 中划线(不推荐)* select - 项目选择

* small - 小字体文本* span - 常用内联容器，定义文本内区块* strike - 中划线* strong - 粗体强调* sub - 下标

* sup - 上标

* textarea - 多行文本输入框

* tt - 电传文本

* u - 下划线

* var - 定义变量

块级元素

* address - 地址

* blockquote - 块引用

* center - 举中对齐块

* dir - 目录列表

* div - 常用块级容易，也是css layout的主要标签

* dl - 定义列表

* fieldset - form控制组

* form - 交互表单

* h1 - 大标题

* h2 - 副标题

* h3 - 3级标题

* h4 - 4级标题

* h5 - 5级标题

* h6 - 6级标题

* hr - 水平分隔线

* isindex - input prompt

* menu - 菜单列表

* noframes - frames可选内容，（对于不支持frame的浏览器显示此区块内容

* noscript - ）可选脚本内容（对于不支持script的浏览器显示此内容）

* ol - 排序表单

* p - 段落

* pre - 格式化文本

* table - 表格

* ul - 非排序列表

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

回答：有三种

1）link方法

2）使用@import引入

<!--

　　@import url(css/example.css);

-->

</STYLE>

3）页面直接加样式

例如使用<span></span>标记引入样式

差别1：老祖宗的差别。link属于XHTML标签，而@import完全是CSS提供的一种方式。

除了可以加载CSS外，还可以做很多其它的事情，比如定义RSS，定义等，@import就只能加载CSS了。

差别2：加载顺序的差别。当一个页面被加载的时候（就是被浏览者浏览的时候），link引用的CSS会同时被加载，而@import引用的CSS会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式（就是闪烁），网速慢的时候还挺明显（梦之都加载CSS的方式就是使用@import，我一边下载一边浏览梦之都网页时，就会出现上述问题）。

差别3：兼容性的差别。由于提出的所以老的浏览器不支持，@import只有在IE5以上的才能识别，而link标签无此问题。

差别4：使用dom控制样式时的差别。当使用javascript控制dom去改变样式的时候，只能使用link标签，因为@import不是dom可以控制的。

大致就这几种差别了（如果还有什么差别，大家告诉我，我再补充上去），其它的都一样，从上面的分析来看，还是使用link标签比较好。

标准网页制作加载CSS文件时，还应该选定要加载的媒体（media），比如screen，print，

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

回答：ID 和 CLASS

Class 可继承

伪类A标签可以继承

列表 UL LI DL DD DT 可继承

优先级就近原则，样式定义最近者为准

载入样式以最后载入的定位为准

优先级为

!important > [ id > class > tag ]

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 会怎样？是不可网页还可以正常运作。

额？说了半天发现都是些理论的东西，算是些基本的思想吧，具体的大家要在不断的实践过程中去慢慢体会。

总之，这三种技术就像是一个凳子的三条腿，要想成为一名技能全面的 Web 技术师，就必须熟练掌握这三种技术，并知道每种技术最适用于哪一类问题。

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

回答：选择器、属性和属性值。

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

回答：涉及到效率一般就在IEtext firefox 3.5 软件上测试模拟 IE6 IE7 IE8 内核是IE7 的

浏览器PNG8格式背景图透明 JS 报错，浏览器本身的兼容问题有些电脑IE7 IE6 下正常，有些提示错误

9.如何居中一个浮动元素?

回答：设置容器的浮动方式为相对定位

然后确定容器的宽高比如宽500 高 300 的层

然后设置层的外边距

.Div

{

Width:500px ; height:300px;

Margin: -150px 0 0 -250px;

position: absolute;

left:50%;

top:50%;

}

10.有没有关注HTML5和CSS3?如有请简单说一些您对它们的了解情况！

回答：HTML5 没有关注 CSS3 有关注

比如对多背景图圆角投影等样式的关注

13:如果让你来制作一个访问量很高的大型网站，你会如何来管理所有CSS文件、JS与图片？

回答：涉及到人手、分工、同步；

先期团队必须确定好全局样式（globe.css），编码模式(utf-8) 等

编写习惯必须一致（例如都是采用继承式的写法，单样式都写成一行）；

标注样式编写人，各模块都及时标注（标注关键样式调用的地方）；

页面进行标注（例如页面模块开始和结束）；

CSS跟HTML 分文件夹并行存放，命名都得统一（例如style.css）

JS 分文件夹存放命民以该JS 功能为准英文翻译；

图片采用整合的 images.png png8 格式文件使用尽量整合在一起使用方便将来的管理

14：你对前端界面工程师这个职位是怎么样理解的？它的前景会怎么样？

回答：

是策划 UI设计需要转换成程序可实施中的必须的中间环节，这个环节直接关系到页面的正确高效稳定还原策划和UI 设计的效果，同时为程序套接做好程序表现基础载体。这个工作的前景，只能是深造技术流的，模块化管理，新的技术不断更新，对于向后兼容思维的逐步放弃，比如真的淘汰掉IE6后，向前的空间还是有的。前端开发工程师的前景是非常不错的。现在各大IT企业都在招聘这方面的人才。 WEB2.0的普及会更加促进本行业本工种的繁荣。

转载于:https://www.cnblogs.com/rhinemetal/archive/2012/06/28/2568553.html

你可能感兴趣的文章

php学习笔记（一）————php类的概念

查看>>

Centos 安装KScope1.6.2

查看>>