前端面试题：
第一道：如何实现盒子边框圆角及阴影效果？
1用border-radius 属性是一个简写属性，用于设置四个 border-*-radius 属性。
提示：该属性允许您为元素添加圆角边框！
可以分开设置，如果四边角度一样就可以省略，直接写角度即可。
2 用box-shadow（sha`dang）是css3的一个新属性，用来实现阴影效果，阴影分为内阴影和外阴影两个效果，可以通过逗号添加多个阴影效果。
<style>
.rect {
border: 1px solid red;
height: 100px;
width: 200px;
border-radius: 10px;
box-shadow: 4px 4px 5px rgba(0, 0, 0, 0.5)
}
</style>
</head>
<body>
<div class="rect"></div>
效果如上：
第二道：
[if !supportLists]· [endif]什么是闭包，闭包的用途是什么？
答案
在函数内部调用函数外部的变量，那这个变量与这个函数称为闭包。
<<script>
function f1() {
var a = 1
function f2() {
console.log(a)
}
return f2
} var result = f1()
result() // 1
</script>
上面的代码中函数f2内部调用了函数外部的变量a，故函数f2与变量a形成了闭包。最后将f2与变量a封装成函数f1，便可以在外部读取到函数f1内声明的变量，避免了污染全局变量。闭包的作用：1)可以读取函数内部声明的变量，避免污染全局变量；2）让函数内声明变量的值一直保存在内存之中。
包就是能够读取其他函数内部变量的函数。由于在Javascript语言中，只有函数内部的子函数才能读取局部变量，因此可以把闭包简单理解成“定义在一个函数内部的函数”。
所以，在本质上，闭包就是将函数内部和函数外部连接起来的一座桥梁。闭包可以用在许多地方。它的最大用处有两个，一个是前面提到的可以读取函数内部的变量，另一个就是让这些变量的值始终保持在内存中。
闭包有三个特性：
1.函数嵌套函数 2.函数内部可以引用外部的参数和变量 。3.参数和变量不会被垃圾回收机制回收。
第三道：
请说出至少8个 HTTP 状态码，并描述各状态码的意义。例如：状态码200表示响应成功；
一般情况下：
[if !supportLists]1. [endif]状态码201表示创建成功2.状态码300表示多种选择3.状态码301表示永久移动4.状态码302表示临时移动5.状态码400表示用户请求语法错误6.状态码404表示服务器找不到用户请求的网页7.状态码500表示服务器内部错误，无法完成请求8.状态码502表示服务器未打开
2开头 （请求成功）表示成功处理了请求的状态代码。
3开头 （请求被重定向）表示要完成请求，需要进一步操作。 通常，这些状态代码用来重定向。（重定向的意思一般就是指换网站了或者说网站没了比如有的网站看着看着就被封了，或者转成广告正经网站不受美利坚保护了。）
4开头 （请求错误）这些状态代码表示请求可能出错，妨碍了服务器的处理。
5开头（服务器错误）这些状态代码表示服务器在尝试处理请求时发生内部错误。 这些错误可能是服务器本身的错误，而不是请求出错。（5开头码一般不常见，了解一下知道就好了）
第四道：
阐述清除浮动的几种方式：
1.父级div定义 height
原理：父级div手动定义height，就解决了父级div无法自动获取到高度的问题。
优点：简单、代码少、容易掌握
缺点：只适合高度固定的布局，要给出精确的高度，如果高度和父级div不一样时，会产生问题
2.父级div定义 overflow:hidden
原理：必须定义width或zoom:1，同时不能定义height，使用overflow:hidden时，浏览器会自动检查浮动区域的高度
优点：简单、代码少、浏览器支持好
[if !supportLists]3. [endif]在盒子中增加一个.clearfix::；
原理：添加一个空div，利用css提高的clearfix:：清除浮动，让父级div能自动获取到高度
优点：简单、代码少、浏览器支持好、不容易出现怪问题
缺点：不少初学者不理解原理；如果页面浮动布局多，就要增加很多空div，让人感觉很不好
第五道
编写一个方法去掉数组里面重复的内容var arr=[1,2,3,4,5,1,2,3]
<script>
var arr = [1,2,3,4,5,1,2,3]
//定义一个新的数组
var s = [];
//遍历数组
for (var i = 0; i < arr.length; i++) {
if (s.indexOf(arr[i]) == -1) { //判断在s数组中是否存在，不存在则push到s数组中
s.push(arr[i]);
}
}
console.log(s);//12345
</script>
第六题undefined和 null 区别
null： Null类型，代表“空值”，代表一个空对象指针，使用typeof运算得到 “object”，所以可以认为它是一个特殊的对象值。
undefined： Undefined类型，当一个声明了一个变量未初始化时，得到的就是undefined。
javaScript权威指南： null 和 undefined 都表示“值的空缺”，可以认为undefined是表示系统级的、出乎意料的或类似错误的值的空缺，而null是表示程序级的、正常的或在意料之中的值的空缺。
第七题：
讲几种简单布局，例如左边固定宽度右边自由，或者中间固定两边自由宽度。
float方法（两边固定中间自由伸缩）：
通过使两边的div左右浮动，脱离文档流，再为中间的div设置margin-left,margin-right值为左右div的宽度即可.中间的宽度设置为百分百。（缺点时div的排列要把中间的放在最下面）
<body>
<div class="left">我最左边的</div>
<!-- <div class="center">我是中间的</div>错误 -->
<div class="right">我最右边的</div>
<div class="center">我是中间的</div><!--正确-->
</body>
flex方法（中间固定两边自由伸缩）一般用于手机端布局
<style>
.wrap {
display: flex;佛莱克斯
flex-direction: row;/* 让容器内盒子水平显示*/ 刀软可肾
}
.center {
width: 800px;
background: gold;
}
.left,
.right {
/*flex-grow 属性用于平均分享父盒子剩余空间。*/
flex-grow: 1;
height: 30px;
background: red;
}
</style>
</head>
<body>
<div class="wrap">
<div class="left">左边</div>
<div class="center">中间</div>
<div class="right">右边</div>
</div>
第八题
[if !supportLists]1. [endif]jQuery库中的 $() 是什么？
$()函数是 jQuery() 函数的别称，乍一看这很怪异，还使 jQuery 代码晦涩难懂。其实非常好理解。$()函数用于将任何对象包裹成 jQuery 对象，接着你就被允许调用定义在 jQuery 对象上的多个不同方法。甚至可以将一个选择器字符串传入 $() 函数，它会返回一个包含所有匹配的 DOM 元素数组的 jQuery 对象。这个问题我已经见过好几次被提及，尽管它非常基础，它经常被用来区分一个开发人员是否了解 jQuery。
第九题
Js中的事件冒泡和事件委托
1.事件冒泡：
通俗易懂的来讲，就是当一个子元素的事件被触发的时候（如onclick事件），该事件会从事件源（被点击的子元素）开始逐级向上传播，触发父级元素的点击事件。
2.事件委托
事件委托，首先按字面的意思就能看你出来，是将事件交由别人来执行，再联想到上面讲的事件冒泡，就是将子元素的事件通过冒泡的形式交由父元素来执行。
JS事件流原理图如下：画图举例
由此可以知道 1、一个完整的JS事件流是从window开始，最后回到window的一个过程 2、事件流被分为三个阶段(1~5)捕获过程、(5~6)目标过程、(6~10)冒泡过程
第十题
简述ajax的优缺点
优点：
1）无刷新更新数据（在不刷新整个页面的情况下维持与服务器通信）
2）异步与服务器通信（使用异步的方式与服务器通信，不打断用户的操作）
3）前端和后端负载均衡（将一些后端的工作交给前端，减少服务器的负担）
4）界面和应用相分离（ajax将界面和应用分离也就是数据与呈现相分离）
缺点：
1）ajax不支持浏览器back按钮
2）安全问题 Aajax暴露了与服务器交互的细节
3）对搜索引擎的支持比较弱
简述原型链
这些原型对象都像链条一样连接在一起，所以我们把这种形式叫做原型链
原型链最主要的作用是继承。只要是在原型链上的属性和方法，这个对象都能用
访问规则：
先看自己对象里有没有，有拿来用，没有找自己的原型，原型有拿来用，没有，再找原型的原型，有拿来用，没有继续找
直到找到null，都还没有，就返回undefined
图解原型链：
Constructor康死状克特 prototype 普特太仆
