admin 管理员组

文章数量: 1184232


2024年2月27日发(作者：平面设计图)

HTML+CSS习题及面试题

1.

[问答题]

根据下面效果图设计页面：

两点要求：

1.自适应宽度，左右两栏固定宽度，中间栏优先加载；

2.要考虑到换肤

----------------------------------------------------------------------------------------------------------------------------

来自：2011腾讯前端面试稿

参考：

1. 自适应宽度，左右两栏固定宽度，中间栏优先加载，可以采用双飞翼布局。

Header

class="main-wrap-2">

main-wrap

main-wrap

sub

sub

sub

extra

margin-left:350px;

background:#CC0;margin-left:350px; background:#CC0;

Footer

2. 使用最新的css3盒布局技术，它允许宽度自适应，改变元素显示顺序，优先加载重要区域。

[html]

自适应宽度，左右两栏固定宽度，中间栏优先加载

优先加载主内容区

左边栏

右边栏

[/html]

3. 上述两种方式兼容性都存在一定问题，可使用position:absolute试试。

"/TR/xhtml1/DTD/">

无标题文档

center center center center center center center center center center center center

center center center center center center center center center center center center center center

center center center center center center center center center center center center center center

center center center center center center center center center center center center center center

center center center center center center

left

right

4.

左右固宽，中间自适应且优先加载

头部

中间

中间

左边

左边

右边

底部

5.

2.

[问答题]

根据下图编写一段XHTML

----------------------------------------------------------------------------------------------------------------------------

来自：淘宝UED Web前端开发面试题

参考：

考察前端工程师的语义化标签知识以及模块化HTML代码知识。

对话练习

  • 小明

    我的淘宝店成立5周年啦欢迎光临哦！

  • 傅玉

    昨天销售300件米奇心情真爽！

3.

[问答题]

请简化下面的CSS代码：

a)margin:0px;

b)padding:10px 0 10px 0;

c)border-width:1px;border-style:solid;border-color:#ff5500;

----------------------------------------------------------------------------------------------------------------------------

来自：淘宝UED Web前端开发面试题

参考：

考察CSS的优化:

margin:0;padding:10px 0;border:1px solid #ff5500;

还可以进一步简写

margin:0;padding:10px 0;border:1px solid #f50;

4.

[问答题]

有这么一段HTML，请挑毛病：

哥写的不是HTML，是寂寞。

我说：

不要迷恋哥，哥只是一个传说

----------------------------------------------------------------------------------------------------------------------------

来自：雅虎面试题

参考：

出这道题的动机是，太多人觉得HTML太简单，但它恰恰又是前端开发中最基础最重要的部分。HTML结构设计的合不合理，直接影响到代码易不易维护，灵不灵活，同时事关网

页性能，协作效率。不少人认为前端开发就是javascript开发。实际上，javascript, html, css这三个前端开发的基础支柱，性质完全不同又紧密关联，对它们的正确理解，合理应用是专业与非专业的区别。有些后端工程师可以写出很漂亮的JS，但他们真的不懂怎么合理的把js,

html, css结合起来应用。对html的准确把握，不像学一般的编程语言那样，而是建立在丰富实践经验和体会的基础上，是前端的工程师的基本功。

考点1：html和 xhtml的区别。

这行代码在html 4.01 strict下是完全正确的，在xhtml 1.0 strict下是错误一堆的。所以明显是一个考点。在xhtml下所有标签是闭合的，p,br需要闭合, 标签不允许大写，P要小写。同时nbsp和br必须包含在容器里。html下这些都不是错。p在html里是可选闭合标签，是可以不用闭合的。

这个考点告诉你xhtml是多么苛刻。这是基本考点，答对，你能拿到60分。

考点2：考样式分离。

用nbsp控制缩进是不合理的。应该用CSS事。所以应该删掉nbsp。

考点3：合理使用标签。

br是强制折行标签，p是段落。原题用连续的br制造两个段落的效果，效果是达到了，但显然用的不合理，段落间距后期无法再控制。正确的做法是用两个p表现两个段落。“我说”后面是正常的文字折行用br是合理的。

上面全答对，你就能拿到100分。

对原题改进的结果：

html 4.01:

哥写的不是HTML，是寂寞。

我说：

不要迷恋哥，哥只是一个传说

xhtml 1.0:

哥写的不是HTML，是寂寞。

我说：
不要迷恋哥，哥只是一个传说

加分：合理的用语义化标签。

在前面的基础上合理的用语义化标签，对内容进行必要的标记，是加分的。但过度的使用标签，就画蛇添足了。如“我说”的话，可以用q标签标注。

哥写的不是HTML，是寂寞。

我说：

不要迷恋哥，哥只是一个传说

如果再进一步，“我”用cite标注，“HTML” 用abbr或acronym标注。

哥写的不是HTML，是寂寞。

我说：

不要迷恋哥，哥只是一个传说

5.

[问答题]

对WEB标准以及W3C的理解与认识。

----------------------------------------------------------------------------------------------------------------------------

来自：前端工程师练习题

参考：

标签闭合、标签小写、不乱嵌套、提高搜索机器人搜索几率、使用外 链css和js脚本、结构行为表现的分离、文件下载与页面速度更快、内容能被更多的用户所访问、内容能被更广泛的设备所访问、更少的代码和组件，容易维 护、改版方便，不需要变动页面内容、提供打印版本而不需要复制内容、提高网站易用性。

6.

[问答题]

xhtml和html有什么区别。

----------------------------------------------------------------------------------------------------------------------------

来自：前端工程师练习题

参考：

HTML是一种基本的WEB网页设计语言，XHTML是一个基于XML的置标语言。

最主要的不同：

XHTML 元素必须被正确地嵌套。

XHTML 元素必须被关闭。

标签名必须用小写字母。

XHTML 文档必须拥有根元素。

7.

[问答题]

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

----------------------------------------------------------------------------------------------------------------------------

来自：前端工程师练习题

参考：

用于声明文档使用那种规范（html/Xhtml）一般为 严格 过度 基于框架的html文档。

加入XMl声明可触发，解析方式更改为IE5.5 拥有IE5.5的bug。

8.

[问答题]

行内元素有哪些?块级元素有哪些?CSS的盒模型?

----------------------------------------------------------------------------------------------------------------------------

来自：前端工程师练习题

参考：

块级元素：div p h1 h2 h3 h4 form ul。

行内元素: a b br i span input select。

Css盒模型:内容，border ,margin，padding。

9.

[问答题]

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

----------------------------------------------------------------------------------------------------------------------------

来自：前端工程师练习题

参考：

内联 内嵌

外链 导入。

区别 ：同时加载。

前者无兼容性，后者CSS2.1以下浏览器不支持。

Link 支持使用javascript改变样式，后者不可。

1.使用 LINK标签

将样式规则写在.css的样式文件中，再以标签引入。

2.使用@import引入

跟link方法很像，但必须放在 中

3.使用STYLE标签

将样式规则写在标签之中。

4.使用STYLE属性

将STYLE属性直接加在个别的组件标签里，<组件(标签) STYLE="性质(属性)1: 设定值1;

性质(属性)2: 设定值2; ...}

5.使用标记引入样式

两者区别：加载顺序的差别。当一个页面被加载的时候，link引用的CSS会同时被加载，而@import引用的CSS会等到页面全部被下载完再被加载。@import可以在css中再次引入其他样式表，比如可以创建一个主样式表，在主样式表中再引入其他的样式表，如：

———————-

@import“”;

@import“”;

这样做有一个缺点，会对网站服务器产生过多的HTTP请求，以前是一个文件，而现在却是两个或更多文件了，服务器的压力增大，浏览量大的网站还是谨慎使用。

10.

[问答题]

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

----------------------------------------------------------------------------------------------------------------------------

来自：前端工程师练习题

参考：

标签选择符 类选择符 id选择符

继承不如指定 Id>class>标签选择

后者优先级高

11.

[问答题]

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

----------------------------------------------------------------------------------------------------------------------------

来自：前端工程师练习题

参考：

结构层 Html 表示层 CSS 行为层 js

12.

[问答题]

css的基本语句构成是?

----------------------------------------------------------------------------------------------------------------------------

来自：前端工程师练习题

参考：

选择器{属性1:值1;属性2:值2;„„}

13.

[问答题]

你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么?

----------------------------------------------------------------------------------------------------------------------------

来自：前端工程师练习题

参考：

Ie(Ie内核) 火狐（Gecko） 谷歌（webkit） opear(Presto)

14.

[问答题]

写出几种IE6 BUG的解决方法。

----------------------------------------------------------------------------------------------------------------------------

来自：前端工程师练习题

参考：

1.双边距BUG float引起的 使用display。

2.3像素问题 使用float引起的 使用dislpay:inline -3px。

3.超链接hover 点击后失效 使用正确的书写顺序 link visited hover active。

z-index问题 给父级添加position:relative。

透明 使用js代码改。

-height 最小高度 ！Important 解决’。

在ie6下遮盖 使用iframe嵌套。

8.为什么没有办法定义1px左右的宽度容器（IE6默认的行高造成的，使用over:hidden,zoom:0.08 line-height:1px）。

15.

[问答题]

标签上title与alt属性的区别是什么?

----------------------------------------------------------------------------------------------------------------------------

来自：前端工程师练习题

参考：

Alt 当图片不显示是 用文字代表。

Title 为该属性提供信息。

16.

[问答题]

描述css reset的作用和用途。

----------------------------------------------------------------------------------------------------------------------------

来自：前端工程师练习题

参考：

Reset重置浏览器的css默认属性 浏览器的品种不同，样式不同，然后重置，让他们统一。

17.

[问答题]

解释css sprites，如何使用。

----------------------------------------------------------------------------------------------------------------------------

来自：前端工程师练习题

参考：

Css 精灵 把一堆小的图片整合到一张大的图片上，减轻服务器对图片的请求数量。

18.

[问答题]

浏览器标准模式和怪异模式之间的区别是什么?

----------------------------------------------------------------------------------------------------------------------------

来自：前端工程师练习题

参考：

盒子模型 渲染模式的不同

使用 Mode 可显示为什么模式。

19.

[问答题]

你如何对网站的文件和资源进行优化?期待的解决方案包括：

----------------------------------------------------------------------------------------------------------------------------

来自：前端工程师练习题

参考：

文件合并

文件最小化/文件压缩

使用CDN托管

缓存的使用

20.

[问答题]

什么是语义化的HTML?

----------------------------------------------------------------------------------------------------------------------------

来自：前端工程师练习题

参考：

直观的认识标签 对于搜索引擎的抓取有好处。

21.

[问答题]

清除浮动的几种方式，各自的优缺点。

----------------------------------------------------------------------------------------------------------------------------

来自：前端工程师练习题

参考：

1.使用空标签清除浮动 clear:both（理论上能清楚任何标签，，，增加无意义的标签）。

2.使用overflow:auto（空标签元素清除浮动而不得不增加无意代码的弊端,,使用zoom:1用于兼容IE）。

3.是用afert伪元素清除浮动(用于非IE浏览器)。

22.

[问答题]

写出下列代码在各个浏览器中的颜色值?

----------------------------------------------------------------------------------------------------------------------------

来自：奇虎360Web前端开发工程师面试题一面

参考：

background: red;_background: green;*background: blue;background: black9;

23.

[问答题]

添加些css让其水平垂直居中。

颜海镜

----------------------------------------------------------------------------------------------------------------------------

来自：奇虎360Web前端开发工程师面试题一面

参考：无

24.

[问答题]

如下代码，在空白处填写代码，使其点击时，前景色为白色，背景色为黑色。

颜海镜

----------------------------------------------------------------------------------------------------------------------------

来自：奇虎360Web前端开发工程师面试题一面

参考：无

25.

[问答题]

书写代码，点击时从1分钟开始，每秒递减到0。

颜海镜

----------------------------------------------------------------------------------------------------------------------------

来自：奇虎360Web前端开发工程师面试题一面

参考：无

26.

[问答题]

简述在IE下mouseover和mouseenter的区别？

----------------------------------------------------------------------------------------------------------------------------

来自：奇虎360Web前端开发工程师面试题一面

参考：无

27.

[问答题]

img的alt和title的异同？

----------------------------------------------------------------------------------------------------------------------------

来自：百度校园招聘web前端开发面试题

参考：

title属性为设置该属性的元素提供建议性的信息。比如为链接添加描述性文字。

为不能显示图像、窗体或applets的用户代理（UA），alt属性用来指定替换文字。使用alt属性是为了给那些不能看到你文档中图像的浏览者提供文字说明。

28.

[问答题]

CSS布局：两列，左边宽度自适应，右边宽度固定200px。

----------------------------------------------------------------------------------------------------------------------------

来自：百度校园招聘web前端开发面试题

参考：

#box1{width:100%;height:600px;position:relative;}

#left1{margin-right:200px;border:1px solid red;height:100%;}

#right1{width:200px;height:100%;position:absolute;top:0px;right:0px;border:1px

blue;}

solid

29.

[问答题]

用CSS实现布局。请使用CSS控制3个div，实现如下图的布局。

----------------------------------------------------------------------------------------------------------------------------

来自：阿里巴巴Web前端开发面试题

参考：无

30.

[问答题]

前端页面由哪三层构成，分别是什么?作用是什么?

----------------------------------------------------------------------------------------------------------------------------

来自：WEB前端开发工程师面试题

参考：

网页分成三个层次，即：结构层、表示层、行为层。

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

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

网页的行为层（behavior layer）负责回答“内容应该如何对事件做出反应”这一问题。

这是 Javascript 语言和 DOM 主宰的领域。

31.

[问答题]

Doctype作用? 严格模式与混杂模式如何区分？它们有何意义?

----------------------------------------------------------------------------------------------------------------------------

来自：WEB前端开发工程师面试题

参考：

声明位于文档中的最前面，处于标签之前。

告知浏览器的解析器， 用什么文档类型 规范来解析这个文档

严格模式的排版和 JS 运作模式是 以该浏览器支持的最高标准运行。

在混杂模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。

DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。

32.

[问答题]

行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？

----------------------------------------------------------------------------------------------------------------------------

来自：WEB前端开发工程师面试题

参考：

CSS规范规定，每个元素都有display属性，确定该元素的类型，每个元素都有默认的display值， 比如div默认display属性值为“block”，成为“块级”元素； span默认display属性值为“inline”，是“行内”元素。

行内元素有：a b span I b em img input select strong

块级元素有：div ul ol li dl dt dd h1 h2 h3 h4„p

知名的空元素：br

33.

[问答题]

link 和@import 的区别是？

----------------------------------------------------------------------------------------------------------------------------

来自：WEB前端开发工程师面试题

参考：

link属于XHTML标签，而@import是CSS提供的;

页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加

载;

import只在IE5以上才能识别，而link是XHTML标签，无兼容问题;

link方式的样式的权重高于@import的权重.

使用@import引入跟link方法很像，但必须放在样式表中

@import url(css/);

–>

使用STYLE标签将样式规则写在标签之中。

body {color: #666;background: #f0f0f0;font-size: 12px;}

td,p {color:#c00;font-size: 12px;}

–>

@import可以在css中再次引入其他样式表，比如可以创建一个主样式表，在主样式表中再引入其他的样式表，如：

———————-

@import “”;

@import “”;

这样做有一个缺点，会对网站服务器产生过多的HTTP请求，以前是一个文件，而现在却是两个或更多文件了，服务器的压力增大，浏览量大的网站还是谨慎使用。

34.

[问答题]

浏览器的内核分别是什么?

----------------------------------------------------------------------------------------------------------------------------

来自：WEB前端开发工程师面试题

参考：

IE浏览器的内核Trident、Mozilla的Gecko、Chrome的Blink（WebKit的分支）、Opera内核原为Presto，现为Blink。

35.

[问答题]

常见兼容性问题？

----------------------------------------------------------------------------------------------------------------------------

来自：WEB前端开发工程师面试题

参考：

* png24位的图片在iE6浏览器上出现背景，解决方案是做成PNG8.

* 浏览器默认的margin和padding不同。解决方案是加一个全局的*{margin:0;padding:0;}来统一。

* 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已经独立识别。

.bb{

background-color:#f1ee18;/*所有识别*/

.background-color:#00deff9; /*IE6、7、8识别*/

+background-color:#a200ff;/*IE6、7识别*/

_background-color:#1e0bd1;/*IE6识别*/

}

* IE下,可以使用获取常规属性的方法来获取自定义属性,

也可以使用getAttribute()获取自定义属性;

Firefox下,只能使用getAttribute()获取自定义属性.

解决方法:统一通过getAttribute()获取自定义属性.

* IE下,even对象有x,y属性,但是没有pageX,pageY属性;

Firefox下,event对象有pageX,pageY属性,但是没有x,y属性.

* 解决方法：（条件注释）缺点是在IE浏览器下可能会增加额外的HTTP请求数。

* Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示,

可通过加入 CSS 属性 -webkit-text-size-adjust: none; 解决.

超链接访问过后hover样式就不出现了 被点击访问过的超链接样式不在具有hover和active了解决方法是改变CSS属性的排列顺序:

L-V-H-A : a:link {} a:visited {} a:hover {} a:active {}

36.

[问答题]

html5有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分 HTML 和 HTML5？

----------------------------------------------------------------------------------------------------------------------------

来自：WEB前端开发工程师面试题

参考：

* HTML5 现在已经不是 SGML 的子集，主要是关于图像，位置，存储，多任务等功能的增加。

* 绘画 canvas

用于媒介回放的 video 和 audio 元素

本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失；

sessionStorage 的数据在浏览器关闭后自动删除

语意化更好的内容元素，比如 article、footer、header、nav、section

表单控件，calendar、date、time、email、url、search

新的技术webworker, websockt, Geolocation

* 移除的元素

纯表现的元素：basefont，big，center，font, s，strike，tt，u；

对可用性产生负面影响的元素：frame，frameset，noframes；

支持HTML5新标签：

* IE8/IE7/IE6支持通过Element方法产生的标签，

可以利用这一特性让这些浏览器支持HTML5新标签，

浏览器支持新标签后，还需要添加标签默认的样式：

* 当然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架

如何区分： DOCTYPE声明新增的结构元素功能元素

37.

[问答题]

语义化的理解？

----------------------------------------------------------------------------------------------------------------------------

来自：WEB前端开发工程师面试题

参考：

用正确的标签做正确的事情！

html语义化就是让页面的内容结构化，便于对浏览器、搜索引擎解析；

在没有样式CCS情况下也以一种文档格式显示，并且是容易阅读的。

搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重，利于 SEO。

使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。

38.

[问答题]

HTML5的离线储存？

----------------------------------------------------------------------------------------------------------------------------

来自：WEB前端开发工程师面试题

参考：

localStorage 长期存储数据，浏览器关闭后数据不丢失；

sessionStorage 数据在浏览器关闭后自动删除。

39.

[问答题]

iframe有那些缺点？

----------------------------------------------------------------------------------------------------------------------------

来自：WEB前端开发工程师面试题

参考：

*iframe会阻塞主页面的Onload事件；

*iframe和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载。 使用iframe之前需要考虑这两个缺点。如果需要使用iframe，最好是通过javascript

动态给iframe添加src属性值，这样可以可以绕开以上两个问题。

40.

[问答题]

请描述一下 cookies，sessionStorage 和 localStorage 的区别？

----------------------------------------------------------------------------------------------------------------------------

来自：WEB前端开发工程师面试题

参考：

cookie在浏览器和服务器间来回传递。

sessionStorage和localStorage不会 sessionStorage和localStorage的存储空间更大；

sessionStorage和localStorage有更多丰富易用的接口；

sessionStorage和localStorage各自独立的存储空间；

41.

[问答题]

如何实现浏览器内多个标签页之间的通信?

----------------------------------------------------------------------------------------------------------------------------

来自：阿里WEB前端开发工程师面试题

参考：

调用localstorge、cookies等本地存储方式

42.

[问答题]

webSocket如何兼容低浏览器？

----------------------------------------------------------------------------------------------------------------------------

来自：阿里WEB前端开发工程师面试题

参考：

Adobe Flash Socket 、 ActiveX HTMLFile (IE) 、 基于 multipart 编码发送 XHR 、 基于长轮询的 XHR

43.

[问答题]

介绍一下CSS的盒子模型？

----------------------------------------------------------------------------------------------------------------------------

来自：WEB前端开发工程师面试题

参考：

（1）有两种， IE 盒子模型、标准 W3C 盒子模型；IE的content部分包含了 border 和

pading;

（2）盒模型： 内容(content)、填充(padding)、边界(margin)、 边框(border).

44.

[问答题]

CSS 选择符有哪些？哪些属性可以继承？优先级算法如何计算？ CSS3新增伪类有那些？

----------------------------------------------------------------------------------------------------------------------------

来自：WEB前端开发工程师面试题

参考：

选择器（ # 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 比 内联优先级高

45.

[问答题]

CSS3新增伪类举例。

----------------------------------------------------------------------------------------------------------------------------

来自：WEB前端开发工程师面试题

参考：

p:first-of-type 选择属于其父元素的首个元素的每个元素。

p:last-of-type 选择属于其父元素的最后元素的每个元素。

p:only-of-type 选择属于其父元素唯一的元素的每个元素。

p:only-child 选择属于其父元素的唯一子元素的每个元素。

p:nth-child(2) 选择属于其父元素的第二个子元素的每个元素。

:enabled :disabled 控制表单控件的禁用状态。

:checked 单选框或复选框被选中。

46.

[问答题]

如何居中div？

----------------------------------------------------------------------------------------------------------------------------

来自：WEB前端开发工程师面试题

参考：

// 给div设置一个宽度，然后添加margin:0 auto属性

div{

width:200px;

margin:0 auto;

}

47.

[问答题]

如何居中一个浮动元素？

----------------------------------------------------------------------------------------------------------------------------

来自：WEB前端开发工程师面试题

参考：

确定容器的宽高 宽500 高 300 的层

设置层的外边距

.div {

Width:500px ; height:300px;//高度可以不设

Margin: -150px 0 0 -250px;

position:relative;相对定位

background-color:pink;//方便看效果

left:50%;

top:50%;

}

48.

[问答题]

列出display的值，说明他们的作用。

----------------------------------------------------------------------------------------------------------------------------

来自：WEB前端开发工程师面试题

参考：

block 象块类型元素一样显示。

none 缺省值。象行内元素类型一样显示。

inline-block 象行内元素一样显示，但其内容象块类型元素一样显示。

list-item 象块类型元素一样显示，并添加样式列表标记。

49.

[问答题]

position的值， relative和absolute定位原点是？

----------------------------------------------------------------------------------------------------------------------------

来自：WEB前端开发工程师面试题

参考：

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

*fixed：生成绝对定位的元素，相对于浏览器窗口进行定位。

*relative：生成相对定位的元素，相对于其正常位置进行定位。

* static 默认值。没有定位，元素出现在正常的流中

*（忽略 top, bottom, left, right z-index 声明）。

* inherit 规定从父元素继承 position 属性的值。

50.

[问答题]

CSS3有哪些新特性？

----------------------------------------------------------------------------------------------------------------------------

来自：WEB前端开发工程师面试题

参考：

CSS3实现圆角（border-radius:8px），阴影（box-shadow:10px），

对文字加特效（text-shadow、），线性渐变（gradient），旋转（transform）

transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);//旋转,缩放,定位,倾斜

增加了更多的CSS选择器 多背景 rgba

51.

[问答题]

一个满屏 品 字布局 如何设计?

----------------------------------------------------------------------------------------------------------------------------

来自：WEB前端开发工程师面试题

参考：无

52.

[问答题]

经常遇到的CSS的兼容性有哪些？原因，解决方法是什么？

----------------------------------------------------------------------------------------------------------------------------

来自：WEB前端开发工程师面试题

参考：无

53.

[问答题]

为什么要初始化CSS样式?

----------------------------------------------------------------------------------------------------------------------------

来自：WEB前端开发工程师面试题

参考：

– 因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异。

– 当然，初始化样式会对SEO有一定的影响，但鱼和熊掌不可兼得，但力求影响最小的情况下初始化。

*最简单的初始化方法就是： * {padding: 0; margin: 0;} （不建议）

淘宝的样式初始化：

body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend,

button, input, textarea, th, td { margin:0; padding:0; }

body, button, input, select, textarea { font:12px/1.5tahoma, arial, 5b8b4f53; }

h1, h2, h3, h4, h5, h6{ font-size:100%; }

address, cite, dfn, em, var { font-style:normal; }

code, kbd, pre, samp { font-family:couriernew, courier, monospace; }

small{ font-size:12px; }

ul, ol { list-style:none; }

a { text-decoration:none; }

a:hover { text-decoration:underline; }

sup { vertical-align:text-top; }

sub{ vertical-align:text-bottom; }

legend { color:#000; }

fieldset, img { border:0; }

button, input, select, textarea { font-size:100%; }

table { border-collapse:collapse; border-spacing:0; }

54.

[问答题]

absolute的containing block计算方式跟正常流有什么不同？

----------------------------------------------------------------------------------------------------------------------------

来自：WEB前端开发工程师面试题

参考：无

55.

[问答题]

position跟display、margin collapse、overflow、float这些特性相互叠加后会怎么样？

----------------------------------------------------------------------------------------------------------------------------

来自：WEB前端开发工程师面试题

参考：无

56.

[问答题]

对BFC规范的理解？

----------------------------------------------------------------------------------------------------------------------------

来自：WEB前端开发工程师面试题

参考：

（W3C CSS 2.1 规范中的一个概念,它决定了元素如何对其内容进行定位,以及与其他元素的关 系和相互作用。）

57.

[问答题]

css定义的权重。

----------------------------------------------------------------------------------------------------------------------------

来自：WEB前端开发工程师面试题

参考：

以下是权重的规则：标签的权重为1，class的权重为10，id的权重为100，以下例子是演示各种定义的权重值：

/*权重为1*/

div{

}

/*权重为10*/

.class1{

}

/*权重为100*/

#id1{

}

/*权重为100+1=101*/

#id1 div{

}

/*权重为10+1=11*/

.class1 div{

}

/*权重为10+10+1=21*/

.class1 .class2 div{

}

如果权重相同，则最后定义的样式会起作用，但是应该避免这种情况出现。

58.

[问答题]

解释下浮动和它的工作原理？清除浮动的技巧。

----------------------------------------------------------------------------------------------------------------------------

来自：WEB前端开发工程师面试题

参考：无

59.

[问答题]

用过媒体查询，针对移动端的布局吗？

----------------------------------------------------------------------------------------------------------------------------

来自：WEB前端开发工程师面试题

参考：无

60.

[问答题]

使用 CSS 预处理器吗？喜欢那个？

----------------------------------------------------------------------------------------------------------------------------

来自：WEB前端开发工程师面试题

参考：无

61.

[问答题]

如果需要手动写动画，你认为最小时间间隔是多久，为什么？

----------------------------------------------------------------------------------------------------------------------------

来自：阿里WEB前端开发工程师面试题

参考：

多数显示器默认频率是60Hz，即1秒刷新60次，所以理论上最小间隔为1/60＊1000ms

＝ 16.7ms

62.

[问答题]

display:inline-block 什么时候会显示间隙？

----------------------------------------------------------------------------------------------------------------------------

来自：携程WEB前端开发工程师面试题

参考：

移除空格、使用margin负值、使用font-size:0、letter-spacing、word-spacing

63.

[问答题]

你做的页面在哪些流览器测试过？这些浏览器的内核分别是什么?

----------------------------------------------------------------------------------------------------------------------------

来自：BAT及各大互联网公司2014前端笔试面试题集

参考：

• IE: trident内核

• Firefox：gecko内核

• Safari:webkit内核

• Opera:以前是presto内核，Opera现已改用Google Chrome的Blink内核

• Chrome:Blink(基于webkit，Google与Opera Software共同开发)

64.

[问答题]

每个HTML文件里开头都有个很重要的东西，Doctype，知道这是干什么的吗？

----------------------------------------------------------------------------------------------------------------------------

来自：BAT及各大互联网公司2014前端笔试面试题集

参考：

声明位于文档中的最前面的位置，处于 标签之前。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。（重点：告诉浏览器按照何种规范解析页面）

65.

[问答题]

Quirks模式是什么？它和Standards模式有什么区别

----------------------------------------------------------------------------------------------------------------------------

来自：BAT及各大互联网公司2014前端笔试面试题集

参考：

从IE6开始，引入了Standards模式，标准模式中，浏览器尝试给符合标准的文档在规范上的正确处理达到在指定浏览器中的程度。

在IE6之前CSS还不够成熟，所以IE5等之前的浏览器对CSS的支持很差， IE6将对CSS提供更好的支持，然而这时的问题就来了，因为有很多页面是基于旧的布局方式写的，而如果IE6 支持CSS则将令这些页面显示不正常，如何在即保证不破坏现有页面，又提供新的渲染机制呢？

在写程序时我们也会经常遇到这样的问题，如何保证原来的接口不变，又提供更强大的功能，尤其是新功能不兼容旧功能时。遇到这种问题时的一个常见做法是增加参数和分支，即当某个参数为真时，我们就使用新功能，而如果这个参数 不为真时，就使用旧功能，这样就能不破坏原有的程序，又提供新功能。IE6也是类似这样做的，它将DTD当成了这个“参数”，因为以前的页面大家都不会去写DTD，所以IE6就假定 如果写了DTD，就意味着这个页面将采用对CSS支持更好的布局，而如果没有，则采用兼容之前的布局方式。这就是Quirks模式（怪癖模式，诡异模式，怪异模式）。

区别：

总体会有布局、样式解析和脚本执行三个方面的区别。

盒模型：在W3C标准中，如果设置一个元素的宽度和高度，指的是元素内容的宽度和高度，而在Quirks 模式下，IE的宽度和高度还包含了padding和border。

设置行内元素的高宽：在Standards模式下，给等行内元素设置wdith和height都不会生效，而在quirks模式下，则会生效。

设置百分比的高度：在standards模式下，一个元素的高度是由其包含的内容来决定的，如果父元素没有设置百分比的高度，子元素设置一个百分比的高度是无效的用margin:0 auto设置水平居中：使用margin:0 auto在standards模式下可以使元素水平居中，但在quirks模式下却会失效。

（还有很多，答出什么不重要，关键是看答出的这些是不是自己经验遇到的，还是说都是看文章看的，甚至完全不知道。）

66.

[问答题]

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

----------------------------------------------------------------------------------------------------------------------------

来自：BAT及各大互联网公司2014前端笔试面试题集

参考：

•改版的时候更方便 只要改css文件。

•页面加载速度更快、结构化清晰、页面显示简洁。

•表现与结构相分离。

•易于优化（seo）搜索引擎更友好，排名更容易靠前。

67.

[问答题]

a：img的alt与title有何异同？b：strong与em的异同？

----------------------------------------------------------------------------------------------------------------------------

来自：BAT及各大互联网公司2014前端笔试面试题集

参考：

a:

•alt(alt text):为不能显示图像、窗体或applets的用户代理（UA），alt属性用来指定替换

文字。替换文字的语言由lang属性指定。(在IE浏览器下会在没有title时把alt当成 tool tip显示)

•title(tool tip):该属性为设置该属性的元素提供建议性的信息。

b:

•strong:粗体强调标签，强调，表示内容的重要性

•em:斜体强调标签，更强烈强调，表示内容的强调点

68.

[问答题]

你能描述一下渐进增强和优雅降级之间的不同吗?

----------------------------------------------------------------------------------------------------------------------------

来自：BAT及各大互联网公司2014前端笔试面试题集

参考：

•渐进增强 progressive enhancement：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。

•优雅降级 graceful degradation：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。

区别：优雅降级是从复杂的现状开始，并试图减少用户体验的供给，而渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要。降级（功能衰减）意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于安全地带。

“优雅降级”观点

“优雅降级”观点认为应该针对那些最高级、最完善的浏览器来设计网站。而将那些被认为“过时”或有功能缺失的浏览器下的测试工作安排在开发周期的最后阶段，并把测试对象限定为主流浏览器（如 IE、Mozilla 等）的前一个版本。

在这种设计范例下，旧版的浏览器被认为仅能提供“简陋却无妨 (poor, but passable)”

的浏览体验。你可以做一些小的调整来适应某个特定的浏览器。但由于它们并非我们所关注的焦点，因此除了修复较大的错误之外，其它的差异将被直接忽略。

“渐进增强”观点

“渐进增强”观点则认为应关注于内容本身。

内容是我们建立网站的诱因。有的网站展示它，有的则收集它，有的寻求，有的操作，还有的网站甚至会包含以上的种种，但相同点是它们全都涉及到内容。这使得“渐进增强”成为一种更为合理的设计范例。这也是它立即被 Yahoo! 所采纳并用以构建其“分级式浏览器支持 (Graded Browser Support)”策略的原因所在。

那么问题来了。现在产品经理看到IE6,7,8网页效果相对高版本现代浏览器少了很多圆角，阴影（CSS3），要求兼容（使用图片背景，放弃CSS3），你会如何说服他？

（自由发挥）

69.

[问答题]

为什么利用多个域名来存储网站资源会更有效？

----------------------------------------------------------------------------------------------------------------------------

来自：BAT及各大互联网公司2014前端笔试面试题集

参考：

•CDN缓存更方便

•突破浏览器并发限制

•节约cookie带宽

•节约主域名的连接数，优化页面响应速度

•防止不必要的安全问题

70.

[问答题]

请谈一下你对网页标准和标准制定机构重要性的理解。

----------------------------------------------------------------------------------------------------------------------------

来自：BAT及各大互联网公司2014前端笔试面试题集

参考：

（无标准答案）网页标准和标准制定机构都是为了能让web发展的更‘健康’，开发者遵循统一的标准，降低开发难度，开发成本，SEO也会更好做，也不会因为滥用代码导致各种BUG、安全问题，最终提高网站易用性。

71.

[问答题]

请描述一下cookies，sessionStorage和localStorage的区别？

----------------------------------------------------------------------------------------------------------------------------

来自：BAT及各大互联网公司2014前端笔试面试题集

参考：

sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。而localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。

web storage和cookie的区别

•Web Storage的概念和cookie相似，区别是它是为了更大容量存储设计的。Cookie的大小是受限的，并且每次你请求一个新的页面的时候Cookie都会被发送过去，这样无形中浪费了带宽，另外cookie还需要指定作用域，不可以跨域调用。

•除此之外，Web Storage拥有setItem,getItem,removeItem,clear等方法，不像cookie需要前端开发者自己封装setCookie，getCookie。但是Cookie也是不可以或缺的：Cookie的作用是与服务器进行交互，作为HTTP规范的一部分而存在 ，而Web Storage仅仅是为了在本地“存储”数据而生。

72.

[问答题]

简述一下src与href的区别。

----------------------------------------------------------------------------------------------------------------------------

来自：BAT及各大互联网公司2014前端笔试面试题集

参考：

src用于替换当前元素，href用于在当前文档和引用资源之间确立联系。

src是source的缩写，指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求src资源时会将其指向的资源下载并应用到文档内，例如js脚本，img图片和frame等元素。

当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部。

href是Hypertext Reference的缩写，指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，如果我们在文档中添加

那么浏览器会识别该文档为css文件，就会并行下载资源并且不会停止对当前文档的处理。这也是为什么建议使用link方式来加载css，而不是使用@import方式。

73.

[问答题]

知道的网页制作会用到的图片格式有哪些？

----------------------------------------------------------------------------------------------------------------------------

来自：BAT及各大互联网公司2014前端笔试面试题集

参考：

png-8，png-24，jpeg，gif，svg。

但是上面的那些都不是面试官想要的最后答案。面试官希望听到是Webp。（是否有关注新技术，新鲜事物）

科普一下Webp：WebP格式，谷歌（google）开发的一种旨在加快图片加载速度的图片格式。图片压缩体积大约只有JPEG的2/3，并能节省大量的服务器带宽资源和数据空间。Facebook Ebay等知名网站已经开始测试并使用WebP格式。

在质量相同的情况下，WebP格式图像的体积要比JPEG格式图像小40%

74.

[问答题]

知道什么是微格式吗？谈谈理解。在前端构建中应该考虑微格式吗？

----------------------------------------------------------------------------------------------------------------------------

来自：BAT及各大互联网公司2014前端笔试面试题集

参考：

微格式（Microformats）是一种让机器可读的语义化XHTML词汇的集合，是结构化数据的开放标准。是为特殊应用而制定的特殊格式。

优点：将智能数据添加到网页上，让网站内容在搜索引擎结果界面可以显示额外的提示。（应用范例：豆瓣，有兴趣自行google）

75.

[问答题]

在css/js代码上线之后开发人员经常会优化性能，从用户刷新网页开始，一次js请求一般情况下有哪些地方会有缓存处理？

----------------------------------------------------------------------------------------------------------------------------

来自：BAT及各大互联网公司2014前端笔试面试题集

参考：

dns缓存，cdn缓存，浏览器缓存，服务器缓存。

76.

[问答题]

一个页面上有大量的图片（大型电商网站），加载很慢，你有哪些方法优化这些图片的加载，给用户更好的体验。

----------------------------------------------------------------------------------------------------------------------------

来自：BAT及各大互联网公司2014前端笔试面试题集

参考：

•图片懒加载，在页面上的未可视区域可以添加一个滚动条事件，判断图片位置与浏览器顶端的距离与页面的距离，如果前者小于后者，优先加载。

•如果为幻灯片、相册等，可以使用图片预加载技术，将当前展示图片的前一张和后一张优先下载。

•如果图片为css图片，可以使用CSSsprite，SVGsprite，Iconfont、Base64等技术。

•如果图片过大，可以使用特殊编码的图片，加载时会先加载一张压缩的特别厉害的缩略图，以提高用户体验。

•如果图片展示区域小于图片的真实大小，则因在服务器端根据业务需要先行进行图片压缩，图片压缩后大小与展示一致。

77.

[问答题]

你如何理解HTML结构的语义化？

----------------------------------------------------------------------------------------------------------------------------

来自：BAT及各大互联网公司2014前端笔试面试题集

参考：

•去掉或样式丢失的时候能让页面呈现清晰的结构：

html本身是没有表现的，我们看到例如

是粗体，字体大小2em，加粗；是加粗的，不要认为这是html的表现，这些其实html默认的css样式在起作用，所以去掉或样式丢失的时候能让页面呈现清晰的结构不是语义化的HTML结构的优点，但是浏览器都有有默认样式，默认样式的目的也是为了更好的表达html的语义，可以说浏览器的默认样式和语义化的HTML结构是不可分割的。

•屏幕阅读器（如果访客有视障）会完全根据你的标记来“读”你的网页.

例如,如果你使用的含语义的标记,屏幕阅读器就会“逐个拼出”你的单词,而不是试着去对它完整发音.

•PDA、手机等设备可能无法像普通电脑的浏览器一样来渲染网页（通常是因为这些设备对CSS的支持较弱）

使用语义标记可以确保这些设备以一种有意义的方式来渲染网页.理想情况下,观看设备的任务是符合设备本身的条件来渲染网页.

语义标记为设备提供了所需的相关信息,就省去了你自己去考虑所有可能的显示情况（包括现有的或者将来新的设备）.例如,一部手机可以选择使一段标记了标题的文字以粗体显示.而掌上电脑可能会以比较大的字体来显示.无论哪种方式一旦你对文本标记为标题,您就可以确信读取设备将根据其自身的条件来合适地显示页面。

•搜索引擎的爬虫也依赖于标记来确定上下文和各个关键字的权重

过去你可能还没有考虑搜索引擎的爬虫也是网站的“访客”,但现在它们他们实际上是极其宝贵的用户.没有他们的话,搜索引擎将无法索引你的网站,然后一般用户将很难过来访问。

•你的页面是否对爬虫容易理解非常重要,因为爬虫很大程度上会忽略用于表现的标记,而只注重语义标记。

因此,如果页面文件的标题被标记,而不是,那么这个页面在搜索结果的位置可能会比较靠后.除了提升易用性外,语义标记有利于正确使用CSS和JavaScript,因为其本身提供了许多“钩钩”来应用页面的样式与行为。

SEO主要还是靠你网站的内容和外部链接的。

•便于团队开发和维护

W3C给我们定了一个很好的标准，在团队中大家都遵循这个标准，可以减少很多差异化的东西，方便开发和维护，提高开发效率，甚至实现模块化开发。

78.

[问答题]

谈谈以前端角度出发做好SEO需要考虑什么？

----------------------------------------------------------------------------------------------------------------------------

来自：BAT及各大互联网公司2014前端笔试面试题集

参考：

•了解搜索引擎如何抓取网页和如何索引网页

你需要知道一些搜索引擎的基本工作原理，各个搜索引擎之间的区别，搜索机器人（SE

robot 或叫 web crawler）如何进行工作，搜索引擎如何对搜索结果进行排序等等。

•Meta标签优化

主要包括主题（Title)，网站描述(Description)，和关键词（Keywords）。还有一些其它的隐藏文字比如Author（作者），Category（目录），Language（编码语种）等。

•如何选取关键词并在网页中放置关键词

搜索就得用关键词。关键词分析和选择是SEO最重要的工作之一。首先要给网站确定主关键词（一般在5个上下），然后针对这些关键词进行优化，包括关键词密度（Density），相关度（Relavancy），突出性（Prominency）等等。

•了解主要的搜索引擎

虽然搜索引擎有很多，但是对网站流量起决定作用的就那么几个。比如英文的主要有Google，Yahoo，Bing等；中文的有百度，搜狗，有道等。不同的搜索引擎对页面的抓取和索引、排序的规则都不一样。还要了解各搜索门户和搜索引擎之间的关系，比如AOL网页搜索用的是Google的搜索技术，MSN用的是Bing的技术。

•主要的互联网目录

Open Directory自身不是搜索引擎，而是一个大型的网站目录，他和搜索引擎的主要区别是网站内容的收集方式不同。目录是人工编辑的，主要收录网站主页；搜索引擎是自动收集的，除了主页外还抓取大量的内容页面。

•按点击付费的搜索引擎

搜索引擎也需要生存，随着互联网商务的越来越成熟，收费的搜索引擎也开始大行其道。最典型的有Overture和百度，当然也包括Google的广告项目Google Adwords。越来越多的人通过搜索引擎的点击广告来定位商业网站，这里面也大有优化和排名的学问，你得学会用最少的广告投入获得最多的点击。

•搜索引擎登录

网站做完了以后，别躺在那里等着客人从天而降。要让别人找到你，最简单的办法就是将网站提交（submit）到搜索引擎。如果你的是商业网站，主要的搜索引擎和目录都会要求你付费来获得收录（比如Yahoo要299美元），但是好消息是（至少到目前为止）最大的搜索引擎Google目前还是免费，而且它主宰着60％以上的搜索市场。

•链接交换和链接广泛度（Link Popularity）

网页内容都是以超文本（Hypertext）的方式来互相链接的，网站之间也是如此。除了搜索引擎以外，人们也每天通过不同网站之间的链接来Surfing（“冲浪”）。其它网站到你的网站的链接越多，你也就会获得更多的访问量。更重要的是，你的网站的外部链接数越多，会被搜索引擎认为它的重要性越大，从而给你更高的排名。

•合理的标签使用

79.

[问答题]

有哪项方式可以对一个DOM设置它的CSS样式？

----------------------------------------------------------------------------------------------------------------------------

来自：BAT及各大互联网公司2014前端笔试面试题集

参考：

•外部样式表，引入一个外部css文件

•内部样式表，将css代码放在 标签内部

•内联样式，将css样式直接定义在 HTML 元素内部

80.

[问答题]

CSS都有哪些选择器？

----------------------------------------------------------------------------------------------------------------------------

来自：BAT及各大互联网公司2014前端笔试面试题集

参考：

•派生选择器（用HTML标签申明）

•id选择器（用DOM的ID申明）

•类选择器（用一个样式类名申明）

•属性选择器（用DOM的属性申明，属于CSS2，IE6不支持，不常用，不知道就算了）

除了前3种基本选择器，还有一些扩展选择器，包括

•后代选择器（利用空格间隔，比如div .a{ }）

•群组选择器（利用逗号间隔，比如p,div,#a{ }）

考官会继续追问，CSS选择器的优先级是怎么样定义的？

基本原则：

一般而言，选择器越特殊，它的优先级越高。也就是选择器指向的越准确，它的优先级就越高。

复杂的计算方法：

•用1表示派生选择器的优先级

•用10表示类选择器的优先级

•用100标示ID选择器的优先级 ◦1 .span var 优先级 1+10 +10 +1

◦span#xxx .songs li 优先级1+100 + 10 + 1

◦#xxx li 优先级 100 +1

考官会继续追问，看下列代码，

标签内的文字是什么颜色的？

123

答案：red。与样式定义在文件中的先后顺序有关，即是后面的覆盖前面的，与在

中的先后关系无关。

81.

[问答题]

CSS中可以通过哪些属性定义，使得一个DOM元素不显示在浏览器可视范围内？

----------------------------------------------------------------------------------------------------------------------------

来自：BAT及各大互联网公司2014前端笔试面试题集

参考：

最基本的：

设置display属性为none，或者设置visibility属性为hidden

技巧性：

设置宽高为0，设置透明度为0，设置z-index位置在-1000

82.

[问答题]

超链接访问过后hover样式就不出现的问题是什么？如何解决？

----------------------------------------------------------------------------------------------------------------------------

来自：BAT及各大互联网公司2014前端笔试面试题集

参考：

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

83.

[问答题]

什么是Css Hack？ie6,7,8的hack分别是什么？

----------------------------------------------------------------------------------------------------------------------------

来自：BAT及各大互联网公司2014前端笔试面试题集

参考：

针对不同的浏览器写不同的CSS code的过程，就是CSS hack。

示例如下：

#test {

width:300px;

height:300px;

background-color:blue; /*firefox*/

background-color:red9; /*all ie*/

background-color:yellow; /*ie8*/

+background-color:pink; /*ie7*/

_background-color:orange; /*ie6*/ }

:root #test { background-color:purple9; } /*ie9*/

@media all and (min-width:0px){ #test {background-color:black;} } /*opera*/

@media screen and (-webkit-min-device-pixel-ratio:0){ #test {background-color:gray;} }

/*chrome and safari*/

84.

[问答题]

请用Css写一个简单的幻灯片效果页面

----------------------------------------------------------------------------------------------------------------------------

来自：BAT及各大互联网公司2014前端笔试面试题集

参考：

知道是要用css3。使用animation动画实现一个简单的幻灯片效果。

/**HTML**/

/**css**/

.ani{

width:480px;

height:320px;

margin:50px auto;

overflow: hidden;

box-shadow:0 0 5px rgba(0,0,0,1);

background-size: cover;

background-position: center;

-webkit-animation-name: "loops";

-webkit-animation-duration: 20s;

-webkit-animation-iteration-count: infinite;

}

@-webkit-keyframes "loops" {

0% {

background:url(/image/w%3D400/sign=c01e6adca964034f0fcdc3069fc27980/) no-repeat;

}

25% {

background:url(/image/w%3D400/sign=edee1572e9f81a4c2632edc9e72b6029/) no-repeat;

}

50% {

background:url(/image/w%3D400/sign=937dace2552c11dfded1be2353266255/) no-repeat;

}

75% {

background:url(/image/w%3D400/sign=7d37500b8544ebf86d71653fe9f9d736/) no-repeat;

}

100% {

background:url(/image/w%3D400/sign=cfb239ceb0fb43161a1f7b7a10a54642/) no-repeat;

}

}

85.

[问答题]

行内元素和块级元素的具体区别是什么？行内元素的padding和margin可设置吗？

----------------------------------------------------------------------------------------------------------------------------

来自：BAT及各大互联网公司2014前端笔试面试题集

参考：

块级元素(block)特性：

•总是独占一行，表现为另起一行开始，而且其后的元素也必须另起一行显示;

•宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制;

内联元素(inline)特性：

•和相邻的内联元素在同一行;

•宽度(width)、高度(height)、内边距的top/bottom(padding-top/padding-bottom)和外边距的top/bottom(margin-top/margin-bottom)都不可改变（也就是padding和margin的left和right是可以设置的），就是里面文字或图片的大小。

考官会继续追问，浏览器还有默认的天生inline-block元素（拥有内在尺寸，可设置高宽，但不会自动换行），有哪些？

答案： 、 、


本文标签： 元素 浏览器 标签 使用 页面

版权声明：本文标题：300道HTML、CSS习题及面试题(含答案) 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.roclinux.cn/p/1708991318a536133.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。