经典面试题
29.JavaScript如何实现继承？
- 原型链 通过将一个类型的实例赋值给另一个构造函数的原型来实现。这样，子类型就能够访问超类型的所有属性和方法。其问题在于对象实例共享所有继承的属性和方法，因此不宜单独使用。
- 构造函数 通过在子类型构造函数的内部调用超类型构造函数实现。这样就可以做到每个实例都具有自己的属性，同时还能保证只使用构造函数来定义雷丁。但是方法都在构造函数中定义，因此函数复用无从谈起。二次，在超类型的原型中定义的方法，对子类型而言也是不可见的，结果所有类型都只能使用构造函数模式。
- 组合式继承（原型链和构造函数相结合） 避免了原型链和构造函数的缺陷，结合了这二者的优点。这种模式使用原型链继承共享的属性和方法，利用构造函数来继承实例属性。
- 原型式继承 可以在不必预先定义构造函数的情况下实现继承，其本质是执行对给定对象的浅复制，而复制得到的副本还可以得到进一步改造。
- 寄生式继承 与原型链继承非常类似。也是基于某个对象或某些信息创建一个新对象，然后增强对象，最后返回对象，为了结局组合继承模式由于多次调用超类型构造函数而导致的低效率问题，可以将这个模式与组合继承一起使用。
- 寄生组合式继承 集寄生继承与组合继承的优点于一身，是实现基于类型继承的最有效方式。
（PS：对于程序媛来说，只上文字不po代码的方式都是耍流氓！啊后面要好好沉淀这部分的代码实现。http://blog.csdn.net/az_77/article/details/74561010）
30.清除浮动有哪些方式？比较好的方式是哪一种？
-
使用overflow属性来清除浮动
先找到浮动盒子的父元素，再在父元素中添加一个属性：overflow:hidden，就是清除这个父元素中的子元素浮动对页面的影响。
Tips 一般情况下不会使用这种方式，因为overflow:hidden有一个特点，离开了这个元素所在的区域以后会被隐藏（overflow:hidden会将超出的部分隐藏起来）。
-
使用额外标签法
在浮动的盒子之下再放一个标签，在这个标签中使用clear:both，来清除浮动对页面的影响。- a.内部标签：会将这个浮动盒子的父盒子高度重新撑开。
- b.外部标签：会将这个浮动盒子的影响清除，但是不会撑开父盒子。
Tips 增加页面的标签，造成结构的混乱.
- 使用伪元素来清除浮动
.clearfix:after {
content: ""; /*设置内容为空*/
height: 0; /*高度为0*/
line-height: 0; /*行高为0*/
display: block; /*将文本转为块级元素*/
visibility: hidden; /*将元素隐藏*/
clear: both; /*清除浮动*/
}
.clearfix {
zoom: 1; /*兼容IE*/
}
- 使用双伪元素清除浮动
.clearfix:before, .clearfix:after {
content: "";
display: block;
clear: both;
}
.clearfix {
zoom: 1;
}
31.box-sizing常用的属性有哪些？分别有什么作用？
box-sizing: content-box| border-box| inherit;
content-box
- 宽度和高度分别应用到元素的内容框。
- 在宽度和高度之外绘制元素的内边距和边框。
- 标准盒子模型。
border-box
- 为元素设定的宽度和高度决定了元素的边框盒。也就是说，
- 为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。
- 通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。
- IE盒子模型
inherit
- 规定应从父元素继承 box-sizing 属性的值。
32.Doctype作用？标准模式与兼容模式各有什么区别?
- <!DOCTYPE>声明位于位于HTML文档中的第一行，处于 <html> 标签之前。告知浏览器的解析器用什么文档标准解析这个文档。DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现。
- 标准模式的排版 和JS运作模式都是以该浏览器支持的最高标准运行。在兼容模式中，页面以宽松的向后兼容的方式显示，模拟老式浏览器的行为以防止站点无法工作。
思考题
15.如何视觉隐藏网页内容，只让它们在屏幕阅读器中可用？
-
display: none; 的缺陷
- 搜索引擎可能认为被隐藏的文字属于垃圾信息而被忽略
- 屏幕阅读器（是为视觉上有障碍的人设计的读取屏幕内容的程序）会忽略被隐藏的文字。
-
visibility: hidden; 的缺陷
- 隐藏的内容会占据他所应该占据物理空间
overflow: hidden; 一个比较合理的方法
.texthidden {
display: block; /*统一转化为块级元素*/
overflow: hidden;
width: 0;
height: 0;
}
将宽度和高度设定为0，然后超过部分隐藏，就会弥补上述一、二方法中的缺陷，也达到了隐藏内容的目的。
