CSS的盒子模型两种: IE 盒子模型、标准 W3C 盒子模型；IE 的content部分包含了
border 和 padding;
盒模型： 内容(content)、填充(padding)、边界(margin)、 边框(border).
二.行内元素与块级元素有什么不同？
不同：行内元素是一个一个挨着的，块级元素是占据一整行。
记住对行内元素
设置宽度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等都是块级元素。块级元素只能作为其他块级元素的子元素，而且需要一
定的条件。
内联元素，例如、等，定义上下边界不会影响到行高（line-height），
内联元素距离上一行元素的距离由行高决定，而不是填充或边界。
注2. 内联元素（display：inline）
内联元素不需要在新行内显示，而且也不强迫其后的元素换行，如a、em、span等
都为内联元素。内联元素可以为任何其他元素的子元素。
·浮动元素（无论左或者右浮动）边界不压缩，且若浮动元素不声明宽度，则其宽度趋
向于0，即压缩到其内容能承受的最小宽度。
·如果盒中没有内容，则即使定义了宽度和高度都为100%，实际上只占0%，因此不
会被显示，此点在采取层布局的时候需特别注意。
·边界值可为负，其显示效果各浏览器可能不相同。
·填充值不可为负。
·边框默认的样式（border-style）为不显示（none）。
引入的方式有哪些? link和@import的区别是?
本质上，这两种方式都是为了加载CSS文件，但还是存在着细微的差别。
1) link属于XHTML标签，而@import完全是CSS提供的一种方式。link标签除
了可以加载CSS外，还可以做很多其它的事情，比如定义RSS，定义rel连接属
性等，@import就只能加载CSS了。
2) 加载顺序的差别。当一个页面被加载的时候（就是被浏览者浏览的时候），link
引用的 CSS会同时被加载，而@import引用的CSS会等到页面全部被下载完
再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式（就是
闪烁），网速慢的时候还挺明显。
3) 兼容性的差别。由于@import是CSS2.1提出的所以老的浏览器不支持，
@import只有在IE5以上的才能识别，而link标签无此问题。
4) 使用dom控制样式时的差别。当使用javascript控制dom去改变样式的时候，
只能使用link标签，因为@import不是dom可以控制的。
5) link方式的样式的权重 高于@import的权重。
注：
1，网友提出了另一种区别。
差别6：@import可以在css中再次引入其他样式表，比如可以创建一个主样式表，
在主样式表中再引入其他的样式表，如：
———————-
@import “”;
@import “”;
———————-
p {color:red;}
———————-
.myclass {color:blue}
这样更利于修改和扩展．
提示：这样做有一个缺点，会对网站服务器产生过多的HTTP请求，以前是一个文件，
而现在却是两个或更多文件了，服务器的压力增大，浏览量大的网站还是谨慎使用。有兴趣
的可以观察一下像新浪等网站的首页或栏目首页代码，他们总会把css或js 直接写在html
里，而不用外部文件。
选择符有哪些？哪些属性可以继承？优先级算法如何计算？内联和important哪个
优先级高？
1) id选择器（ # myid）
2) 类选择器（.myclassname）
3) 标签选择器（div, h1, p）
4) 相邻选择器（h1 + p）
5) 子选择器（ul < li）
6) 后代选择器（li a）
7) 通配符选择器（ * ）
8) 属性选择器（a[rel = "external"]）
9) 伪类选择器（a: hover, li: nth - child）
可继承： font-size font-family color, UL LI DL DD DT;
不可继承 ：border padding margin width height ;
优先级就近原则，样式定义最近者为准;
载入样式以最后载入的定位为准;
优先级为:
!important > id > class > tag
important 比 内联优先级高
CSS3新增伪类举例：
1) p:first-of-type 选择属于其父元素的首个
元素的每个
元素。
2) p:last-of-type 选择属于其父元素的最后
元素的每个
元素。
3) p:only-of-type 选择属于其父元素唯一的
元素的每个
元素。
4) p:only-child 选择属于其父元素的唯一子元素的每个
元素。
5) p:nth-child(2) 选择属于其父元素的第二个子元素的每个
元素。
6) :enabled、:disabled 控制表单控件的禁用状态。
7) :checked，单选框或复选框被选中。
如何居中div,如何居中一个浮动元素?
1) 给div设置一个宽度，然后添加margin:0 auto属性
div{
width:200px;
margin:0 auto;
}
2) 居中一个浮动元素 ( 确定容器的宽高 宽500 高 300 的层,设置层的外边距 )
.div {
Width:500px ; height:300px;//高度可以不设
Margin: -150px 0 0 -250px;
position:relative;相对定位
background-color:pink;//方便看效果
left:50%;
top:50%;
}
前端页面有哪三层构成，分别是什么？作用是什么？
最准确的网页设计思路是把网页分成三个层次，即：结构层、表示层、行为层。
网页的结构层（structural layer）
由 HTML 或 XHTML 之类的标记语言负责创建。标签，也就是那些出现在尖括号里
的单词，对网页内容的语义含义做出了描述，但这些标签不包含任何关于如何显示有关内容
的信息。例如，P 标签表达了这样一种语义：“这是一个文本段。”
网页的表示层（presentation layer）
由 CSS 负责创建。 CSS 对“如何显示有关内容”的问题做出了回答。
网页的行为层（behavior layer）
负责回答“内容应该如何对事件做出反应”这一问题。这是 Javascript 语言和 DOM
主宰的领域。
8：你做的页面在哪些流览器测试过？这些浏览器的内核分别是什么?经常遇到的浏览器的
兼容性有哪些？怎么会出现？解决方法是什么？
IE浏览器的内核Trident、 Mozilla的Gecko、google的WebKit、Opera内核Presto；
兼容性处理要点
DOCTYPE 影响 CSS 处理
1) png24为的图片在iE6浏览器上出现背景，解决方案是做成PNG8
2) 浏览器默认的margin和padding不同。解决方案是加一个全局
*{margin:0;padding:0;}来统一。
3) IE6双边距bug:块属性标签float后，又有横行的margin情况下，在ie6显示margin
比设置的大。浮动ie产生的双倍距离 #box{ float:left; width:10px; margin:0 0
0 100px;}
这种情况之下IE会产生20px的距离，解决方案是在float的标签样式控制中加入 —
—_display:inline;将其转化为行内属性。(_这个符号只有ie6会识别)
首先，巧妙的使用“9”这一标记，将IE游览器从所有情况中分离出来。
接着，再次使用“+”将IE8和IE7、IE6分离开来，这样IE8已经独立识别。
css
.bb{
background-color:#f1ee18;/*所有识别*/
.background-color:#00deff9; /*IE6、7、8识别*/
+background-color:#a200ff;/*IE6、7识别*/
_background-color:#1e0bd1;/*IE6识别*/
}
4) IE下,可以使用获取常规属性的方法来获取自定义属性,也可以使用getAttribute()获
取自定义属性;Firefox下,只能使用getAttribute()获取自定义属性. 解决方法:统一
通过getAttribute()获取自定义属性。
5) IE下,even对象有x,y属性,但是没有pageX,pageY属性; Firefox下,event对象有
pageX,pageY属性,但是没有x,y属性。
6) （条件注释）缺点是在IE浏览器下可能会增加额外的HTTP请求数。
7) Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示, 可通过加
入 CSS 属性 -webkit-text-size-adjust: none; 解决.
8) 超链接访问过后hover样式就不出现了 被点击访问过的超链接样式不在具有hover
和active了解决方法是改变CSS属性的排列顺序:L-V-H-A : a:link {} a:visited {}
a:hover {} a:active {}
9) FF: 设置 padding 后， div 会增加 height 和 width，但 IE 不会，故需要
用 !important多设一个 height和width
10) FF: 支持!important， IE 则忽略，可用!important 为 FF 特别设置样式div
的垂直居中问题: vertical-align: middle; 将行距增加到和整个DIV一样高
line-height:200px; 然后插入文字，就垂直居中了。缺点是要控制内容不要换行
11) 在FF和IE中的BOX模型解释不一致导致相差2px解决方法：
div{margin:30px!important;margin:28px;}
注意这两个margin的顺序一定不能写反，!important这个属性IE不能识别，但别
的浏览器可以识别。所以在IE下其实解释成这样：
div{maring:30px;margin:28px}
重复定义的话按照最后一个来执行，所以不可以只写margin:XXpx!important;
浏览器差异
1、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三项才能达到最终效果。
2、CSS透明问题
IE：filter:progid:(style=0,opacity=60)。
FF：opacity:0.6。
[注] 最好两个都写，并将opacity属性放在下面。
3、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的圆角只看到支持整个区域的圆角，没有支持边框的圆
角，不过这个边框的圆角可以通过一些简单的手段来实现，下次有机会介绍下。
4、cursor:hand VS cursor:pointer
问题说明：firefox不支持hand，但ie支持pointer ，两者都是手形指示。
解决方法：统一使用pointer。
5、字体大小定义不同
对字体大小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;
有没有关注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?on 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(0) // 输出0
是什么? ajax的交互模型? 同步和异步的区别? 如何解决跨域问题?
ajax(动态网站静态化)伴随的google 的推动，越来越多的站点开始使用了，在开大
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?
9.最近看的一篇Javascript的文章是？
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设置透明属性
或者
value="opaque" />
1、答：把"未采用CSS，大量使用HTML进行定位、布局，或者虽然已经采用CSS，但是
未遵循HTML结构化标准的站点"变成"让标记回归标记的原本意义。通过在HTML文档中
使用结构化的标记以及用CSS控制页面表现，使页面的实际内容与它们呈现的格式相分离
的站点。"的过程就是网站重构
网站为什么要进行重构（网站重构的好处）
a、使页面加载得更快速；
b、降低带宽带来的费用：节约成本；
c、让你在修改设计时更有效率而代价更低；
d、帮助你的整个站点保持视觉的一致性；
e、更利于搜索引擎的检索（符合SEO的规范）；
f、令站点更容易被各种浏览器和用户访问（包括手机、PDA和残障人士使用的文字浏
览器）；
g、兼容不容忽视的Mozilla系浏览器（Firefox份额）；
h、提高你的职场竞争实力(事实上也就是降低失业的风险)。
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的容器？
{
height：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设置透明属性
或者
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必须加上
Transitional//EN” ”/TR/html4/“>要不还是不认。
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
6的双倍边距BUG
例如:
浮动后本来外边距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无法设置滚动条颜色了?
原来样式设置：
解决办法是将body换成html
5.为什么无法定义1px左右高度的容器?
IE6下这个问题是因为默认的行高造成的，解决的方法也有很多，例如：
overflow:hidden | zoom:0.08 | line-height:1px
6.怎么样才能让层显示在FLASH之上呢?
解决的办法是给FLASH设置透明:
7.怎样使一个层垂直居中于浏览器中?
这里使用百分比绝对定位，与外补丁负值的方法，负值的大小为其自身宽度高度除以2
8、firefox嵌套div标签的居中问题的解决方法
假定有如下情况：
如果要实现b在a中居中放置，一般只需用CSS设置a的text-align属性为center。
这样的方法在IE里看起来一切正常；但是在Firefox中b却会是居左的。
解决办法就是设置b的横向margin为auto。例如设置b的CSS样式为：margin:
0 auto;。
admin 管理员组
发表评论