前端面经(PALMAX)

简单题

1.标准盒模型和IE盒模型的区别？

  标准盒模型：width和height不包括padding和border

  IE盒模型：width和height包含padding和border

  ie8以上都是w3c标准盒模型    ie5极其以下都是ie盒子模型，ie6、ie7、ie8在混杂模式下ie盒模型，在标准模式下是w3c标准盒      模型(注意：ie6在混杂模式下一定是Ie盒模型，而ie7、ie8在混杂模式下不一定是ie盒模型)

2.行内元素有哪些？块级元素有哪些？空(void)元素有哪些？

下面只是一些个人觉得常见的，不是全部

行内元素：<span>,<a>,<br>,<img>,<input>,<textarea>,<select>

块级元素：<h1>,<h2>,<h3>,<h4>,<h5>,<h6>,<hr>,<p>,<ul>,<ol>,<table>,<form>,<div>

空(void)元素(指没有内容的HTML元素，这些元素通常也没有关闭标签，如<br/>)：<img>,<link>,<meta>,<br>,<hr>

3.简述事件冒泡和事件捕获

事件冒泡：即事件开始时由最具体的元素(文档中嵌套层次最深的那个节点)接收，然后逐级向上传播到较为不具体的节点(文档)。

事件捕获：和事件冒泡相反，从不太具体的节点开始向下递归到最具体的节点。

Ps：阻止事件冒泡的方法 ：

    1.event.stopPropagation()：这个方法阻止了事件冒泡，但不会阻止默认行为

    2.event.prventDefault()：这个方法不会阻止事件冒泡，但会阻止默认行为

4.什么是BFC(Block formatting contexts)

定义：

    BFC是容器的一种属性，从样式上看，具有BFC的元素与普通的容器没有什么区别，但从功能上，具有BFC的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，并且BFC具有普通容器没有的一些特性。

特性：

1. BFC会阻止外边距折叠

     即便两个块级元素相邻，但当它们不在同一个块级格式化上下文时它们的边距也不会折叠。

     2.BFC可以包含浮动的元素

    这也正是使用overflow:hidden与overflow:auto方法闭合浮动的原理，在浮动元素的父元素上使用overflow:hidden或                 overflow:auto触发BFC特性，从而可以包含浮动元素，闭合浮动。

     3.BFC可以阻止元素被浮动元素覆盖

     浮动元素的块级兄弟元素会无视浮动元素的位置，尽量占满一整行，这样就会被浮动元素覆盖，为该兄弟元素触发BFC后可以阻止这种情况的发生。简单来讲，即是，BFC的区域不会与float box重叠。

如何触发BFC：

• 根元素
   
• 浮动元素（元素的float不是none）
   
• 绝对定位元素（元素的position为absolute或fixed）
   
• overflow值不为visible（hidden、auto、scroll）
   
• display为以下其中之一的值（inline-block、table-cell、table-caption、flex、inline-flex、grid、inline-grid）
   
• 匿名表格单元格元素（元素的display为table、table-row、table-row-group、table-header-group、table-footer-group（分别为HTML table、row、tbody、thead、tfoot的默认属性）或inline-table)

5.列举知道的一些ES6,7,8的特性

6.简述 js 的 prototype(原型)

  我们都知道js是一种基于原型继承的语言，这里说的原型指的就是对象的原型属性！从这就能看出来，在js中，原型是用来实现继承的！那么为什么可以通过对象的原型就能实现继承了？这是因为在js中，所有使用同一个构造函数生成的实例对象，都共享该构造函数的原型对象

function Person = {}
Person.prototype.name = "xxx";
Person.prototype.age = 21;
Person.prototype.sayName = function(){
    alert(this.name);
}

var person1 = new Person();
person1.sayName()  // "xxx"

这里person1明明定义时未传入任何参数，却可以访问到他的属性，这就是因为他继承了Person的属性

7.简述 Cookie,LocalStorge,SessionStorge的区别

生命周期的不同：

Cookie：一般由服务器生成，可设置失效时间，如果在浏览器端生成，默认是关闭后失效

LocalStorge：除非永久删除，否则永久保存

SessionStorge：仅在当前会话有效，关闭页面或浏览器后清除

储存数据大小不同：

Cookie：一般为4KB

LocalStorge和SessionStorge：一般为5MB

与服务器端通信不同：

Cookie：每次都会携带在HTTP头中，如果使用cookie保存过多数据会带来性能问题

LocalStorge和SessionStorge：仅在客户端(浏览器)中保存，不参与服务器端的通信

易用性：

Cookie：需要程序员自己封装，原生接口不够友好

LocalStorge和SessionStorge：原生接口可以接受，可以封装来对Object和Array有更好的支持

编程题

请写出一个冒泡排序或快速排序

 

总结：这次问的都是一些很基础的问题，但答得还是不够好，继续努力吧。