2016年web前端开发工程师面试题整理.pdfVIP

2016年前端开发工程师面试题 HTML+CSS部分 1.行内元素和块级元素?img算什么?行内元素怎么转化为块级元素? 行内元素：和有他元素都在一行上，高度、行高及外边距和内边距都不可改变，文字图片的 宽度不可改变，只能容纳文本或者其他行内元素；其中 img是行元素 块级元素：总是在新行上开始，高度、行高及外边距和内边距都可控制，可以容纳内敛元素 和其他元素； 行元素转换为块级元素方式：display：block； 2.将多个元素设置为同一行?清除浮动有几种方式? 将多个元素设置为同一行：float，inline-block 清除浮动的方式：方法一：添加新的元素 、应用 clear：both； 方法二：父级 div定义 overflow: hidden； 方法三：利用:after和:before来在元素内部插入两个元素块，从面达到清除浮动的效果。 .clear{zoom:1;} .clear:after{content:””;clear:both;display:block;height:0;overflow:hidden;visibility:hidden;} 3.怪异盒模型 box-sizing？弹性盒模型|盒布局? 在标准模式下的盒模型：盒子总宽度/高度=width/height+padding+border+margin 在怪异模式下的盒模型下，盒子的总宽度和高度是包含内边距 padding和边框 border宽度 在内的，盒子总宽度/高度=width/height + margin = 内容区宽度/高度 + padding + border + margin; box-sizing有两个值一个是 content-box，另一个是 border-box。 当设置为 box-sizing:content-box时，将采用标准模式解析计算； 当设置为 box-sizing:border-box时，将采用怪异模式解析计算。 4.简述几个 css hack? （1）图片间隙 在 div中插入图片，图片会将 div下方撑大 3px。hack1：将div与img写在同一行。hack2： 给img添加 display：block； dt li 中的图片间隙。hack：给img添加 display：block； （2）默认高度，IE6以下版本中，部分块元素，拥有默认高度（低于 18px） hack1：给元素添加：font-size：0； hack2：声明：overflow：hidden； 表单行高不一致 hack1：给表单添加声明：float：left；height： ；border： 0； 鼠标指针 hack：若统一某一元素鼠标指针为手型：cursor：pointer； 当 li内的 a转化块元素时，给 a设置 float，IE里面会出现阶梯状 hack1：给 a加 display：inline-block； hack2：给 li加 float：left； 5.link import两者之间区别? （1）老祖宗的差别，@important只能加载 css （2）加载顺序的差别，最后加载 import （3）兼容性的差别，老浏览器不兼容 （4）使用 dom控制样式的差别 6.工作职责?公司人员?5：3前后端比例?为甚离职? 7.href和 src区别?title和 alt href (Hypertext Reference)指定网络资源的位置（超文本引用），从而在当前元素或者 当前文档和由当前属性定义的需要的锚点或资源之间定义一个链接或者关系，在 link和 a 等元素上使用。 src (Source)属性仅仅嵌入当前资源到当前文档元素定义的位置，是页面必不可少的一部 分，是引入。在 img、script、iframe 等元素上使用。 title：既是 html标签，又是 html属性，title作为属性时，用来为元素提供额外说明信息. alt：alt是 html标签的属性，alt属性则是用来指定替换文字，只能用在 img、area和 input 元素中（包括 applet元素），用于网页中图片无法正常显示时给用户提供文字说明使其了 解图像信息. 8.transform？animation？区别?animation-duration Transform:它和 width、left一样，定义了元素很多静态样式实现变形、旋转、缩放、 移位及透视等功能，通过一系列功能的组合我们可以实现很炫酷的静态效果（非动画)。 Animation:作用于元素本身而不是样式属性,属于关键帧动画的范畴，它本身被用来替代 一些纯粹表现的 javascript代码而实现动画,可以通过 keyframe显式控制当前帧的属性值. animation-durati