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

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 一样，定