面试题汇总
谈谈浏览器的兼容性
1.html部分
H5新标签在IE9以下的浏览器识别
<!--[if lt IE 9]>
<script type="text/javascript" src="js/html5shiv.js"></script>
<![endif]-->
html5shiv.js下载地址
https://github.com/aFarkas/html5shiv/releases
.ul标签内外边距问题ul标签在IE6\IE7中，有个默认的外边距，但是在IE8以上及其他浏览器中有个默认的内边距。解决方法：统一设置ul的内外边距为0
2.CSS样式的兼容性
- css的hack问题：主要针对IE的不同版本，不同的浏览器的写法不同
IE的条件注释hack：
<!--[if IE 6]>此处内容只有IE6.0可见<![endif]-->
<!--[if IE 7]>此处内容只有IE7.0可见<![endif]-->
-
IE6双边距问题：IE6在浮动后，又有横向的margin，此时，该元素的外边距是其值的2倍
解决办法：display:block; -
IE6下图片的下方有空隙
解决方法：给img设置display:block; -
IE6下两个float之间会有个3px的bug
解决办法：给右边的元素也设置float:left; -
IE6下没有min-width的概念，其默认的width就是min-width
-
IE6下在使用margin:0 auto;无法使其居中
解决办法：为其父容器设置text-align:center; -
被点击过后的超链接不再具有hover和active属性
解决办法:按lvha的顺序书写css样式，
":link": a标签还未被访问的状态；
":visited": a标签已被访问过的状态；
":hover": 鼠标悬停在a标签上的状态；
":active": a标签被鼠标按着时的状态； -
在使用绝对定位或者相对定位后，IE中设置z-index失效，原因是因为其元素依赖于父元素的z-index，但是父元素默认为0， 子高父低，所以不会改变显示的顺序
-
IE6下无法设置1px的行高，原因是由其默认行高引起的
解决办法：为其设置overflow:hidden;或者line-height:1px; -
margin在ie中和其他浏览器距离不太一样，用css hack解决
-
border-radius ie下不兼容，可以用背景图的方式写入。
-
border-radius ,fifter，css3的一些特性，可以根据不同浏览器加前缀-moz-,-ms-等前缀
-
Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示,可通过加入 CSS 属性 -webkit-text-size-adjust: none; 解决。
-
怎么让Chrome支持小于12px 的文字？
p{
font-size:10px;
-webkit-transform:scale(0.8);
}
- 介绍一下标准的CSS的盒子模型？与低版本IE的盒子模型有什么不同的
标准盒子模型：宽度=内容的宽度（content）+ border + padding +margin
低版本IE盒子模型：宽度=内容宽度（content+border+padding）+ margin
- CSS选择器有哪些？哪些属性可以继承？
CSS选择符：id选择器(#myid)、类选择器(.myclassname)、标签选择器(div, h1, p)、相邻选择器(h1 + p)、子选择器（ul > li）、后代选择器（li a）、通配符选择器（*）、属性选择器（a[rel="external"]）、伪类选择器（a:hover, li:nth-child）
可继承的属性：font-size, font-family, color
不可继承的样式：border, padding, margin, width, height
优先级（就近原则）：!important > [ id > class > tag ]
!important 比内联优先级高
- CSS优先级算法如何计算？
元素选择符： 1
class选择符： 10
id选择符：100
元素标签：1000
- 如何居中div？如何居中一个浮动元素？如何让绝对定位的div居中？
//一般的div居中
border: 1pxsolid red;margin: 0auto; height: 50px;width: 80px;
//浮动居中（已知宽高）
border: 1px solid red;
float: left;
position:absolute;
width: 200px;
height: 100px;
left: 50%;
top: 50%;
margin: -50px 0 0 -100px;
//绝对定位的左右居中：
border: 1px solid black;
position: absolute;
width: 200px;
height: 100px;
margin: 0 auto;
left: 0;
right: 0;
//使用bootstrap或者element等栅格系统
前者是分成12，后者是24
//display:table
//父级设置:
display:table
//需要居中的div元素
display:table-cell;
verticle-align:middle;
- 用纯CSS创建一个三角形的原理是什么？
需要把元素的宽度、高度设为0。然后设置边框样式。
width: 0;
height: 0;
border-top: 40px solid transparent;
border-left: 40px solid transparent;
border-right: 40px solid transparent;
border-bottom: 40px solid #ff0000;
3.js的兼容性
- 标准的事件绑定方法函数为addEventListener，但IE下是attachEvent；
- 事件的捕获方式不一致，标准浏览器是由外至内，而IE是由内到外，但是最后的结果是将IE的标准定为标准
- window.event获取的。并且获取目标元素的方法也不同，标准浏览器是event.target，而IE下是event.srcElement
- 在低版本的IE中获取的日期处理函数的值不是与1900的差值，但是在高版本的IE中和标准浏览器保持了一致，获取的值也是与1900的差值。
比如var year= new Date().getYear(); - ajax的实现方式不同，这个我所理解的是获取XMLHttpRequest的不同，IE下是activeXObject
- IE中不能操作tr的innerHtml7.获得DOM节点的父节点、子节点的方式不同
其他浏览器：parentNode parentNode.childNodes
IE：parentElement parentElement.children
4.闭包和作用域
闭包的理解与使用
作用域相关
我把闭包和作用域放在一起理解.要理解闭包,首先要理解变量作用域.变量的的作用域无非就是两种:全局变量和局部变量.JavaScript的特殊之处就在于函数内部可以直接读取全局变量,
var n=999;
function f1(){
alert(n);
}
f1(); // 999
另一方面,在函数外部自然无法读取函数内的局部变量.
function f1(){
var n=999;
}
alert(n); // error
处于种种原因,我们有时候需要得到函数内的局部变量.但是,正常情况下,这是办不到的,只有通过变通方法才能实现.在函数内部,再定义一个函数:
function f1(){
var n=999;
function f2(){
alert(n); // 999
}
return f2;
}
var result=f1();
result(); // 999
由于在Javascript语言中，只有函数内部的子函数才能读取局部变量，因此可以把闭包简单理解成”定义在一个函数内部的函数”。所以本质上,闭包就是将函数内部和函数外部连接起来一座桥梁
GET和POST的区别
区别一:
GET重点从服务器上获取资源,POST重点向服务器发送数据.
区别二:
get传输数据是通过URL请求，置于URL后，并用”?”连接，多个请求数据间用”&”连接.post传输数据通过Http的post机制，将字段与对应值封存在请求实体中发送给服务器，这个过程对用户是不可见的；
区别三:
Get传输的数据量小，因为受URL长度限制，但效率较高；
Post可以传输大量数据，所以上传文件时只能用Post方式；
区别四:
get是不安全的，因为URL是可见的，可能会泄露私密信息，如密码等；
post较get安全性较高；
区别五:
get方式只能支持ASCII字符，向服务器传的中文字符可能会乱码。
post支持标准字符集，可以正确传递中文字符。
面向对象的理解
- 进行功能拆分，同一类型的事件交给专门的人做。
- 将一些事物的共性抽离出来归类
- 封装 子类继承和使用父类的部分数据和方法。
- 多态 同一类的对象调用相同的方法可以表现不同的行为
- 变量单一
- 一个接口只描述一种能力
es6
字符串拼接
- 字符串拼接用插值形式
- 支持输入html标签，用``包裹
- 查找是否存在，有两种方法
startsWith(jspang)
endsWith(jspang);
- 复制
document.write('jspang|'.repeat(3))
- 二进制、八进制转换成十进制
二进制的开始是0（零），然后第二个位置是b（注意这里大小写都可以实现），然后跟上二进制的值就可以了。
也是以0（零）开始的，然后第二个位置是O（欧），然后跟上八进制的值就可以了。
- 数字判断和转换
Number.isFinite( xx ) - 判断是否为整数Number.isInteger(xx)
- Array.of()方法,把一堆文本或者变量转换成数组
- find( value,index,arr)
- 数组循环方法
for of
- 数组遍历方法
forEach,fiflter,map(替换)
