2016年前端面试总结（实习生）
一、技术上的：
1. IE6底下怎么固定网页中的小窗口（页面中的悬浮框） ?
- fixed元素的绝对位置是相对于HTML元素来说，滚动条是body元素的。解决代码如下
<style>
html{overflow:hidden;} /*一定要写*/
body{ height;100%;overflow:auto;}
#rightform form{position:absolute;}
style>
2.请问 使用jsonp只能使用get方法进行提交，表单数据提交不上去你会怎么做?
- jsonp只能使用get方法进行提交，表单数据提交不上去你会怎么做，jsonp默认的ajax请求是异步的，并且jsonp只有get方法，没有post方法。
3.你知道angularJS当中的判断语句 ng-if 、ng-swith 么?
- ng-if 一般用于input 或者 button 属性值为false/true 类似于ng-view 用于显示或者隐藏，都需要绑定在作用域上。
4.你使用H5页面APP端展示（下拉刷新，上拉加载） 不能使用框架，使用原生js ，你是怎么实现的？
http://www.jb51.net/article/98394.htm 这里有详细介绍
- 思路：手指触摸屏幕向上滑动，使用scroll()方法，然后监听判断是否到达了页面底部、【过程中要计算滚动高度】如果到达了页面底部，然后就用ajax 请求下一页的数据，JS加载DOM节点然后显示到页面
1、引用iScroll.js， 在初始化时添加两个事件监听：touchMove、DOMContentLoaded。
2、实现iScroll插件的onScrollEnd事件， 也就是在这个事件里调用你自己的ajax方法实现数据的刷新和追加。
3、上拉加载更多请求后台时就相当于分页请求数据，这时候需要在ajax请求时发送pageIndex参数，而初始化加载时需要从后台返回一个pageCount以便前台判断。
4、最关键的就是实现下拉刷新方法(pullDownAction)和上拉加载更多(pullUpAction)方法。
5.你知道HTML 5 有哪些新特性么?
H5 不是基于SGML 标准通用标记语言（Standard Generalized Markup Language）、新的文档类型 、脚本和链接无需type html语义化
H5 当中添加了很多新的标签
- 结构标签：Hgroup、Header和Footer和功能标签：video、audio、mark、small) canvas(图像)
- 新的属性（占位符 (placeholder)、 required 、autofocus 、controls、pattern等 表单属性的丰富）
- 移除了 原先表示样式的标签 big center font s 和功能不是很强的标签 仅用CSS样式改变 （text-decoration:line-though; underline overline）
H5 功能 上：添加了画布 多媒体 拖拽 缓存技术 本地数据库 sqlLite indexDB
- canvas存在兼容问题 区分 HTML和HTML5 : 看DOCTYPE 看HTML 文档中的标签
6.你作品中的××网页，是怎么布局的，怎么做的，做了哪些?
- 对于我的××网作品，我主要使用DIV+CSS进行行式布局（从上往下）和列式布局（从左往右）、并且对其主页，列表页，详细页，以及用户注册，登陆等全套静态页面的制作，并且在制作前期使用Photoshop进行网页中icon和图片的切片，在制作过程中使用IEtest进行了不同浏览器的测试，解决了目前主流浏览器的兼容问题。
7.可以说说图片轮播（图片翻转）你是怎么做到的（实现的）？
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>轮播title>
<style type="text/css">
*{ margin: 0px; padding: 0px; }
#div_box{width: 170px; height: 165px; border: 10px solid #dddddd; margin: 25% auto; overflow: hidden;}
.ul_box{width: 680px; height:165px;position: relative;right: 0;}
.ul_box>li{float: left;width: 170px; height: 165px;list-style: none;}
style>
<script type="text/javascript">
window.οnlοad=function () {
var ul=document.getElementById("ul_box");
var lis=ul.children;
// ul.style.right=pos+"px";
function move() {
var pos=0;
function add() {
if(pos<510){
pos+=170;
}else {
pos=0;
}
ul.style.right=pos+"px";
}
setInterval(add,1000);
/*var interval= setInterval(add,100);
ul.οnmοuseοver=function () {
console.log(1);
clearInterval(interval);
};
ul.οnmοuseleave=function () {
console.log(2);
var interval= setInterval(add,100);
}*/
}
move();
};
script>
head>
<body>
<div id="div_box">
<ul class="ul_box" id="ul_box">
<li><img src="sh-yw-01mt.jpg" alt="" width="170px" height="165px">li>
<li><img src="sh-yw-02dl.jpg" alt="" width="170px" height="165px">li>
<li><img src="sy-yw-04gk.jpg" alt="" width="170px" height="165px">li>
<li><img src="sy-yw-05hy.jpg" alt="" width="170px" height="165px">li>
ul>
div>
body>
html>
8.IE 8 底下的浏览器不支持圆角（box-radio）属性，如果页面遇到圆角你会怎么做？
- 使用圆角背景替代圆角属性
9.你对JS当中的面向对象了解多少？了解哪些 ？ 你说说吧
- Javascript是面向对象开发的脚本语言，所以在JS中就有很多内置对象（包括：Object、Array、Function、Pattern、Math 、包装器函数【String、Number、Boolean】），既然javascript是面向对象开发的，那么面向对象的前提：抽象，。抽象：一、创建对象（简单对象的创建）；二、封装——构造函数/工厂方法；三、继承——原型链的继承（属性的继承），目前这是我对JS的个人理解。
10.Git当中的项目会进行分支么？
- 对于Git的使用，主要是公司为了便于开发使用的代码托管工具，目前只要能够简单使用GitHub 进行代码的clone、Push、Pull、更新后Push即可【面试官不会问详细的】对于分支 本人还在学习中。。。
11.你对于PSD格式的图片会进行切片（抠图）么？
- 肯定说会的，而且还要告诉面试官，你狠熟练，【越简单的问题越是要细心回答，不能认为这个是小儿科的问题或者说太简单的工作】切片并没有想象中的那个简单。
12.一个div我想让他居中，但是不给div（固定宽度和不固定宽度）居中显示，你有几种方法，全部说出来？
- 1、CSS中首选的让元素水平居中的方法就是使用margin属性—将元素的margin-left和margin-right属性设置为auto即可。在实际使用中，我们可以为这些需要居中的元素创建一个容器作用的div。需要特别注意的一点就是，必须为该容器指定宽度width、
- 2、使用text-align实现DIV CSS居中 将该属性值设置为center并应用到body元素上即可。（CSS hack技术–>之所以说它是hack，是因为这种方法并没有将文本属性应用到文本上，而是应用到了作为容器的元素上。这也给我们带来了额外的工作。在创建好布局必须的div之后，我们要按照如下代码为body应用text-align属性）这种做法是彻头彻尾的hack，但它却能兼容大多数浏览器，所以在某些情况下也自然必不可少。【BUG：之后会出现什么问题吗？body的所有子孙元素都会被居中显示。因此，我们就需要用再写一条规则，让其中的文本回到默认的居左对齐：】
- 3、定位，（相对，绝对，使用百分比）也可以做到
- 4、在不设置 Div 元素的宽度（width）的情况下，如何让 Div 元素居中：
使用定位，并且使用百分比，相对绝对都可以（前提是要有容器，让子集撑起父级，然后让父级使用定位元素+百分比）
<div class="wrap">
<div class="inner">
让这个div居中
div>
div>
<style>
.wrap { float: left; /* 自适应内容宽度 */position: relative; left: 50%;background-color: #dddddd;}
.inner { position: relative; left: -50%;background-color: #cccccc; }
style>13.一个盒子里面有两个子div 我给外部的100%里面的一个宽度20%，一个80%、浮动，会出现什么情况
- div盒子直接使用百分比父级撑不起来，要想让父级撑起来，必须加overflow：hidden；属性，或者给父级加
也可以撑起父级 或者直接给父级指定宽度。
14.ajax是同步还是异步？怎么个异步你是怎么用代码实现的 ？
- ajax全称 asynchronous javascript and xml, 本就是为异步而生的.
- 异步和同步其实在这里都可以做。异步虽然不能直接得到返回值。但是有一个回调函数可以使用，现在, 在chrome和firefox中使用同步ajax会收到警告:
- 一般好像都是异步用的多，同步也可以用异步在回调里面实现。并且用同步的时候会卡死浏览器。
- 但ajax的异步和同步方法还是有区别的，区别就是同步方法是立即请求后台将结果返回，而异步则是在回调里才知道结果。（代码的后期补上）
15.一个input框前面出现一个图标 你有几种方法实现 把你所有知道的说出来 ？
- 使用标签+img(图片)浮动；
- 使用display:inline-block;
- 对目标icon进行定位（position），
- 使用图片精灵技术（sprite）使用背景background：url() x y；设置图片显示的位置
- 使用外部 资源的icon,比如bootstrap框架里自带的glopyicon等
16.说出两种网页优化的方法？
- 1、优化图片资源的格式和大小；
- 2、对js, CSS代码进行打包压缩打包工具(grunt、gulp) ；开启网络压缩(gzip)；
- 3、使用浏览器缓存(同一个站点下面的不同页面，往往都会复用一部分资源文件，如果把这些资源文件设置为可缓存的)；
- 4、减少重定向请求(对网页最好使用响应式布局，让其适应不同终端)；
17.如何对页面进行响应式布局 响应式布局分为(布局的响应以及文本文字的响应rem)
- 1.布局及设置meta标签，
- 2.宽度不固定，可以使用百分比
首先我们应该遵循移动端优先，交互和设计以移动端为主，pc则作为移动端的扩展，一个页面需要兼容不同终端，那么有两个关键点是我们需要去做到响应式的：响应式布局和响应式内容（图片、多媒体）
18.浏览器默认字体是16px Chrom中设置小于12px字体需要使用： -webkit-text-size-adjust:none; body{font-size:14px;}
19.(网络)当你在浏览器中输入一个网址，浏览器内部会发生什么？
http://www.cnblogs.com/SarahLiu/p/5954832.html 详解
- 1.敲域名回车
2.查询本地的DNS缓存，以找到域名对应的主机IP地址（若有，则跳到4）
3.查询远程域名根DNS，找到IP地址
4.向远程IP地址的服务器发送请求（若请求失败且未经过2，则返回2，若再再次失败，返回错误代码）
5.服务器响应请求，向用户发送数据
6.浏览器对返回的数据进行处理（浏览器渲染）
7.浏览器显示给用户
DNS 是域名系统 (Domain Name System) 的缩写，是因特网的一项核心服务，它作为可以将域名和IP地址相互映射的一个分布式数据库，能够使人更方便的访问互联网，而不用去记住能够被机器直接读取的IP数串。
20.jQuery中hover,mouseover的区别？
21.CSS3写一个背景变换的动画？
22.使用js写一个java中trim()方法 去除左右两边多余空格？
23.PHP中写一个前一天的日期，格式为2016～12～01？
24.你如何理解跨域请求，有哪些方法解决跨域资源共享除了jsonp还有哪些？
二、 非技术问题
（1）. 面试总结：
- 请做一下自我介绍
- 你为什么来到这里，你有什么职业目标么(目前什么打算)
- 你有什么要问我的(必问)
- 你有接受过系统的学习么
- 你的这些项目都是什么时候做的
- 不要提及以前的面试
- 你的目前的发展 你的薪资 我往低的给薪资你可以接受么？
- 你会跳槽么？ 你以后会想跳槽么？ 面试官看得不是结果 而是你对解决问题的思路和态度
- 沉下心来读别人的代码 站在面试官的和公司实际角度解决问题。
- 不要总是我认为… 问什么答什么 别说无关的答案 用自己思路解决面试问题
- 使用过flash动画设计
- 设计网站 Behance Dribble
细节决定一切，我在努力，你呢？