Web前端开发面试题总结

1、简单介绍一下什么是盒模型？
网页上的每一个标签都是一个盒子,每个盒子都有四个属性：
内容（content）：盒子里面装的东西，网页中通常是指文字和图片（盒子中间装的东西）；
填充（padding）：内边距，比如买东西时怕盒子里面的东西损坏而添加的泡沫或者其它抗震的辅料（盒子里装的东西和边框的距离），填充只有宽度属性，每个HTML标记都可以看作一个盒子；
边框（border）：盒子本身（盒子的厚薄和颜色之分）；
边界（margin）：外边距（边框外边自动留白的空隙）；

这些属性我们可以把它看做我们日常生活中的盒子来理解，日常生活中所见的盒子也就是能装东西的一种箱子，CSS盒子模型都具备这些属性，所以叫它盒子模型。
2、position属性四个值：static、relative、absolute和fixed的区别和用法？
(1)、static（静态定位）：默认值；没有定位，元素出现在正常的流中（忽略top、bottom、left、right或者z-index声明）；
(2)、relative（相对定位）：生成相对的元素，定位为relative的元素脱离正常的文本流中，但其在文本流中的位置依然存在，它是默认参照父级的原始点为原始点，无父级则以文本流的顺序在上一个元素的底部为原始点，通过top、bottom、left、right的设置相对于其正常（原先本身）位置进行定位，可以通过z-index进行层次分级；
(3)、absolute（绝对定位）：生成绝对定位的元素，相对于static定位以外的第一个父元素进行定位。元素的位置通过top、bottom、left、right属性进行规定，可以通过z-index进行层次分级；
(4)、fixed（固定定位）：生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过top、bottom、left、right属性进行规定，可以通过z-index进行层次分级；
3、HTML5新标签和CSS3的新特性有哪些？
(1)、HTML5新标签：
section元素：表示页面中的一个内容区块，比如章节、页眉、页脚/页面；
article元素：页面中一块与上下文不相关的独立内容，比如一篇文章；
aside元素：表示article元素内容之外的、与article元素内容相关的辅助信息；
header元素：页面中的标题或者一个内容区块；footer：页面脚注；nav元素：页面中导航连接部分；video：定义视频(2)、CSS3新特性：
css3实现圆角（border-radius）阴影（box-shadow）对文字加特效（text-shadow）线性渐变（gradient）旋转（transform）：   transform：rotate（90deg）、 scale（0.5,0.8）、 translate（0px，-60px）、 skew（-90deg，0deg）；旋转、缩放、定位、倾斜增加了更多的css选择器：比如 背景rgba；在css3中引入一些伪元素： p:first-of-type 选择属于其父元素的收个<p>元素的每个<p>元素；还有媒体查询等等。
4、简述你所知道的css单位，简单描述一些？
% 百分比、em 自动适应用户所使用的字体（1em=当前的字体尺寸，2em=当前字体尺寸的2倍，某元素以12pt显示时，2em=24pt）、rem  媒体查询、px  像素（计算机屏幕上某一点）。
5、前端优化的方法？（两部分）(1)、面向内容的优化：图片优化、css/js优化、压缩css/js，减少http请求，减少DNS查找、避免重定向，使用ajax缓存，延迟载入组件，减少DOM元素数量等等；(2)、面向server：缩小cookie，针对web组件使用域名无关性的。6、$.get（）与$.post（）方法区别？(1)、get请求是通过URL提交的，post是通过http消息实体提交的；(2)、get提交有大小限制（2KB）,post方法不受限制；(3)、get方法会被缓存下来，可能有安全性问题，post没有这类问题；(4)、get方式请求数据的效率相比post方式较高；(5)、get方式通过$.get（）获取，post（）方式通过$.post（）获取。7、浏览器本地存储：
在较高版本的浏览器中，js提供了sessionStorage和globalStorage，在html5中提供的localStorage来取代globalStorage。
html5中的web Storage包括了两种存储方式：sessionStorage和localStorage。
sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也会随之销毁，因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储；
localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的；web Storage和cookie的区别：
(1)、两者概念相似，区别在于web Storage是为了更大容量存储设计的，cookie大小受限制，当请求一个新的页面的时候cookie都会被发送过去，这样无形中浪费了带宽，而且cookie需要指定作用域，不可以跨域调用；(2)、web Storage拥有setItem、getItem、removeItem、clear等方法，cookie需要前端开发者自己封装setCookie、getCookie；(3)、cookie是不可获取的：cookie的作用是与服务器进行交互，作为http规范的一部分而存在，而web Storage仅仅是为了在本地“存储”数据而生；(4)、localStorage和sessionStorage都具有相同的操作方法，例如;setItem、getItem和removeItem等。cookie和session的区别：(1)、cookie数据存放在客户的浏览器上，session存放在服务器上
(2)、coolie不是很安全，别人可以分析存放在本地的cookie进行cookie欺骗，考虑到安全性应该使用session
(3)、在减轻服务器性能方面，cookie优先于session，session会在一定时间内保存在服务器上，当访问量增多时会占用服务器性能
(4)、单个cookie保存的数据不能超过4K，很多浏览器都限制一个站点最多保存20个cookie
(5)、将登陆账号、密码等重要信息存放在session，如果其他信息需要保留，可以放在cookie中
8、CSS中display：none和visibility：hidden的区别？display：none 隐藏对应的元素，位置不存在，其本身也不存在。
visibility：hidden 隐藏对应的元素，在文档布局中仍保留原来的空间。
9、CSS中link和@import的区别？(1)、link属于HTML标签，@import是CSS提供的；(2)、页面被加载时link会被同时加载，@import引用的css会等到页面被加载完时再加载；
(3)、import只在IE5以上才能识别，link是HTML标签，无兼容问题；
(4)、link方式的样式的权重高于@import的权重。
10、CSS选择器有哪些？那些属性可以继承？优先级算法如何计算？CSS3新增伪类有哪些？(1)、CSS选择器：id选择器：#myId类选择器：.myclassname标签选择器：div，p，h1相邻选择器：div+p子选择器：ul>li后代选择器：li a通配符选择器：*属性选择器：input[type="text"]伪类选择器：a：hover，li：nth-child(2)、可继承的样式：font-size，font-family，color，text-indext
(3)、不可继承的样式：border，padding，margin，width，height
优先级就近原则，同权重情况下样式定义最为准，载入样式以最后的定位为准：
优先级：！important > id > class > tag                  important > 内联 > id(4)、CSS3新增伪类：
p：first-of-type 选择属于其父元素的首个<p>元素的每个<p>元素；p：last-of-type 选择属于其父元素的最后<p>元素的每个<p>元素；
p：only-of-type 选择属于其父元素唯一的<p>元素的每个<p>元素；
p：only-child 选择属于其父元素的唯一子元素的每个<p>元素；
p：nth-child(2) 选择属于其父元素的第二个子元素的每个<p>元素；
：enabled ：disabled  控制表单控件的禁用状态：checked  单选框或复选框被选择11、浮动元素引起的问题和清除浮动的方法有哪些？引起的问题：(1)、父元素的高度无法撑开，影响与父元素同级的元素；(2)、与浮动元素同级的非浮动元素（内联元素）会跟随其后；
(3)、若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构。
清除浮动的方法：
(1)、使用css中的clear：both；属性，给父元素添加clearfix样式
.clearfix：after{content：“”；display：block；height：0；clear：both；visibility：hidden；}.clearfix{display：inline-block；}/*for IE/Mac*/(2)、给父级元素设置overflow：hidden；属性
(3)、给父元素添加高度。
12、JQuery中Ajax请求是怎么解决的？(1)、ajax是一种综合技术，利用XMLHttpRequest来获取/发送数据，利用js来操作DOM，利用html+css显示渲染DOM，重新渲染局部界面，利用异步的方式和后台进行交换数据，可以无刷新的获取/发送数据。(2)、缺点：a、不同版本的浏览器对XMLHttpRequest对象支持度不足（如IE5之前）
b、前进、后退的功能被破坏c、搜索引擎的支持度不够（搜索引擎爬虫还不能理解js引起变化数据的内容）d、开发调试工具缺乏（相对于其他语言的工具来说，js或ajax调试开发很少）(3)、异步和同步：a、使用ajax最关键的地方，就是实现异步请求，接受响应及执行回调b、ajax使用同步模式属于阻塞模式，会导致多条线路执行时又必须一条一条执行，会让web出现假死状态，所以，ajax大部分采用异步模式13、JQuery中Ajax处理跨域的三种方式：(1)、代理(2)、XHR2
(3)、jsonp（只支持get请求）
14、JQuery中事件绑定有几种？最常用的是bind、on（官方推荐用on，遵循项目规范）15、阻止事件冒泡和阻止默认行为：(1)、阻止事件冒泡：IE：  cancelBubble       ====== 》  event.cancelBubble=true;非IE： stopPropagation    event.stopPropagation（）；在绑定事件中加入event参数，在函数中增加event(2)、阻止默认行为：IE： returnValue非IE： preventDefault  16、HTTP状态码：100 Continue 继续，一般在发送post请求时，已发送了http header之后服务端将返回此信息，表示确认，之后发送具体参数信息
200 OK 正常返回信息
201 Created 请求成功并且服务器创建了新的资源
202 Accepted 服务器已接受请求，但尚未处理
301 Moved Permanently 请求的网页已永久移动到新位置。
302 Found 临时性重定向。
303 See Other 临时性重定向，且总是使用 GET 请求新的 URI。
304 Not Modified 自从上次请求后，请求的网页未修改过。

400 Bad Request 服务器无法理解请求的格式，客户端不应当尝试再次使用相同的内容发起请求。
401 Unauthorized 请求未授权。
403 Forbidden 禁止访问。
404 Not Found 找不到如何与 URI 相匹配的资源。

500 Internal Server Error 最常见的服务器端错误。
503 Service Unavailable 服务器端暂时无法处理请求（可能是过载或维护）。17、ES6中let和const的区别：
let声明的变量、值和类型都可以改变，没有限制，const声明的变量不可以改变值。