首页 > 代码库 > web前端工程师 面试题

web前端工程师 面试题

  今天刚结束一场面试(含笔试),对自己的表现不太满意,感觉没有发挥好应有的水平,也只能怪自己平时没有及时积累和整理知识,准备也不充分。

  就不扯那么多了,下面是我面试时,没能答上或者觉自己回答的不够好的题目。

  

1.position 属性规定元素的定位类型

描述
absolute

生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。

元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

fixed

生成绝对定位的元素,相对于浏览器窗口进行定位。

元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

relative

生成相对定位的元素,相对于其正常位置进行定位。

因此,"left:20" 会向元素的 LEFT 位置添加 20 像素。

static默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。
inherit规定应该从父元素继承 position 属性的值。

  

 

 

 

 

 

 

 

 

2.border-width:

例子 1

border-width:thin medium thick 10px;

  • 上边框是细边框
  • 右边框是中等边框
  • 下边框是粗边框
  • 左边框是 10px 宽的边框

例子 2

border-width:thin medium thick;

  • 上边框是 10px
  • 右边框和左边框是中等边框
  • 下边框是粗边框

 

3.引用css外部文件的方式有哪些?有什么区别?

  使用@import引用外部CSS文件
  使用link引用外部CSS文件 推荐此方法

 

区别1:link是XHTML标签,除了加载CSS外,还可以定义RSS等其他事务;@import属于CSS范畴,只能加载CSS。

区别2:link引用CSS时,在页面载入时同时加载;@import需要页面网页完全载入以后加载。

区别3:link是XHTML标签,无兼容问题;@import是在CSS2.1提出的,低版本的浏览器不支持。

区别4:ink支持使用Javascript控制DOM去改变样式;而@import不支持。

 

4.主流浏览器的前缀是什么?

Firefox:-moz-box-shadow

Safari:-webkit-box-shadow

Opera:-o-box-shadow

IE:-ms-box-shadow

5.浏览器兼容问题的原因?解决方法?

  因为不同浏览器使用内核及所支持的HTML(标准通用标记语言下的一个应用)等网页语言标准不同;以及用户客户端的环境不同(如分辨率不同)造成的显示效果不能达到理想效果。最常见的问题就是网页元素位置混乱,错位。

  目前暂没有统一的能解决这样的工具,最普遍的解决办法就是不断的在各浏览器间调试网页显示效果,通过对css样式控制以及通过脚本判断并赋予不同浏览器的解析标准。

 

6.影响网页加载速度的因素有哪些及优化方案?

  答案引用至:http://blog.sina.com.cn/s/blog_6116a35301012ux2.html

 

7.设计模式有哪些?

可以参照《head frist 设计模式》

  一:创建型模式
          工厂方法,抽象工厂,建造者模式,单态模式,原型模式
  二:构造型模式
          适配器模式,桥接模式,组合模式,装饰模式,外观模式
           享元模式,代理模式
  三:行为型模式
           责任链模式,命令模式,解释器模式,迭代器模式,中介者模式
           备忘录模式,观察者模式,状态模式,策略模式,模版方法,访问模式

 

8.B/S 您是用几层结构来开发,每一层之间的关系以及为什么要这样分层?

  一般都是三层,表现层(UI)、业务逻辑层(BLL)、数据访问层(DAL)。

  分三层是为了使项目架构体系更加清晰,而且项目参与人员的分工也可以更加明确,也有利于项目后期维护,这些都是分层的优点。

  至于关系么,表现层负责与用户交互(数据交互),业务逻辑层就是表现层与数据访问层的中间人了,指派数据访问层进行表现层请求的逻辑性的业务处理,而数据访问层就负责数据的直接操作了(一般只进行直接的数据操作,最好别在这层处理逻辑方面的处理,要不然与业务层交错后后期的维护很头疼的)。

9.什么是JS跨域?跨域的解决方案?

   答案引用至:http://blog.csdn.net/macky0668/article/details/6247803

 

 最后,很感激面试的考官,问的问题都对我很有帮助,还有谢谢人事的X小姐,人很好,谢谢。