刷前端面经笔记（三）

1.var的变量提高的底层原理是什么？

JS引擎的工做方式是
1)先解析代码，获取全部被声明的变量；
2)而后再执行。
也就是分为预处理和执行这两个阶段。
变量提高：全部用var声明变量的语句都会被提高到代码头部。另外function也可看做变量声明，也存在变量提高的状况。

2.垂直水平居中的方式？

1)定位
父元素设置为：position: relative;
子元素设置为：position: absolute;
距上50%，据左50%，而后减去元素自身宽度的距离就能够实现

width: 100px;
height: 100px;
position: absolute;
left: 50%;
top: 50%;
margin: -50px 0 0 -50px;

2)flex布局

display: flex; //flex布局
justify-content: center; //使子项目水平居中
align-items: center; //使子项目垂直居中

3)tabel-cell

display: table-cell;
vertical-align: middle;//使子元素垂直居中
text-align: center;//使子元素水平居中

3.如何判断一个对象是否为数组

1) Array.prototype.isPrototypeOf(obj)方法，断定Array是否是在obj的原型链中，若是是，则返回true,不然false;
2) obj instanceof Array;
3) Object.prototype.toString.call(obj)；(==="[object Array]")
4) Array.isArray(obj);

4.行内元素和块级元素有哪些？img属于什么元素？

块元素(block element)
　　* address - 地址
　　* blockquote - 块引用
　　* center - 举中对齐块
　　* dir - 目录列表
　　* div - 经常使用块级容易，也是css layout的主要标签
　　* dl - 定义列表
　　* fieldset - form控制组
　　* form - 交互表单
　　* h1 - 大标题
　　* h2 - 副标题
　　* h3 - 3级标题
　　* h4 - 4级标题
　　* h5 - 5级标题
　　* h6 - 6级标题
　　* hr - 水平分隔线
　　* isindex - input prompt
　　* menu - 菜单列表
　　* noframes - frames可选内容，（对于不支持frame的浏览器显示此区块内容
　　* noscript - 可选脚本内容（对于不支持script的浏览器显示此内容）
　　* ol - 排序表单
　　* p - 段落
　　* pre - 格式化文本
　　* table - 表格
　　* ul - 非排序列表

内联元素(inline element)

　　* a - 锚点
　　* abbr - 缩写
　　* acronym - 首字
　　* b - 粗体(不推荐)
　　* bdo - bidi override
　　* big - 大字体
　　* br - 换行
　　* cite - 引用
　　* code - 计算机代码(在引用源码的时候须要)
　　* dfn - 定义字段
　　* em - 强调
　　* font - 字体设定(不推荐)
　　* i - 斜体
　　* img - 图片
　　* input - 输入框
　　* kbd - 定义键盘文本
　　* label - 表格标签
　　* q - 短引用
　　* s - 中划线(不推荐)
　　* samp - 定义范例计算机代码
　　* select - 项目选择
　　* small - 小字体文本
　　* span - 经常使用内联容器，定义文本内区块
　　* strike - 中划线
　　* strong - 粗体强调
　　* sub - 下标
　　* sup - 上标
　　* textarea - 多行文本输入框
　　* tt - 电传文本
　　* u - 下划线
　　* var - 定义变量
可变元素
　　可变元素为根据上下文语境决定该元素为块元素或者内联元素。
　　* applet - java applet
　　* button - 按钮
　　* del - 删除文本
　　* iframe - inline frame
　　* ins - 插入的文本
　　* map - 图片区块(map)
　　* object - object对象
　　* script - 客户端脚本

img、input属于行内替换元素。height/width/padding/margin都可用。效果等于块元素。

5.margin塌陷？

当两个盒子在垂直方向上设置margin值时，会出现塌陷现象
解决方法：

1.给父盒子添加border
2.给父盒子添加padding-top
3.给父盒子添加overflow:hidden
4.父盒子:position:fixed
5.父盒子:display:table
6.给子元素的前面添加一个兄弟元素
  属性为:content:"";
  overflow:hidden;

解决方法的主要原理就是设置盒子为BFC
BFC为页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。

6.伪类与伪元素的区别

1）伪类
伪类用于选择DOM树以外的信息，或是不能用简单选择器进行表示的信息。前者包含那些匹配指定状态的元素，好比:link，:visited，:hover，:active；后者包含那些知足必定逻辑条件的DOM树中的元素，好比:first-child，:first-of-type，：target。
2）伪元素
伪元素为DOM树没有定义的虚拟元素。不一样于其余选择器，它不以元素元素为最小选择单元，它选择的是元素制定单元。好比::before表示选择元素内容的以前内容；::selection表示选择元素被选中的内容。
3）伪类/伪元素一览表
<伪类以下>

/*
:active      选择正在被激活的元素
:hover         选择被鼠标悬浮着元素
:link        选择未被访问的元素
:visited     选择已被访问的元素
:first-child 选择知足是其父元素的第一个子元素的元素    
:lang         选择带有指定 lang 属性的元素
:focus       选择拥有键盘输入焦点的元素
:enable      选择每一个已启动的元素
:disable     选择每一个已禁止的元素
:checked     选择每一个被选中的元素    
:target      选择当前的锚点元素
*/

<伪元素以下>

/*
::first-letter    选择指定元素的第一个单词
::first-line      选择指定元素的第一行
::after           在指定元素的内容后面插入内容
::before          在指定元素的内容前面插入内容
::selection       选择指定元素中被用户选中的内容
*/

7.介绍一下JS的基本数据类型

Undefined，Null，Boolean，Number，String

8.JavaScript的typeof返回那些数据类型

undefined，string，boolean，number，symbol(ES6)，object，function

9.介绍一下JS有哪些内置对象？

数据封装类对象：Object、Array、Boolean、Number、String
其余对象：Function、Argument、Math、Date、RegExp、Error

10.null和undefined的区别

1）null表示一个对象被定义了，值为“空值”；undefined表示不存在这个值。
2）变量被定义了，可是没有赋值时，就等于undefined。
3）注意：在验证null时，要用===，由于==没法区分null和undefined。
typeof null // "object" 说明：null是一个没有任何属性和方法的对象

11.对JSON的了解

1) JSON(JavaScript Object Notation)是一种轻量级的数据交换格式。
2) 它是基于JavaScript的一个子集。数据格式简单，易于读写，占用带宽小。 如：{"age":"12", "name":"back"}

12.列举3种强制类型转换和2种隐式类型转换

强制：parseInt()，parseFloat()，Number()，（Boolean()，String()）
隐式：==，！

13.input的type属性有哪些？

text：文本框
password：密码
radio：单选按钮
checkbox：复选框
file：文件选择域
hidden：隐藏域
button：按钮
reset：重置按钮
submit：表单提交按钮
image：图片按钮

14.IE和标准下有哪些兼容性的写法

var ev = ev || window.event
document.documentElement.clientWidth || document.body.clientWidth
var target = ev.srcElement||ev.target

15.如何阻止事件冒泡

ie:阻止冒泡ev.cancelBubble = true;
非IE ev.stopPropagation();

16.如何阻止默认事件

1)return false；2) ev.preventDefault();