前端开发常见面试提问(一)

1、CSS3 新特性有哪些？

1. 颜色：新增 RGBA，HSLA 模式
2. 文字阴影（text-shadow）
3.边框： 圆角（border-radius） 边框阴影： box-shadow
4. 盒子模型：box-sizing
5.背景：background-size 设置背景图片的尺寸 background-origin 设置背景图片的
   原点 background-clip 设置背景图片的裁切区域，以”，”分隔可以设置多背景，用于
   自适应布局
6.渐变：linear-gradient、radial-gradient
7. 过渡：transition，可实现动画
8. 自定义动画@keyframes
9. 在 CSS3 中唯一引入的伪元素是 ：selection. 
10. 媒体查询，多栏布局 @media 
11. border-image
12.2D转化:transform:translate(x,y)横纵向移动
    transform:rotade(x,y)旋转
    transform:scale(x,y)缩放
    transform:skew(x,y)倾斜
13.3D转化:transform:translate3d(x,y,z)
    perspective:透视(值越小越剧烈)
    如果某个父元素的子元素要设置3D效果,那么这个父元素就必须做3D呈现:transform-style:preserve-3d

2、html5 有哪些新特性、HTML5 新标签的浏览器兼容问题如何处理?

答、html5 新增了以下的几大类元素：
内容元素：article、footer、header、nav、section。
表单控件：calendar、date、time、email、url、search。
控件元素：webworker, websockt, Geolocation。
新增的元素有绘画 canvas ，
用于媒介回放的 video 和 audio 元素，
本地离线存储localStorage
sessionStorage 的数据在浏览器关闭后自动删除。
新的技术：canvas,svg,webworker, websocket, Geolocation

盒模型

html文档中的每个元素都被描绘成矩形盒子，这些矩形盒子通过一个模型来描述其占用空间，这个模型称为盒模型。盒模型通过四个边界来描述：
margin（外边距），border（边框），padding（内边距），content（内容区域）

响应式布局(栅格布局)如何实现,不同终端的前端实现方案你有什么思路

使用非固定像素来定义网页内容，也就是百分比布局，通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩，不受固定像素的限制，内容向两侧填充。这样的布局方式，就是移动 web 开发使用的常用布局方式。这样的布局可以适配移动端不同的分辨率设备。
响应式开发：
用CSS3 中的 Media Query（媒体查询），通过查询screen的宽度来指定某个宽度区间的网页布局。
超小屏幕（移动设备） 768px 以下
小屏设备 768px-992px
中等屏幕 992px-1200px
宽屏设备 1200px 以上

冒泡排序

 var arr = [4, 1, 2, 3, 5];
        for (i = 0; i < arr.length - 1; i++) {
            for (j = 0; j < arr.length-i-1; j++) {
                if (arr[j] > arr[j + 1]) {
                   var num = arr[j];
                    arr[j] = arr[j + 1];
                    arr[j + 1] = num;
                }
            }
        }
        console.log(arr);

水平垂直居中的方式有几种

1.absolute(绝对定位) + transform(动画的)

.child {
position:absolute;
left:50%;
top:50%;
transform：translate(-50%, -50%);
}

2.flex + justify-content + align-items（弹性模型）

.parent {
display:flex;
justify-content: center; /* 水平居中 */
align-items:center; /*垂直居中*/
}

3.inline-block?+?text-align?+?table-cell?+?vertical-align（单元格方式）

.parent{
    text-align:center;
    display:table-cell;
    vertical-align:middle;
}

继承的方法

1.借用构造函数继承。也叫伪造对象或经典继承。
在子类构造函数的内部调用超类型构造函数。
缺点:方法都在构造函数中定义，所有的类型都只能使用构造函数模式,函数的复用就无从谈起。
2.组合继承。也叫伪经典继承。JavaScript中常用的继承模式。
使用原型链实现对原型属性和方法的继承，通过借用构造函数来实现实例属
性的继承。
优点：既通过在原型上定义方法实现了函数复用，又能保证每一个实例都有它自己的构造函数。
3.原型链继承。
借助原型可以基于已有的对象创建对象，同时还不必因此创建自定义类型。
在 object()函数内部，先创建一个临时的构造函数，然后将传入的对象作为这个构造函
数的原型，最后返回了这个临时类型的一个新实例。
Function object(o){
Function   F(){}；
F.prototype=o；
Return new F()；
}
4.寄生式继承。
创建一个仅用于封装继承过程的函数，该函数在内部以某种方式来增强对象，最后再返回这个对象。
Function createAonter(original){
Var clone=object(original)；//通过调用函数创建一个新对象
Clone.sayHi=function(){	//以某种方式来增强这个对象
Alert(“hi”)；
}
Return clone；  //返回这个对象
}
缺点:不能做到函数复
5.寄生组合式继承。是 JavaScript 最常用的继承模式。
通过借用构造函数来继承属性，通过原型链的混成形式来继承方法。
本质上，就是使用寄生式继承来继承超类型的原型，然后再将结果指定给子类型的原型。
开发人员普遍认为寄生组合式继承时引用类型最理想的继承范式。
extends（）方法采用了这样的方式。

改变函数内部this指向

区别点:  
1.call 和apply  会调用函数, 并且改变函数内部this指向.第一个参数:this指向谁就写谁,后面的参数:函数原本的参数
2.call 和apply 传递的参数不一样, apply 的第二个参数必须以数组形式[arg]传入
3.bind  不会调用函数, 可以改变函数内部this指向
主要应用场景:  
1.call 经常做继承. 
2.apply 经常跟数组有关系.比如借助于数学对象实现数组最大值最小值
3.bind  不调用函数,但是还想改变this指向. 比如改变定时器内部的this指向

js内置对象有哪些

Javascript 内置的常用对象有哪些？并列举该对象常用的方法
1.Arguments 函数参数集合
2.Array 数组
3.Boolean 布尔对象
4.Date 日期时间
5.Error 异常对象
6.Math 数学对象
7.Number 数值对象
8.Object 基础对象
9.String 字符串对象
10.Function 函数对象
11.RegExp正则对象

数组方法

length 属性 动态获取数组长度
join() 将一个数组转成字符串。返回一个字符串。
reverse() 将数组中各元素颠倒顺序
delete 运算符 只能删除数组元素的值，而所占空间还在，总长度没变(arr.length)。
shift() 删除数组中第一个元素，返回删除的那个值，并将长度减 1。
pop() 删除数组中最后一个元素，返回删除的那个值，并将长度减 1。
unshift() 往数组前面添加一个或多个数组元素，长度要改变。arrObj.unshift(“a” ，“b，“c”)
push() 往数组结尾添加一个或多个数组元素，长度要改变。arrObj.push(“a” ，“b”，“c”)
concat( ) 连接数组
slice( ) 返回数组的一部分
sort( ) 对数组元素进行排序
splice( ) 插入、删除或替换数组的元素
toLocaleString( ) 把数组转换成局部字符串
toString( ) 将数组转换成一个字符串

字符串方法

substr()  substring() slice( ) 在原始字符串，截取一个子字符串 
indexOf( ) 返回一个子字符串在原始字符串中的索引值(查找顺序从左往右查找)。如果没有找到，则返回-1。
concat( ) 连接字符串
split() 将一个字符串转成数组。
Length 获取字符串的长度。如：var len = strObj.length
toLowerCase() 将字符串中的字母转成全小写。如：strObj.toLowerCase()
toUpperCase() 将字符串中的字母转成全大写。如：strObj.toUpperCase()
charAt(index) 返回指定下标位置的一个字符。如果没有找到，则返回空字符串。
区别：''' “abcdefgh”.substring(2，3) = “c”
“abcdefgh”.substr(2，3) = “cde”
charCodeAt( ) 返回字符串中的第 n 个字符的代码
fromCharCode( ) 从字符编码创建—个字符串
lastIndexOf( ) 从后向前检索一个字符串
localeCompare( ) 用本地特定的顺序来比较两个字符串
match( ) 找到一个或多个正则表达式的匹配
replace( ) 替换一个与正则表达式匹配的子串
search( ) 检索与正则表达式相匹配的子串
toLocaleLowerCase( ) 把字符串转换小写
toLocaleUpperCase( ) 将字符串转换成大写
toLowerCase( ) 将字符串转换成小写
toString( ) 返回字符串
toUpperCase( ) 将字符串转换成大写
valueOf( ) 返回字符串

JS 的数据类型有哪些？

简单数据类型：Undefined、Null、Boolean、Number 和 String。
复杂数据类型：Object Array

圣杯布局的三种方式

1.flex，中间盒子：沿着主轴方向 设置flex：1
2.左右两边。固定定位。中间盒子的宽度：靠父级的box-sizing:border-box。父级设置左右padding值。把中间盒子的挤回来；
3.左右两个固定定位，中间的盒子宽度：不设置，自己设置margin值，自己挤回来

原生 JS 的 window.onload 与 jQuery 的$(document).ready(function

() {})，$(function () {})有什么不同？

1.执行时间不同
window.onload 必须等到页面内包括图片的所有元素加载完毕后才能执行。
$(document).ready()是 DOM 结构绘制完毕后就执行，不必等到加载完毕。
2.编写个数不同
window.onload 不能同时编写多个，如果有多个 window.onload 方法，只会执
行一个
$(document).ready()可以同时编写多个，并且都可以得到执行
3.简化写法
window.onload 没有简化写法
(document).ready(function(){})可以简写成(function(){})；

你遇到过的兼容问题有哪些？如何解决的？

1、png24 位的图片在 iE6 浏览器上出现背景，解决方案是做成 PNG8. 
2、浏览器默认的 margin 和 padding 不同。解决方案是加一个全局的{margin：0;padding：0;}来统一。
3、IE6 双边距 bug：块属性标签 float 后，又有横行的 margin 情况下，在 ie6 显示 margin比设置的大。浮动 ie 产生的双倍距离 #itcast{ float：left; width：10px; margin：0 0 0100px;} 这种情况之下 IE 会产生 20px 的距离，解决方案是在 float 的标签样式控制中加入display：inline;将其转化为行内属性。( “” 这个符号只有 ie6 会识别)
4、 IE 下,可以使用获取常规属性的方法来获取自定义属性, 也可以使用 getAttribute()获取自定义属性;Firefox 下,只能使用 getAttribute()获取自定义属性。解决方法：统一通过 getAttribute()获取自定义属性。
5、 IE 下,even 对象有 x,y 属性,但是没有 pageX,pageY 属性;Firefox 下,event 对象有 pageX,pageY 属性,但是没有 x,y 属性。解决方法：（条件注释）缺点是在 IE 浏览器下可能会增加额外的 HTTP 请求数。
6、 Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示, 可通过加入 CSS 属性 -webkit-text-size-adjust：none; 解决。
7、超链接访问过后 hover 样式就不出现了 被点击访问过的超链接样式不在具有 hover 和
active 了。解决方法是：改变 CSS 属性的排列顺序：L-V-H-A 、 a：link {} a：visited {} a：hover {} a：active {}
以下是补充:
8、cursor:hand显示手型在safari上不支持.
解决:统一使用cursor:pointer.
9、IE9一下浏览器不能使用opacity
解决:opacity:0.5;filter:alpha(opacity=50);filter:progid:DXIm age Transform.Microsoft.Alpha(style=0,opacity=50);
10、边距重叠问题:当相邻两个元素都设置了margin边框时,margin将取最大值,舍弃最小值;
解决:给子元素增加一个父元素,并设置父元素为overflow:hidden.
11、IE中可以使用innerText,但在FireFox中不行,要用textContent
解决:条件判断: if(navigator.appName.indexOf("Explover")>-1){使用innerText}
else{使用textContent}
12、IE下不识别!important. 
解决:重写一遍要写的样式来覆盖