前端真题面试必备面试题及答案

1.overflow: scroll 时不能平滑滚动的问题怎么处理？

监听滚轮事件，然后滚动到一定距离时用

jquery

的

animate

实现平滑效果。

2.transform、animation和animation-duration的区别？

Transform: 它和width、left一样，定义了元素很多静态样式实现变形、旋转、缩放、移位及透视等功能，通过一系列功能的组合我们可以实现很炫酷的静态效果（非动画)。
Animation: 作用于元素本身而不是样式属性,属于关键帧动画的范畴，它本身被用来替代一些纯粹表现的javascript代码而实现动画,可以通过keyframe显式控制当前帧的属性值。
animation-duration：规定完成动画所花费的时间，以秒或毫秒计。

3.对 line-height 是如何理解的？

line-height

指的是一行字的高度，包含了字间距，实际上是下一行基线到上一行基线的距离。如果一个标签没有定义

height

属性，那么其最终表现的高度是由

line-height

决定的。一个容器没有设置高度，那么撑开容器的高度的是

line-height

,而不是容器内部的文字内容。把

line-height

值设置为

height

一样大小的值可以实现单行文字的垂直居中。

line-height

和

height

都能撑开一个高度，

height

会触发

haslayout

，而

line-height

不会。

4.抽离样式模块怎么写？述其思路。

可将

css

拆分成两部分：公共

CSS

和业务

CSS

。

网站的配色，字体，交互提取出为公共的

CSS

。这部分的

CSS

命名不应涉及具体的业务。对于业务

CSS

，需要有统一的命名，使用公共的前缀。

5.在网页中的应该使用奇数还是偶数的字体？

在网页中的应该使用“偶数”字体：

偶数字号相对更容易和

web

设计的其他部分构成比例关系，使用奇数号字体时文本段落无法对齐，宋体的中文网页排布中使用最多的就是

和

。

6.css hack原理及常用hack有哪些？

原理：利用不同浏览器对

CSS

的支持和解析结果不一样编写针对特定浏览器的样式。

常见的

hack

有： 属性hack、选择器hack、IE条件注释。

7.link 与 @import 的区别？

link 是HTML方式， @import 是CSS方式；
link最大限度支持并行下载，@import 过多嵌套导致串行下载，出现FOUC；
link 可以通过 rel="alternate stylesheet" 指定候选样式；
浏览器对 link 支持早于@import ，可以使用 @import对老浏览器隐藏样式；
@import必须在样式规则之前，可以在css文件中引用其他文件；

总的来说：

link

优于

@import

。

8.什么是 FOUC(Flash of Unstyled Content)？如何来避免 FOUC？

当使用

@import

导入

CSS

时，会导致某些页面在

IE

出现奇怪的现象：没有样式的页面内容显示瞬间闪烁，这种现象被称为“文档样式暂时失效”，简称

FOUC

。

产生原因：当样式表晚于结构性html加载时，加载到此样式表时，页面将会停止之前的渲染。等待此样式表被下载和解析后，再重新渲染页面，期间导致短暂的花屏现象。

解决办法：只要在

<head>

之间加入一个

<link>

或者

<script>``</script>

元素即可。

9.display,float,position有什么关系？

如果 display 为none，那么position和float都不起作用，元素不显示；
如果position值为absolute或者fixed，元素绝对定位，float的计算值为none，display根据下面的表格进行调整；
如果float不是none，框是浮动的，display根据下表进行调整；
其他情况下display的值为指定值总结起来：绝对定位、浮动、根元素都需要调整 display；

10.外边距折叠(collapsing margins)

毗邻的两个或多个

margin

会合并成一个

margin

，叫做外边距折叠。规则如下：

两个或多个毗邻的普通流中的块元素垂直方向上的margin会折叠；
浮动元素或inline-block元素或绝对定位元素的margin不会和垂直方向上的其他元素的margin折叠；
创建了块级格式化上下文的元素，不会和它的子元素发生margin折叠；
元素自身的margin-bottom和margin-top相邻时也会折叠；

11.有哪几种隐藏元素的方法？

visibility: hidden; 这个属性只是简单的隐藏某个元素，但是元素占用的空间任然存在；
opacity: 0;``CSS3属性，设置0可以使一个元素完全透明；
position: absolute; 设置一个很大的 left 负值定位，使元素定位在可见区域之外；
display: none; 元素会变得不可见，并且不会再占用文档的空间；
transform: scale(0); 将一个元素设置为缩放无限小，元素将不可见，元素原来所在的位置将被保留；
<div hidden="hidden"> HTML5属性,效果和display:none;相同，但这个属性用于记录一个元素的状态；
height: 0; 将元素高度设为 0 ，并消除边框；
filter: blur(0); CSS3属性，括号内的数值越大，图像高斯模糊的程度越大，到达一定程度可使图像消失；

12.li与li之间有看不见的空白间隔是什么原因引起的？有什么解决办法？

li

排列受到中间空白(回车/空格)等的影响，因为空白也属于字符，会被应用样式占据空间，产生间隔。解决办法：

在ul中用font-size：0（谷歌不支持）；可以使用letter-space：-3px;
设置float：left；

13.对浏览器内核的理解？

浏览器内核主要分为两个部分：渲染引擎和js引擎；

渲染引擎：负责取得页面的内容（html，xml，图像等）、整理讯息（加入css等）、以及计算网页的显示方式，然后对输出至显示器或者打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不同。所有网页浏览器、电子邮件客户以及其他所需要编辑、显示网络的应用程序都需要内核。
JS引擎：解析和执行Javascript来实现网页的动态效果。

最开始渲染引擎和

js

引擎没有明确的区分，后来

js

引擎越来越独立，内核就倾向于只渲染引擎。

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

对于结构的要求：（规范的标签可以提高搜索引擎对页面的抓取效率，对

SEO

很有帮助）

标签要闭合
标签字母小写
标签不允许随意嵌套

对于

CSS

和

JS

来说：

尽量使用外链CSS样式表和JS脚本。同时结构，表现和行为分为三块，符合规范。此外，还得提高页面渲染速度，提高用户体验。
尽量少用行内样式，保证结构和表现分离。标签的id和class等的属性命名要做到见文知意，标签越少，加载越快，用户体验就会越高。同时代码方面也会更易于维护，便于改版。
不需要变动内容，便可一同打印版本而不需要复制内容，提高网站易用性。

15.制作一个访问量很大的网站，如何管理所有的css文件，js和图片？

从人手，分工和同步方面回答：

前期团队必须确认好全局样式，编码模式；
代码风格，编写习惯保持一致；
标注样式编写人，各模块都要及时标注（标注关键样式调用的地方）；
对自己负责的页面进行标注；
CSS和JS分文件夹存并行存放，命名都要统一；
JS分文件夹存放，明明以该JS功能为准的英文翻译；
图片采用整合的.png格式存放，尽量整合在一起，方便将来管理；

16.视差滚动效果以及如何实现？

视差滚动

（Parallax Scrolling）

指网页滚动过程中，多层次的元素进行不同程度的移动，视觉上形成立体运动效果的网页展示技术（3D效果）。

实现方式：

CSS3实现：优点是开发时间相对较短，性能和开发效率比较好。缺点是不能兼容到低版本的浏览器；
JQuery实现：（通过控制不同层滚动速度，计算每一层的时间）优点是能兼容到各个版本，效果可控性好，缺点是开发起来对制作者的要求较高；
插件实现方式：例如使用parallax-scrolling,兼容性十分好；

17.对BFC规范(块级格式化上下文：block formatting context)的理解

BFC

规定了内部的

Block Box

如何布局。一个页面是由很多个

Box

组成的，元素的类型和

display

属性，决定了这个

Box

的类型。不同类型的

box

，会参与不同的

Formatting Context

（决定如何渲染文档的容器），因此

Box

内的元素会以不用的方式渲染，也是就是说

BFC

内部的元素和外部的元素不会相互影响。

定位方案：

内部的box会在垂直方向上一个接一个的放置；
box垂直方向的距离由margin决定，属于同一个BFC的两个相邻Box的margin会发生重叠；
每个元素margin box的左边，与包含块border box的左边相接触；
BFC的区域不会与float box重叠；
BFC是页面上的一个隔离的独立容器，容器里面的元素不会影响到外面的元素；
计算BFC的高度时，浮动元素也会参与计算。

满足下列条件之一就可以出发BFC：

根元素变化，即html；
float的值不为none（默认）；
overflow的值不为visible（默认）；
display的值为inline-block, tabke-cell，table-caption；
position的值为absolute或fixed;

18.元素竖向的百分比设定是相对于容器的高度吗？

一般来说，子元素的百分比单位都是以父元素为依据。但是

margin

和

padding

例外。元素的

height

是相对于容器的高度，但是元素的

margin

和

padding

是相对于容器的宽度。

19.经常遇到的浏览器的兼容性有哪些？原因，解决方法是什么，常用hack的技巧？

（1）、问题：

png24

位的图片在

ie

浏览器上出现背景。解决：做成

png8

；

（2）、问题：浏览器默认的

margin

和

padding

不同。解决：添加一个全局的

*{ margin： 0; padding： 0;}

；

（3）、问题：

IE

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

getAttribute()

获取自定义属性，而

Firefox

下,只能使用

getAttribute()

获取自定义属性。解决：统一通过

getAttribute()

获取自定义属性；

（4）、问题：

IE

下,

event

对象有

属性,但是没有

pageX

pageY

属性，而

Firefox

下,

event

对象有

pageX

pageY