前端开发面试题和答案

时间 2019-11-14

原文原文链接

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

首先我讲讲如何触发两种模式： 加入xml头部声明能够触发IE浏览器的Quirks mode，触发以后，浏览器解析方式就和IE5.5同样，拥有IE5.5同样的bug和其余问题，行为（Javascript）也是如此。 IE6的触发 在XHTML的DOCTYPE前加入XML声明 <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> IE7的触发 在XML声明和XHTML的DOCTYPE之间加入HTML注释 <?xml version="1.0" encoding="utf-8"?> <!-- ... and keep IE7 in quirks mode --> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> IE6和IE7均可以触发的 在HTML4.01的DOCTYPE文档头部加入HTML注释 <!-- quirks mode --> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 其次是这样的意义 各个浏览器的混杂模式，基本就是各个浏览器的私有模式，不相互兼容。因此，除非是为了兼容的问题，好比你不想修改好久好久之前作的IE ONLY的网页，不然刻意触发混杂模式没有任何意义。

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

一.行内元素和块级元素有哪些？css

块级元素html


<address>	information on author
<blockquote>	long quotation
<button>	push button
<caption>	table caption
<dd>	definition description
<del>	deleted text
<div>	generic language/style container
<dl>	definition list
<dt>	definition term
<fieldset>	form control group
<form>	interactive form
<h1>	heading
<h2>	heading
<h3>	heading
<h4>	heading
<h5>	heading
<h6>	heading
<hr>	horizontal rule
<iframe>	inline subwindow
<ins>	inserted text
<legend>	fieldset legend
<li>	list item
<map>	client-side image map
<noframes>	alternate content container for non frame-based rendering
<noscript>	alternate content container for non script-based rendering
<object>	generic embedded object
<ol>	ordered list
<p>	paragraph
<pre>	preformatted text
<table>	table
<tbody>	table body
<td>	table data cell
<tfoot>	table footer
<th>	table header cell
<thead>	table header
<tr>	table row
<ul>	unordered list

行内元素前端


<a>	anchor
<abbr>	abbreviated form
<acronym>	acronym
<b>	bold text style
<bdo>	I18N BiDi over-ride
<big>	large text style
<br>	forced line break
<button>	push button
<cite>	citation
<code>	computer code fragment
<del>	deleted text
<dfn>	instance definition
<em>	emphasis
<i>	italic text style
<iframe>	inline subwindow
<img>	Embedded image
<input>	form control
<ins>	inserted text
<kbd>	text to be entered by the user
<label>	form field label text
<map>	client-side image map
<object>	generic embedded object
<q>	short inline quotation
<samp>	sample program output, scripts, etc.
<select>	option selector
<small>	small text style
<span>	generic language/style container
<strong>	strong emphasis
<sub>	subscript
<sup>	superscript
<textarea>	multi-line text field
<tt>	teletype or monospaced text style
<var>	instance of a variable or program argument

二.行内元素与块级元素有什么不一样？java

1.尺寸-块级元素和行内元素之间的一个重要的不一样点 web

行内元素和width面试

W3C CSS2 标准规定行内元素、非置换元素不会应用width属性。ajax

如下例子中，对行内元素<a>应用了width:200px,你能够看到，根本就没有什么效果。算法

行内元素和height

W3C CSS2 标准规定行内元素、非置换元素不会应用height属性，可是盒子高度能够经过line-height来指定。

如下例子，对行内元素<a>应用了height:50px,你能够看到什么效果都没。

行内元素和padding

你能够给行内元素设置padding，但只有padding-left和padding-right生效。

如下例子，行内元素<a>应用了padding:50px。你能够看到对左右的内容有影响，可是对上下没影响。

行内元素和marging

margin属性也是和padding属性同样，对行内元素左右有效，上下无效。

下面的例子,对<a>应用了margin:50px，你能够看到左右边缘是生效了可是内容上下却没有。

记住对行内元素

设置宽度width 无效。
设置高度height 无效，能够经过line-height来设置。
设置margin 只有左右margin有效，上下无效。
设置padding 只有左右padding有效，上下则无效。注意元素范围是增大了，可是对元素周围的内容是没影响的，看图上效果就知道了

盒子模型

W3C 组织建议把全部网页上的对像都放在一个盒(box)中，设计师能够经过建立定义来控制这个盒的属性，这些对像包括段落、列表、标题、图片以及层。盒模型主要定义四个区域：内容(content)、边框距(padding)、边界(border)和边距(margin)。对于初学者，常常会搞不清楚 margin，background-color，background- image，padding，content，border之间的层次、关系和相互影响。这里提供一张盒模型的3D示意图，但愿便于你的理解和记忆。

每一个HTML元素均可以看做一个装了东西的盒子，盒子里面的内容到盒子的边框之间的距离即填充（padding），盒子自己有边框（border），而盒子边框外和其余盒子之间，还有边界（margin）。

盒模型的实际宽度

关于盒模型，还有如下几点须要注意：

　　·对于块级元素（display:block），未浮动的垂直相邻元素的上边界和下边界会被压缩，例如：有上下2个元素，上元素的下边界为5px，下面元素的上边界为20px，则实际2个元素的间距为20px（2个边界值中较大的值）。如图所示。

注1. 块级元素（display： block）

每一个块级元素都从一个新行开始，并且其后的元素也需另起一行开始，标题、段落、表格、层、body等都是块级元素。块级元素只能做为其余块级元素的子元素，并且须要必定的条件。

　　·内联元素，例如<a>、<span>等，定义上下边界不会影响到行高（line-height），内联元素距离上一行元素的距离由行高决定，而不是填充或边界。

注2. 内联元素（display：inline）

内联元素不须要在新行内显示，并且也不强迫其后的元素换行，如a、em、span等都为内联元素。内联元素能够为任何其余元素的子元素。

　　·浮动元素（不管左或者右浮动）边界不压缩，且若浮动元素不声明宽度，则其宽度趋向于0，即压缩到其内容能承受的最小宽度。

　　·若是盒中没有内容，则即便定义了宽度和高度都为100%，实际上只占0%，所以不会被显示，此点在采起层布局的时候需特别注意。

　　·边界值可为负，其显示效果各浏览器可能不相同。

　　·填充值不可为负。

　　·边框默认的样式（border-style）为不显示（none）。

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

本质上，这两种方式都是为了加载CSS文件，但仍是存在着细微的差异。

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

link标签除了能够加载CSS外，还能够作不少其它的事情，好比定义RSS，定义rel链接属性等，@import就只能加载CSS了。

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

差异3：兼容性的差异。因为@import是CSS2.1提出的因此老的浏览器不支持，@import只有在IE5以上的才能识别，而link标签无此问题。

差异4：使用dom控制样式时的差异。当使用javascript控制dom去改变样式的时候，只能使用link标签，由于@import不是dom能够控制的。

大体就这几种差异了（若是还有什么差异，你们告诉我，我再补充上去），其它的都同样，从上面的分析来看，仍是使用link标签比较好。

标准网页制做加载CSS文件时，还应该选定要加载的媒体（media），好比screen，print，或者所有all等。这个我到CSS高级教程中再给你们介绍。

注：

1，网友comehope在留言中提出了另外一种区别。

差异5：@import能够在css中再次引入其余样式表，好比能够建立一个主样式表，在主样式表中再引入其余的样式表，如：

main.css
———————-
@import “sub1.css”;
@import “sub2.css”;

sub1.css
———————-
p {color:red;}

sub2.css
———————-
.myclass {color:blue}

这样更利于修改和扩展．

猴子提示：这样作有一个缺点，会对网站服务器产生过多的HTTP请求，之前是一个文件，而如今倒是两个或更多文件了，服务器的压力增大，浏览量大的网站仍是谨慎使用。有兴趣的能够观察一下像新浪等网站的首页或栏目首页代码，他们总会把css或js直接写在html里，而不用外部文件。

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

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

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

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

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

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

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

点评：css的兼容性也是你们关注的热点。你们必定要注意多测试。Javascript 多浏览器兼容性问题及解决方案

兼容性处理要点
一、DOCTYPE 影响 CSS 处理

二、FF: 设置 padding 后， div 会增长 height 和 width，但 IE 不会，故须要用 !important 多设一个 height 和 width

三、FF: 支持 !important， IE 则忽略，可用 !important 为 FF 特别设置样式

四、div 的垂直居中问题: vertical-align:middle; 将行距增长到和整个DIV同样高 line-height:200px; 而后插入文字，就垂直居中了。缺点是要控制内容不要换行

五、在mozilla firefox和IE中的BOX模型解释不一致致使相差2px解决方法：

div{margin:30px!important;margin:28px;}

注意这两个margin的顺序必定不能写反，!important这个属性IE不能识别，但别的浏览器能够识别。因此在IE下其实解释成这样：

div{maring:30px;margin:28px}

重复定义的话按照最后一个来执行，因此不能够只写margin:XXpx!important;

浏览器差别
一、ul和ol列表缩进问题

消除ul、ol等列表的缩进时，样式应写成：list-style:none;margin:0px;padding:0px;
其中margin属性对IE有效，padding属性对FireFox有效。

[注] 经验证，在IE中，设置margin:0px能够去除列表的上下左右缩进、空白以及列表编号或圆点，设置padding对样式没有影响；在 Firefox 中，设置margin:0px仅仅能够去除上下的空白，设置padding:0px后仅仅能够去掉左右缩进，还必须设置list- style:none才能去除列表编号或圆点。也就是说，在IE中仅仅设置margin:0px便可达到最终效果，而在Firefox中必须同时设置margin:0px、 padding:0px以及list-style:none三项才能达到最终效果。

二、CSS透明问题

IE：filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60)。
FF：opacity:0.6。
[注] 最好两个都写，并将opacity属性放在下面。

三、CSS圆角问题

IE：ie7如下版本不支持圆角。
FF： -moz-border-radius:4px，或者-moz-border-radius-topleft:4px;-moz- border- radius-topright:4px;-moz-border-radius-bottomleft:4px;-moz- border- radius- bottomright:4px;。
[注] 圆角问题是CSS中的经典问题，建议使用JQuery框架集来设置圆角，让这些复杂的问题留给别人去想吧。不过jQuery的圆角只看到支持整个区域的圆角，没有支持边框的圆角，不过这个边框的圆角能够经过一些简单的手段来实现，下次有机会介绍下。

四、cursor:hand VS cursor:pointer

问题说明：firefox不支持hand，但ie支持pointer ，二者都是手形指示。
解决方法：统一使用pointer。

五、字体大小定义不一样

对字体大小small的定义不一样，Firefox中为13px，而IE中为16px，差异挺大。

解决方法：使用指定的字体大小如14px。

并列排列的多个元素（图片或者连接）的div和div之间，代码中的空格和回车在firefox中都会被忽略，而IE中却默认显示为空格（约3px）。

六、CSS双线凹凸边框
IE：border:2px outset;。
FF： -moz-border-top-colors: #d4d0c8 white;-moz-border-left-colors: #d4d0c8 white;-moz-border-right-colors:#404040 #808080;-moz-border-bottom-colors:#404040 #808080;

浏览器bug
一、IE的双边距bug

设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。

解决方案：在这个div里面加上display:inline;

例如：

<#div id=”imfloat”>

相应的css为

如下为引用的内容：

复制代码代码以下:
#IamFloat{
float:left;
margin:5px;
display:inline;
}
#IamFloat{
float:left;
margin:5px;
display:inline;
}

关于CSS中的问题实在太多了，甚至一样的CSS定义在不一样的页面标准中的显示效果都是不同的。一个合乎发展的建议是，页面采用标准XHTML标准编写，较少使用table，CSS定义尽可能依照标准DOM，同时兼顾IE、Firefox、Opera等主流浏览器。不少状况下，FF和 Opera的CSS解释标准更贴近CSS标准，也更具备规范性。

二、IE选择符空格BUG
今天在给博客的段落样式设置首字符样式的时候发现，原来一个空格也可使样式失效。

请看如下代码：

<p>对于世界而言，你是一我的；可是对于某我的，你是他的整个世界。纵然伤心，也不要愁云满面，由于你不知是谁会爱上你的笑容。</p>
</body>
</html>
[/code]

复制代码代码以下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="//www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">

</style>
</head>
<body>
<p>对于世界而言，你是一我的；可是对于某我的，你是他的整个世界。纵然伤心，也不要愁云满面，由于你不知是谁会爱上你的笑容。</p>
</body>
</html>

这段代码对<p>的首字符样式定义在IE6上看是没有效果的（IE7没测试），而在p:first-letter和{font- size:300%}加上空格，也就是p:first-letter {font-size:300%}后，显示就正常了。可是一样的代码，在FireFox下看是正常的。按道理说，p:first- letter{font-size:300%}的写法是没错的。那么问题出在哪里呢？答案是伪类中的连字符”-”。IE有个BUG，在处理伪类时，若是伪类的名称中带有连字符”-”，伪类名称后面就得跟一个空格，否则样式的定义就无效。而在FF中，加不加空格均可以正常处理。

对css缩写的支持问题：
不管是ie 仍是ff对css的缩写都有一小点问题
好比
border: 0xp solid #fff;两个浏览器支持都没有问题
但对于四个边的magin不一样状况下，就不能用这种缩写了，不管是ie仍是ff又会出现边界解释错误，而致使页面变形
正确缩写：
border-width:0px 1px 2px 3px;
border-style:solid;
border-color:#fff;
第二点是 ie对于css的magin padding 等默认值为0px，但ff却不同，为了保持外观的统一性，即便padding为0你也要写上，以避免ff在浏览中的错位。

IE与Firefox的CSS兼容大全
1.DOCTYPE 影响 CSS 处理
2.FF: div 设置 margin-left, margin-right 为 auto 时已经居中, IE 不行
3.FF: body 设置 text-align 时, div 须要设置 margin: auto(主要是 margin-left,margin-right) 方可居中
4.FF: 设置 padding 后, div 会增长 height 和 width, 但 IE 不会, 故须要用 !important 多设一个 height 和 width
5.FF: 支持 !important, IE 则忽略, 可用 !important 为 FF 特别设置样式，值得注意的是，必定要将xxxx !important 这句放置在另外一句之上
6.div 的垂直居中问题: vertical-align:middle; 将行距增长到和整个DIV同样高 line-height:200px; 而后插入文字，就垂直居中了。缺点是要控制内容不要换行
7.cursor: pointer 能够同时在 IE FF 中显示游标手指状， hand 仅 IE 能够
8.FF: 连接加边框和背景色，需设置 display: block, 同时设置 float: left 保证不换行。参照 menubar, 给 a 和 menubar 设置高度是为了不底边显示错位, 若不设 height, 能够在 menubar 中插入一个空格。
9.在mozilla firefox和IE中的BOX模型解释不一致致使相差2px解决方法：div{margin:30px!important;margin:28px;}
注意这两个margin的顺序必定不能写反，据阿捷的说法!important这个属性IE不能识别，但别的浏览器能够识别。因此在IE下其实解释成这样：div{maring:30px;margin:28px}
重复定义的话按照最后一个来执行，因此不能够只写margin:XXpx!important;

10.IE5 和IE6的BOX解释不一致
IE5下div{width:300px;margin:0 10px 0 10px;}
div 的宽度会被解释为300px-10px(右填充)-10px(左填充)最终div的宽度为280px，而在IE6和其余浏览器上宽度则是以 300px+10px(右填充)+10px(左填充)=320px来计算的。这时咱们能够作以下修改div{width:300px!important;width :340px;margin:0 10px 0 10px}
关于这个是什么我也不太明白，只知道IE5和firefox都支持但IE6不支持，若是有人理解的话，请告诉我一声，谢了！：）

11.ul标签在Mozilla中默认是有padding值的,而在IE中只有margin有值因此先定义ul{margin:0;padding:0;}
就能解决大部分问题
注意事项：
一、float的div必定要闭合。
例如：(其中floatA、floatB的属性已经设置为float:left;)<#div id=\"floatA\" >
<#div id=\"floatB\" >
<#div id=\"NOTfloatC\" >
这里的NOTfloatC并不但愿继续平移，而是但愿往下排。
这段代码在IE中毫无问题，问题出在FF。缘由是NOTfloatC并不是float标签，必须将float标签闭合。
在<#div class=\"floatB\">
<#div class=\"NOTfloatC\">
之间加上<#div class=\"clear\">
这个div必定要注意声明位置，必定要放在最恰当的地方，并且必须与两个具备float属性的div同级，之间不能存在嵌套关系，不然会产生异常。
而且将clear这种样式定义为为以下便可：.clear{
clear:both;}
此外，为了让高度能自动适应，要在wrapper里面加上overflow:hidden;

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

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

而后肯定容器的宽高好比宽500 高 300 的层

而后设置层的外边距

Div{

Width:500px ;

height:300px;

Margin: -150px 0 0 -250px;

position: absolute;

left:50%;

top:50%;

}

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

在HTML 5平台上，视频，音频，图象，动画，以及同电脑的交互都被标准化。那么咱们来看一下HTML5的技术概览有哪些：
HTML5新增和移除的元素
HTML5新增了不少多媒体和交互性元素如video, audio，在HTML4当中若是要嵌入一个视频或是音频的话须要引入一大段的代码，还有兼容各个浏览器，而HTML5只须要经过引入一个标签就能够，就像img标签同样方便。

HTML5对表单的支持

HTML5 提供了强大的控件类型如url, email, date, tel等，强大的约束属性，如required表示必填，文件上传的accept属性，以及一些表单重复元素模型的支持，HTML5在提交表单的时候还可以设置提交的方式为XML提交方式，这样服务器端接收到的数据将是XML格式，HTML5的表单被定义为“Web Forms 2.0”，目前opera9.5+对Web Forms 2.0的支持较为完美。

HTML5 DOM变化
HTML5的Javascript APIs

HTML5在Javascript上面新增了哪些API呢？
Video/Audio: HTML5为Video和Audio提供了API来让开发者控制他们本身的用户界面，如能够播放或暂停媒体内容。

CSS3

CSS3对于咱们Web开发者来讲不仅是新奇的技术，更重要的是这些全新概念的web应用给咱们带来更多无限的可能性，也极大地提升了咱们的开发效率。咱们将没必要再依赖图片或者Javascript 去完成圆角、多背景、用户自定义字体、3D动画、渐变、盒阴影、文字阴影、透明度等提升Web设计质量的特点应用。

CSS3对于动画的支持

CSS3 支持的动画类型有：transform(变换)、transition(过渡)和animation(动画)。你能够对特定的属性设置 transition，transiton和animation的区别不大，animation的动画是本身定义的，面向的更多的是脚本开发者，每每更加复杂。

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的交互模型? 同步和异步的区别? 如何解决跨域问题?

ajax(动态网站静态化)伴随的goole 的推进，愈来愈多的站点开始使用了，在开大ajax(动态网站静态化)程序的时候会遇到不少的问题，主要有如下几个方面：

1.跨浏览器问题
2.历史后退状态问题

3.跨域问题

跨浏览器的问题由于如今有不少的开元的框架已经解决了，咱们无需为此而烦恼。

历史后退状态问题咱们可使用一个数组来保存历史纪录，而后把这些数据村到历史对象中去，中的也能够解决，而且还有不少的开元框架给与支持，这样问题就不是很大。

跨域的问题就不是很好的解决，可是仍是有办法的，一下给出一些基本的解决方案供你们选择：

    1.使用代理，你可使用web端的程序编写代理程序，把全部的ajax(动态网站静态化)请求的数据进行转发，web程序可使php(作为如今的主流开发语言)，jsp(SUN企业级应用的首选)，asp等全部的编程语言。相信你们对这种方式必定很熟悉，这里就不详细的介绍了。
    2.使用iframe的方式来定势的刷新叶面，这种方式只是取得数据来显示，并不能真正的和求得的数据进行交互，转化成本页面的动态数据，不是很可取，应用也不是不少，我也忽略不去讨论了。
    3.使用apache(Unix平台最流行的WEB服务器平台)的代理功能，主要就是apache(Unix平台最流行的WEB服务器平台)的方向代理，或者是url从定向，你也能够把其余的站点直接的挂在本身的网站上，这样的方式可能会友邦权的问题，多的九部介绍了，有兴趣的本有能够本身实践如下。
    4.使用《script》标签的方式，这样的话就能够保正使用真正的ajax(动态网站静态化)来跨域，而且可使用返回来的数据，发誓很简单，在咱们的后台程序处理后的到的结果都直接的用javascript 的方式返回，在咱们的html中直接的使用返回数据的变量就能够了一个简单的例子

8.什么是闭包？下面这个ul，如何点击每一列的时候alert其index?
<ul id=”test”>
<li>这是第一条</li><li>这是第二条</li><li>这是第三条</li>
</ul>

9.最近看的一篇Javas

cript的文章是？

10.常使用的库有哪些？经常使用的前端开发工具？开发过什么应用或组件？
pageSpeed .Yslow,Fiddler、fireBug
11.说说YSlow(能够详细一点)

这个插件能够分析网站的页面，并告诉你为了提升网站性能，如何基于某些规则而进行优化。

网页制做方向的题目

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设置透明属性<param name="wmode" value="transparent" />或者<param name="wmode" value="opaque" />

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

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

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

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

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

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

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

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

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

h、提升你的职场竞争实力(事实上也就是下降失业的风险)。

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

一、改版的时候更方便只要改css文件。二、页面加载速度更快、结构化清晰、页面显示简洁。三、表现与结构相分离。四、易于优化（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设置透明属性

补充:

一、margin-left:10px在FF和IE6下显示问题。IE6显示 20px,FF显示10px。
用!important就能够解决了。margin-left:10px !important;margin-left:5px;
二、cursor:hand在FF不显示小手，如何解决？
一句话：cursor;pointer;
三、要求在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必须加上<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”　”http://www.w3.org/TR/html4/loose.dtd“>要不仍是不认。

四、在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

例如:

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

3.为何FF下文本没法撑开容器的高度?

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

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

4.为何web标准中IE没法设置滚动条颜色了?

原来样式设置：

解决办法是将body换成html

5.为何没法定义1px左右高度的容器?

IE6下这个问题是由于默认的行高形成的，解决的方法也有不少，例如：overflow:hidden | zoom:0.08 | line-height:1px

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

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

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

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

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

假定有以下状况：

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

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