网页重构面试笔试题

1.什么是网站重构？div+css的布局较table布局有什么优点？
2.如何理解css盒模型？
3.平时做网页经常使用哪些hack?
4.如何理解表现与内容相分离？
5.如何解决ie6的双边距问题？
6.如何定义高度为1px的容器？{heigh：1px; width:10px; background:#000; overflow:hidden}ie6下这个问题是默认行高造成的，overflow:hidden | zoom:0.08 | line-height:1px这样也可以解决
7.如何实现一个层在浏览器中垂直左右居中？margin：auto
8.如何解决ie6的3像素问题？_zoom:1; margin-left: value; _margin-left:value-3px;
9.为什么FF下文本无法撑开容器的高度?如何解决？ 清楚浮动
10.怎么样才能让层显示在FLASH之上呢? 解决的办法是给FLASH设置透明属性<paramname="wmode" value="transparent" />或者<paramname="wmode" value="opaque" />

1、答：把"未采用CSS，大量使用HTML进行定位、布局，或者虽然已经采用CSS，但是未遵循HTML结构化标准的站点"变成"让标记回归标记的原本意义。通过在HTML文档中使用结构化的标记以及用CSS控制页面表现，使页面的实际内容与它们呈现的格式相分离的站点。"的过程就是网站重构

网站为什么要进行重构（网站重构的好处）

a、使页面加载得更快速；

b、降低带宽带来的费用：节约成本；

c、让你在修改设计时更有效率而代价更低；

d、帮助你的整个站点保持视觉的一致性；

e、更利于搜索引擎的检索（符合SEO的规范）；

f、令站点更容易被各种浏览器和用户访问（包括手机、PDA和残障人士使用的文字浏览器）；

g、兼容不容忽视的Mozilla系浏览器（Firefox份额）；

div+css的布局较table布局有什么优点:

1、改版的时候更方便 只要改css文件。2、页面加载速度更快、结构化清晰、页面显示简洁。3、表现与结构相分离。4、易于优化（seo）搜索引擎更友好，排名更容易靠前。

答：2.如何理解css盒模型 ： 每个HTML元素都是长方形盒子 外边局(margin)、内边距(padding)、边框(border);

答：3.平时做网页用的css hack

  Ie6* _; ie7 *, *+,!important; ff !important.

答：4.表现与结构相分离简单的说就是HTML中只有标签元素 表现完全是由CSS文件控制的

答：5.解决ie6双边距问题块级元素就加display：inline；行内元素转块级元素display：inline后面再加display：table

6.如何定义高度为1px的容器？

{heigh：1px; width:10px;background:#000;overflow:hidden}ie6下这个问题是默认行高造成的，overflow:hidden | zoom:0.08 | line-height:1px这样也可以解决

7.如何实现一个层在 浏览器中垂直左右居中？

margin：auto

8.如何解决ie6的3像素 问题？

_zoom:1; margin-left: value;_margin-left: value-3px;

9.为什么FF下文本无法撑开容器的高度?如何解决？

清除浮动 .clear{ clear:both;height:0px; overflow:hidden;}

10.怎么样才能让层显示在FLASH之上呢?

解决的办法是给FLASH设置透明属性

<param name="wmode"value="transparent" />或者<param name="wmode" value="opaque"/>

补充:

1、margin-left:10px在FF和IE6下显示问题。IE6显示20px,FF显示10px。
  用!important就可以解决了。margin-left:10px!important;margin-left:5px;
2、cursor:hand在FF不显示小手，如何解决？
  一句话：cursor;pointer;
3、要求在FF显示height为20px;IE6下显示height为25px;IE7下显示height为30px.

#test{height:20px;}    *html#test{height:25px;}    *+html #test{height:30px;}

   这个以前我们说过，请参考【IE6的疯狂Bug之九】解决CSS兼容性最常用的"Haker"   三个就写上，FF只认识第一个#test,IE6只认识第二个*html #test，IE7只认识第三个*+html#test   PS：DTD必须加上<!DOCTYPEHTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”　”http://www.w3.org/TR/html4/loose.dtd“>要不还是不认。

4、在IE中内容会自适应高度，而FF不会自适应高度。
在要自适应高度的层中加一个层，样式为 .clear{clear:both;font-size:0px;height:1px}， 这样解决有一个小小的问题，高度会多一个像素。还有一种解决方法，给当前层加上一个伪类 #test:after {content: "."; display:block;   height: 0;clear: both; visibility: hidden;}

1.超链接访问过后hover样式就不出现的问题?

被点击访问过的超链接样式不在具有hover和active了,解决方法是改变CSS属性的排列顺序: L-V-H-A

2.IE6的双倍边距BUG

例如:

<style type="text/css">    body {margin:0}    div { float:left; margin-left:10px; width:200px; height:200px;border:1px solid red } </style>

浮动后本来外边距10px,但IE解释为20px,解决办法是加上display:inline

3.为什么FF下文本无法撑开容器的高度?

标准浏览器中固定高度值的容器是不会象IE6里那样被撑开的,那我又想固定高度，又想能被撑开需要怎样设置呢？办法就是去掉height设置min-height:200px; 这里为了照顾不认识min-height的IE6 可以这样定义：

div { height:auto!important; height:200px; min-height:200px;}

4.为什么web标准中IE无法设置滚动条颜色了?

原来样式设置：

<style type="text/css"> body { scrollbar-face-color:#f6f6f6;scrollbar-highlight-color:#fff; scrollbar-shadow-color:#eeeeee;scrollbar-3dlight-color:#eeeeee; scrollbar-arrow-color:#000;scrollbar-track-color:#fff; scrollbar-darkshadow-color:#fff;} </style>

解决办法是将body换成html

5.为什么无法定义1px左右高度的容器?

IE6下这个问题是因为默认的行高造成的，解决的方法也有很多，例如：overflow:hidden | zoom:0.08 |line-height:1px

6.怎么样才能让层显示在FLASH之上呢?

解决的办法是给FLASH设置透明:

<param name="wmode" value="transparent"/>

7.怎样使一个层垂直居中于浏览器中?

<style type="text/css"> <!-- div { position:absolute; top:50%; left:50%; margin:-100px 0 0 -100px; width:200px; height:200px; border:1px solid red; } --> </style>

这里使用百分比绝对定位，与外补丁负值的方法，负值的大小为其自身宽度高度除以二

8、firefox嵌套div标签的居中问题的解决方法

假定有如下情况：

<div id="a">    <div id="b"></div> </div>

如果要实现b在a中居中放置，一般只需用CSS设置a的text-align属性为center。这样的方法在IE里看起来一切正常；但是在Firefox中b却会是居左的。

解决办法就是设置b的横向margin为auto。例如设置b的CSS样式为：margin: 0 auto;。

前端工程师面试题

[HTML && CSS]
1.Doctype? 严格模式与混杂模式-如何触发这两种模式，区分它们有何意义?
2：行内元素有哪些？块级元素有哪些？CSS的盒模型？
3.CSS引入的方式有哪些? link和@import的区别是?
4.CSS选择符有哪些？哪些属性可以继承？优先级算法如何计算？内联和important哪个优先级高？
5:前端页面有哪三层构成，分别是什么？作用是什么？
6:css的基本语句构成是？
8：你做的页面在哪些流览器测试过？这些浏览器的内核分别是什么?经常遇到的浏览器的兼容性有哪些？怎么会出现？解决方法是什么？
9.如何居中一个浮动元素?
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(可以详细一点)

网页重构面试笔试题,古老的榕树,5-wow.com