整理下我所遇到的前端面试题

整理下我在面试的时候所遇到的一些问题,想到哪里就更新到哪里.(ps:不定期更新~)

Q1.请说出css选择器ul>li+li表示的含义,并写出选择前5个li

表示选择除了第一个li的所有li
ul>li:not(:nth-of-type(n+5))

Q2.请说出html5的常用标签,分别应用于什么情景

header(页眉),footer(页尾),nav(导航),article(独立的文章内容),section(章节,对页面的内容进行分块,模块),aside(侧边栏,广告),hgroup(标题或标语的组合),address(地址),menu(菜单)

Q3. 请说下CSS3里transitions, transforms和animation的区别

Transitions作用:平滑的改变CSS的值.无论是点击事件，焦点事件，还是鼠标hover，只要值改变了，就是平滑的，就是动画 eg: transition: background-color 0.3s ease;
transitions属性: transition-property ://指定过渡的性质，比如transition-property:backgrond 就是指backgound参与这个过渡 transition-duration://指定这个过渡的持续时间
transition-delay: //延迟过渡时间
transition-timing-function:*//指定过渡类型，有ease(越来越慢) | linear(匀速运动) | ease-in(先慢后快) | ease-out (先快后慢)| ease-in-out(先慢后快再慢) | cubic-bezier(贝塞尔曲线)
transform 变换，使用过photoshop的人应该知道里面的Ctrl+T自由变换。transform就是指的这个东西，拉伸(skew deg)，压缩(scale %)，旋转(rotate deg)，偏移(translate px) eg:.trans_skew { transform: skew(35deg); }
animation 动画 @keyframes name{不同时间段样式规则 0-100%} ,animation:名字, 播放时间,效果,开始时间

Q4. 行内元素,块状元素,都有哪些?

行内元素:a,abbr,b,br,em,font,i,img,input,s,select,span,strong,sub,sup,tr,u,textarea
块状元素:address,div,center,dl,form,h1-h6,hr,menu,ol,p,pre,table,ul

Q5. 说下div的盒模型

标准盒子所占位置：border+padding+margin+width
IE盒子的大小：border+padding+width
IE盒子所占位置：margin+width
标准盒子的大小 ：width
改变盒模型用 box-sizing:border-box/content-box/padding-box
border-box border+padding+width
content-box: width
padding-box:padding+width

Q6. img的格式有哪些,

gif格式 : 支持256种颜色，支持文件背景透明，支持动画 ；一般文件小下载快
jpg格式 : 不支持文件透明，不支持动画效果，有损压缩格式，但图像颜色品质高（精度高），一般用于数码相片。位图（由一个一个像素像素点组成）；一般文件大、下载快
png格式：无损压缩格式.矢量图，支持文件背景透明（png8 - 256色,适合单一颜色的logo icon. png24 - 颜色更丰富,色彩更鲜艳）
gif, svg,webp(谷歌开发的一种旨在加快图片加载速度的图片格式,体积只有jpeg的2/3)

Q7. 垂直居中都有哪些办法

1. 利用position 和 负边距(transform:translateY(-50%) )
2. display:tabel-cell; vertaical-align:middle
3. display:flex; justify-content:center; aligin-items:center
4. line-height ,height

Q8, 用css写出: 2个div并列并且全屏,已知左侧固定宽度,右边自适应宽度,有几种解决办法

1. 父级display:flex, 子级:flex:200px;flex:1
2. 第一个div左侧定位,第二个div padding-left:200px;
3. float:left; 第二个div float:left; width:calc(100%-200px)
4. 最外层div display:table.border-collapse:separate(边框独立) 中间层div display: table-row, 最里面的div display:table-cell (让div以单元格显示)

Q9. xhtml html 和 xml 的区别

HTML，超文本标记语言，是语法较为松散的、不严格的Web语言；
XML，可扩展标记语言，主要用于存储数据和结构，可扩展；
XHTML，可扩展超文本标记语言，基于XML，作用与HTML类似，但语法更严格。

Q10.谈下你对表现与数据分离的看法

注意标签的使用,多用语义化的标签,结构清晰,表现应该由CSS来控制，结构应该由html来控制,javascript控制数据填充 . 数据的获取与数据的显示分离

Q11.谈谈你是如何对css 和 js 进行优化的

1. 减少http请求, 把多个JS请求合并为一个JS请求，把多个CSS请求合并为一个CSS请求。从而减少从客户端向服务器端的请求数。
2. 压缩组件,不使用@import,会影响文件加载速度
3. 将样式表放在顶部 ,将脚本放在底部,
4. 移除重复脚本与css,正确使用css样式
5. 遵守盒模型规则

Q12. href 和 src 的区别

href 表示超文本引用,在link 和 a等元素上使用,是引用.
src 表示 来源地址,在 img,script,iframe 等元素上使用,是引入,

Q13.css都有哪些选择器?

基础: (通用选择器) E(标签选择器) .(class) #(id)
组合: E,F //同时匹配 , E F //后代选择器 , E>F //匹配所有E的子元素F , E+F //匹配所有紧随E元素之后的同级元素F , E~F //匹配任何在E元素之后的同级F元素
属性选择器 :
E[att] //匹配所有具有att属性的E元素
E[att="val"] //匹配所有具有val属性的E元素
E[att~="val"] //匹配所有att属性具有多个空格分隔的值,其中一个值等于val
E[att|="val"] //匹配所有att属性具有多个连字号分隔符的值,其中一个值以val 开头的E元素
E[attr^="val"] //以val开头的元素
E[att$="val"] //以val 结尾的元素
E[att="val"] //包含val的元素
伪类 E:first-child //第一个子元素 , E:focus //获取当前焦点 , E:lang(c) //匹配属性等于c的
伪元素: E:first-line //第一行 , E:first-letter //第一个字母 , E:before //之前生成的 , E:after //之后生成的
与用户界面相关的伪类E:enabled //匹配表单中激活的元素 , E:disabled //匹配禁用的元素 , E:checked //被选中的元素 , E:selection //当前选中的元素
结构伪类 E:root //匹配文档的根元素 , E:nth-child(n) //第n个 , E:nth-last-child(n) //匹配倒数第n个 , E:nth-of-type(n) //同类标签 , E:only-child //仅有的一个子元素 , E:empty //不包含任何子元素的元素 , E:only-of-type //使用同一个标签的唯一一个子元素 , E:not(s) //匹配不符合当前选择器的任何元素 , E:target //匹配文档中特定id点击后的效果

Q14. display:none与visibility:hidden的区别是什么？

display : 隐藏对应的元素但不挤占该元素原来的空间。HTML元素（对象）的宽度、高度等各种属性值都将“丢失”
visibility: 隐藏对应的元素并且挤占该元素原来的空间。HTML元素（对象）仅仅是在视觉上看不见（完全透明），而它所占据的空间位置仍然存在。

Q15. sass.less 的区别

动态的样式语言，是CSS预处理器,CSS上的一种抽象层。他们是一种特殊的语法/语言而编译成CSS。
变量符不一样，less是@，而Sass是$;
Sass支持条件语句，可以使用if{}else{},for{}循环等等。而Less不支持;
Sass是基于Ruby的，是在服务端处理的，而Less是需要引入less.js来处理Less代码输出Css到浏览器

Q16. js操作数组有哪些方法

方法: 转换方法: toLocaleString(),toString(),valueOf()
添加 ,arr.push(val) // 将val 追加到数组的最后一项,length自动加1 ,
arr.join(',') //将数组中的各项以逗号拼接成一个字符串返回
arr.unshift(val) // 个或多个新元素添加到数组的开始,数组中的元素自动后移
删除 : arr.pop() //删除数组中的最后一项,length自动减1. arr.shift() //移除最前一个元素,病返回该元素的值,
操作数组 arr.concat(ar1,ar2,...arn) //将arr1数组与arr数组合并成一个新的数组返回,原数组不变
位置.indexOf() //从数组的开头向后查找, lastIndexOf() 从数组的末尾开始向前查找
arr.slice() //基于当前数组中的一或多个项创建的一个新数组(一个参数时,返回从该参数指定位置开始到当前数组末尾的所有项,2个参数时,返回起始和结束位置之间的项,但不包括结束位置的项)
arr.splice() //a 删除,可以删除任意数量的项,需指定两个参数,即(要删除的第一项的位置,要删除的项数) b 插入,(起始位置,要删除的个数,要插入的项) c 替换 (起始位置,要删除的个数,要插入的数量)

Q17.数组去重怎么写

var arr=[3,3,3,4,4,true,false,'3', '22'];
function noRepeat(arr){
var resArr = [] ;
var obj = {};
for(var i=0; i< arr.length; i++){
if(!(obj[arr] ){
resArr.push(arr[i]);
obj[ arr[i] + typeof arr[i] ] =1;
}
}
return resArr;
}
var res = noRepeat(arr);

Q18.字符串去掉前后空格怎么写?

string.prototype.trim = function(){
var reg = /^\s + |\s+S/g;
return this.replace(reg,'');
}

Q19. 一个数组如{abcdefg} 如何变成 {ab_cd_efg}

var str= str+'';
for(var i=1; i tmp += re(res)[i-1];
if(i%2 ==0 && i!re(str).length)
{ tmp+='_'}
}

Q20.ajax是什么? ajax的交互模型?

ajax全称是asychronous javascript and xml，可以说是已有技术的组合，主要用来实现客户端与服务器端的异步通信效果，实现页面的局部刷新.
基于web标准（standards-basedpresentation）XHTML+CSS的表示；
使用 DOM（DocumentObject Model）进行动态显示及交互；
使用 XML 和 XSLT 进行数据交换及相关操作；
使用 XMLHttpRequest 进行异步数据查询、检索；
使用 JavaScript将所有的东西绑定在一起。
ajax的交互模型: 同步 阻塞的 浏览器向服务器请求数据，服务器比较忙，浏览器一直等着（页面白屏），直到服务器返回数据，浏览器才能显示 (整个页面都刷新)
异步 非阻塞的 浏览器向服务器请求数据，服务器比较忙，浏览器可以自如的干原来的事情（显示页面），服务器返回数据的时候通知浏览器一声，浏览器把返回的数据再渲染到页面，只刷新ajax部分

Q21. ajax跨域的方法

Q23. json 和 jsonp的区别

json 是一种轻量级的数据交互格式,可读性强
jsonp 是用来解决跨域获取数据的一种解决方案

ajax的核心是通过XmlHttpRequest获取非本页内容，而jsonp的核心则是动态添加