web前端开发面试题

【#第一文档网# 导语】以下是®第一文档网的小编为您整理的《web前端开发面试题》，欢迎阅读！

1、网页设计采用div+css有什么好处？

布局实现了表现与内容的分离，大大缩减页面代码，符合W3C的标准，兼容性更好；易于后期网站的更新、维护；SEO的优化：对搜索引擎更加友好，更容易被搜索引擎收录。

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

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

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

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

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

3、CSS属性overflow用于设置元素超过宽度时是否隐藏或显示滚动条

4、ie中如何让超出宽度的文字显示为省略号？

{overflow:hidden;width:xxx;white-space:nowrap;text-overflow:ellipsis;}

5、<label for="ye"><input id="ye" type="checkbox" />文本</label>点击标签中的文本，可使多选框聚焦

6、以图换字，其实是为了保证页面的可读性，这样既有利于搜索引擎，又有利于结构查看；只需要将字体和行高设置为0，然后overflow:hidden就行;不过这样在Safari和Chrome下还是会有1px高的字出现，所以应该再设置一下字体的颜色和背景图相同或相近。以此就同样可以达到隐藏内容的目的，暂时还没发现有什么副作用，强烈推荐。

7、DIV CSS设计中如何去掉链接的虚线框？

IE下：<a href="#"onfocus="this.blur();"> FF下:a{outline:none;}

8、如何区别display:none与visibility:hidden?

相同的是display:none与visibility:hidden都可以用来隐藏某个元素；

不同的是display:none在隐藏元素的时候，将其占位空间也去掉；而visibility:hidden只是隐藏了内容而已，其占位空间仍然保留。

9、CSS的伪类有哪些，有什么作用，各个浏览器下都兼容吗？

W3C规范中伪类有：

active、hover、link、visited 【CSS1】

所有主流浏览器都支持以上伪类，但是只在对<a href>标签上的支持最好。

【CSS2】的有3个

focus ： 如果规定了<!DOCTYPE>，将在主流浏览器&IE8+中支持(否则IE不支持)

first-child：必须声明<!DOCTYPE>才能够确保在IE中正常支持

lang：如果规定了<!DOCTYPE>，将在主流浏览器&IE8+中支持(否则IE不支持)

10、当float和margin同时使用时， IE6的双倍边距BUG如何解决？

解决办法就是是加上display:inline 代码

本文来源：https://www.dywdw.cn/60642a0b4a7302768e99399c.html