来源：https://www.nowcoder.com/profile/2496345/test/21517591/318667
1.JavaScript数据类型
JavaScript基本数据类型：null undefined number string 还有es6的symbol
引用类型:Object,Array,Function
2.标准盒模型和怪异盒模型
参考文章：
https://www.cnblogs.com/yky-iris/p/7719895.html
https://blog.csdn.net/zhangyingchengqi/article/details/48489055
标准盒模型：
可以看到，在标准盒模型下，width和height是内容区域即content的width和height。而盒子总宽度为
在标准模式下，一个块的总宽度= width + margin(左右) + padding(左右) + border(左右)
怪异盒模型：
而IE盒模型或怪异盒模型显而易见的区别就是，width和height除了content区域外，还包含padding和border。盒子的总宽度为
一个块的总宽度= width + margin(左右)（即width已经包含了padding和border值）
3.HTML哪些是块级元素，哪些是行内元素
·块级元素
1.总是从新的一行开始
2.高度、宽度都是可控的
3.宽度没有设置时，默认为100%
4.块级元素中可以包含块级元素和行内元素
·行内元素
1.和其他元素都在一行
2.高度、宽度以及内边距都是不可控的
3.宽高就是内容的高度，不可以改变
4.行内元素只能行内元素，不能包含块级元素
附注：关于行内元素能否设置宽高的问题
可以参考：https://blog.csdn.net/little_little0_0/article/details/78566870
总结下：并不是所有的行内元素都不能设置宽高，替换元素就可以，例如input就可以宽高，span就不能设置宽高。
替换元素：浏览器根据元素的标签和属性来决定元素的的具体显示内容。HTML中的img、input、textarea、select、object都是替换元素。这些元素往往没有实际的内容，即是一个空元素。
不可替换元素：(X)HTML 的大多数元素是不可替换元素，即其内容直接表现给用户端（例如浏览器）。
除此之外，当我们给行内元素添加属性float时，我们也可以给它设置宽高。因为不论元素本身是什么，当它浮动时，就会生成一个块级框。行内元素也就会生成相应的行内框。此时我们为它设置宽高，宽高就会起作用了。例如
<div style="width: 100px; height: 100px; background-color: black">
<span style="float: left; width: 20px; height: 20px; background-color: red"></span>
</div>
效果如图：
块级元素：块级大多为结构性标记
<address>...</adderss>
<center>...</center> 地址文字
<h1>...</h1> 标题一级
<h2>...</h2> 标题二级
<h3>...</h3> 标题三级
<h4>...</h4> 标题四级
<h5>...</h5> 标题五级
<h6>...</h6> 标题六级
<hr> 水平分割线
<p>...</p> 段落
<pre>...</pre> 预格式化
<blockquote>...</blockquote> 段落缩进 前后5个字符
<marquee>...</marquee> 滚动文本
<ul>...</ul> 无序列表
<ol>...</ol> 有序列表
<dl>...</dl> 定义列表
<table>...</table> 表格
<form>...</form> 表单
<div>...</div>
行内元素：行内大多为描述性标记
<span>...</span>
<a>...</a> 链接
<br> 换行
<b>...</b> 加粗
<strong>...</strong> 加粗
<img > 图片
<sup>...</sup> 上标
<sub>...</sub> 下标
<i>...</i> 斜体
<em>...</em> 斜体
<del>...</del> 删除线
<u>...</u> 下划线
<input>...</input> 文本框
<textarea>...</textarea> 多行文本
<select>...</select> 下拉列表
问题：如何给不能设置宽高的行内元素设置宽高
1.设置display:block或者display:inline-block
2.浮动，设置float:left或者float:right
3.设置position:absolut
4.设置pargin/padding
简单来说，只要html代码中出现以上2或者3两句之一，元素的display显示类型就会自动变为以 display:inline-block（块状元素）的方式显示，当然就可以设置元素的width 和 height 了，且默认宽度不占满父元素。
内联块状元素（inline-block ）元素特点：
1、和其他元素都在一行上；
2、元素的高度、宽度、行高以及顶和底边距都可设置。
将内联元素 -----> 内联块元素 (可以设置元素的高宽) 方法如下:
display:inline-block;
position:absolute;
float:left / right;
参考文章：
https://bri-robby.iteye.com/blog/2269352
https://www.jianshu.com/p/8eec15102720
4.CSS选择器
CSS选择器：
标签选择器、类选择器、ID选择器
div p 选择<div>元素内的所有<p>元素
div>p 选择所有父级是 <div> 元素的 <p> 元素
div+p 选择所有紧接着<div>元素之后的<p>元素
举例说明(div+p)：
.div01+p{
color: blue;
}
<div class="div01">
<p>div01</p>
<div class="div02">
<p>div02</p>
</div>
</div>
<p>div03</p>
一个问题：CSS属性继承问题，看下面代码
<style type="text/css">
.food>li{
color: red;
}
.div01>p{
color: blue;
}
</style>
<div class="div01">
<p>div01</p>
<div class="div02">
<p>div02</p>
</div>
</div>
<p>div03</p>
<ul class="food">
<li>水果
<ul class="food">
<li>香蕉</li>
<li>苹果</li>
<li>梨</li>
</ul>
</li>
</ul>
问题是：>是子代选择器，为什么子代的子代还可以被设置颜色（li标签），但是子代的子代例如上面p标签就没有被设置颜色了。
答案：CSS属性继承
继承就是指子节点默认使用父节点的样式属性。
所有元素可继承：visibility和cursor。
内联元素可继承：letter-spacing、word-spacing、white-space、line-height、color、font、font-family、font-size、font-style、font-variant、font-weight、text-decoration、text-transform、direction。
终端块状元素可继承：text-indent和text-align。
列表元素可继承：list-style、list-style-type、list-style-position、list-style-image。
不可继承的属性太多了不要背，记住可以继承的属性有哪些就行了。可以继承的属性很少，只有颜色，文字，字体间距行高对齐方式，和列表的样式可以继承。
对于上面问题，因为p不是内联元素，所以不会继承，li是内联元素所以可以继承。
5.原型链中delete
function Foo(){}
Foo.prototype.z = 3;
var obj = new Foo();
console.info(obj.z) //输出内容 3
obj.z = 10;
console.info(obj.z); //输出内容 10
delete obj.z;
console.info(obj.z); //输出内容 3
为什么最后输出的是3而不是undefined呢 ？
这涉及到delete和原型链问题，delete删除的是本身上（对象定义）的z，而不是原型链上的。
参考内容：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/delete
如果对象的原型链上有一个与待删除属性同名的属性，那么删除属性之后，对象会使用原型链上的那个属性（也就是说，delete操作只会在自身的属性上起作用）。
6.this指向问题
var obj = {
name:"zhangsan",
sayName:function(){
console.info(this.name);
}
}
var wfunc = obj.sayName;
obj.sayName();
wfunc();
var name = "lisi";
obj.sayName();
wfunc();
输出结果：zhangsan undefined zhangsan lisi
7.变量提升
compute(10,100);
var compute = function(A,B) {
console.info(A * B) ;
};
function compute(A,B){
console.info(A + B);
}
function compute(A,B){
console.info((A + B)*2);
}
compute(2,10);
输出结果：220 20
JS在创建变量是先都声明好，然后再去赋值。并不是声明一个变量就赋值，再声明一个再赋值。
比如：
var a=1; var b=2;
JS解析是
var a;
var b;
a=1;
b=2;
再者js所谓变量提升，提升就是为了事先声明变量。在作用域中，不管变量和函数写在什么位置，所有变量会被整体提升到作用域顶部，所有函数也会被整体提升到作用域顶部，但是函数整体在变量整体的后面。所以这题的解析如下:
//声名变量
var compute;
function compute(A, B) {
console.info(A + B);
}
function compute(A, B) {
console.info((A + B) * 2);
}
compute(10, 100);
//赋值
compute= function(A, B) {
console.info(A * B);
};
compute(2, 10);
8.跨域问题
同域：相同域名，端口相同，协议相同，缺一不可。
跨域是浏览器的同源策略造成的，是浏览器对javascript的安全限制。浏览器从一个域名的网页去请求另一个域名的资源时，域名、端口、协议至少有一个不相同，就是跨域。
跨域问题只存在于浏览器端，不存在于服务器端。
9.正则表达式
10.回流（reflow）
reflow(回流):对DOM树进行渲染，只要修改DOM或修改元素的形状大小，就会触发reflow。
display显示/隐藏元素，显示时占据空间，隐藏时元素不占据空间，隐藏前后dom结构有发生变化，需要重新渲染。
visibility显示/隐藏元素，显示时占据空间，隐藏时元素占据空间，隐藏前后dom结构未发生变化，不需要重新渲染。
单纯改变字体颜色，背景只需要repaint(重绘)，不需要reflow。
会导致回流的操作：
1.页面首次渲染
2.浏览器窗口大小发生改变
3.元素尺寸或位置发生改变
4.元素内容变化（文字数量或图片大小等等）
5.元素字体大小变化
6.添加或者删除可见的DOM元素
7.激活CSS伪类（例如：:hover）
8.查询某些属性或调用某些方法