行内元素不会独占一行，相邻的行内元素会排在同一行。其宽度随内容的变化而变化。
行内元素不可以设置宽高
行内元素水平方向的margin-left; margin-right; padding-left; padding-right;可以生效。但是竖直方向的margin-bottom; margin-top; padding-top; padding-bottom;却不能生效。
display:inline; 可以通过修改display属性来切换块级元素和行内元素

块级元素：block element

div p h1-h6 table hr ol ul

块级元素会独占一行，默认情况下宽度自动填满其父元素宽度
块级元素可以设置宽高
块级元素可以设置margin，padding
display:block; 可以通过修改display属性来切换块级元素和行内元素

行内块元素：inline-block

img input td

(1)不自动换行
(2)能够识别宽高
(3)默认排列方式为从左到右

[↑] 回到顶部

浏览器的标准模式和怪异模式

现代的浏览器一般都有两种渲染模式：标准模式和怪异模式。在标准模式下，浏览器按照HTML与CSS标准对文档进行解析和渲染；而在怪异模式下，浏览器则按照旧有的非标准的实现方式对文档进行解析和渲染。这样的话，对于旧有的网页，浏览器启动怪异模式，就能够使得旧网页正常显示；对于新的网页，则可以启动标准模式，使得新网页能够使用HTML与CSS的标准特性。

DOCTYPE是”document type”的缩写。它是 HTML 中用来区分标准模式和怪异模式的声明，用来告知浏览器使用标准模式渲染页面。

从中获得的启发：在页面开始处添加<!DOCTYPE html>即可。

参考

https://www.jianshu.com/p/dcab7cde8c04

[↑] 回到顶部

xhtml 和 html 的区别

[↑] 回到顶部

使用 data-的好处

[↑] 回到顶部

meta 标签

[↑] 回到顶部

canvas

[↑] 回到顶部

HTML 废弃的标签

[↑] 回到顶部

css js 放置位置和原因

[↑] 回到顶部

什么是渐进式渲染

[↑] 回到顶部

html 模板语言

[↑] 回到顶部

meta viewport 原理

[↑] 回到顶部

二、CSS

盒模型，box-sizing

[↑] 回到顶部

CSS3 新特性，伪类，伪元素，锚伪类

[↑] 回到顶部

CSS 实现隐藏页面的方式

[↑] 回到顶部

如何实现水平居中和垂直居中

水平居中

垂直居中

/* 1.flex */
.parent-1 {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.child-1 {
    /*  */
}

/* 2.margin: auto */
.parent-2 {
    position: relative;
}

.child-2 {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
}

 /* 3.transform */
.parent-3 {
    position: relative;
}

.child-3 {
    position: absolute;
    top: 50%;
    left: 50%;
    /* -webkit-transform: translateX(-50%,-50%); */
    transform: translate(-50%,-50%);
    /* animation 位置的变化 */
}

/* 4.宽高的一半 */
.parent-4 {
    position: relative;
}

.child-4 {
    position: absolute;
    top: 50%;
    left: 50%;
    /* 高度的一半 */
    margin-top: -20px;
    /* 宽度的一半 */
    margin-left: -40px;
}

/* 5.伪类 */
.child-5,
.parent-5::after {
    display: inline-block;
    vertical-align: middle;
}

.parent-5::after {
    content: '';
    height: 100%;
}

[↑] 回到顶部

说说 position，display

[↑] 回到顶部

请解释*{box-sizing:border-box;}的作用，并说明使用它的好处

[↑] 回到顶部

浮动元素引起的问题和解决办法?绝对定位和相对定位，元素浮动后的 display 值

[↑] 回到顶部

link 和@import 引入 css 的区别

[↑] 回到顶部

解释一下 css3 的 flexbox，以及适用场景

[↑] 回到顶部

inline 和 inline-block 的区别

[↑] 回到顶部

哪些是块级元素那些是行级元素，各有什么特点

[↑] 回到顶部

grid 布局

[↑] 回到顶部

table 布局的作用

[↑] 回到顶部

实现两栏布局有哪些方法?

[↑] 回到顶部

css dpi

[↑] 回到顶部

你知道 attribute 和 property 的区别么

[↑] 回到顶部

css 布局问题?css 实现三列布局怎么做?如果中间是自适应又怎么做?

[↑] 回到顶部

流式布局如何实现，响应式布局如何实现

[↑] 回到顶部

移动端布局方案

[↑] 回到顶部

实现三栏布局(圣杯布局，双飞翼布局，flex 布局)

[↑] 回到顶部

清除浮动的原理

为什么要清除浮动，父元素高度塌陷 解决父元素高度塌陷问题：一个块级元素如果没有设置height，其height是由子元素撑开的。对子元素使用了浮动之后，子元素会脱离标准文档流，也就是说，父级元素中没有内容可以撑开其高度，这样父级元素的height就会被忽略，这就是所谓的高度塌陷。

/* 经益求精写法 */
.clearfix:after {
    /* content:"";  */
    content:”\200B”;
    display:block;
    height:0;
    clear:both;
 }
 /* 照顾IE6，IE7就可以了 */
.clearfix { *zoom:1; }

参考

https://juejin.im/post/5a954add6fb9a06348538c0d

[↑] 回到顶部

overflow:hidden 有什么缺点?

[↑] 回到顶部

padding 百分比是相对于父级宽度还是自身的宽度

[↑] 回到顶部

css3 动画，transition 和 animation 的区别，animation 的属性，加速度，重力的模拟实现

[↑] 回到顶部

CSS 3 如何实现旋转图片(transform: rotate)

[↑] 回到顶部

sass less

[↑] 回到顶部

对移动端开发了解多少?(响应式设计、Zepto;@media、viewport、 JavaScript 正则表达式判断平台。)

[↑] 回到顶部

什么是 bfc，如何创建 bfc?解决什么问题?

[↑] 回到顶部

CSS 中的长度单位(px,pt,rem,em,ex,vw,vh,vh,vmin,vmax)

[↑] 回到顶部

CSS 选择器的优先级是怎样的?

[↑] 回到顶部

雪碧图

[↑] 回到顶部

svg

[↑] 回到顶部

媒体查询的原理是什么?

[↑] 回到顶部

CSS 的加载是异步的吗?表现在什么地方?

[↑] 回到顶部

常遇到的浏览器兼容性问题有哪些?常用的 hack 的技巧

[↑] 回到顶部

外边距合并

[↑] 回到顶部

解释一下before和after中的双冒号和单冒号的区别

层叠样式表（CSS）的主要目的是给HTML元素添加样式，然而，在一些案例中给文档添加额外的元素是多余的或是不可能的。事实上CSS中有一个特性允许我们添加额外元素而不扰乱文档本身，这就是”伪元素”。

CSS 伪类用于向某些选择器添加特殊的效果。(:hover :active)
CSS 伪元素用于将特殊的效果添加到某些选择器。 (::after,::before)

伪类和伪元素的根本区别在于：它们是否创造了新的元素(抽象)。从我们模仿其意义的角度来看，如果需要添加新元素加以标识的，就是伪元素，反之，如果只需要在既有元素上添加类别的，就是伪类。

伪元素和伪类之所以这么容易混淆，是因为他们的效果类似而且写法相仿，但实际上 css3 为了区分两者，已经明确规定了伪类用一个冒号来表示，而伪元素则用两个冒号来表示。

单引号是伪类，逻辑上可以视为filter
双引号是伪元素，逻辑上可以视为child

1 2	:Pseudo-classes ::Pseudo-elements

但因为兼容性的问题，所以现在大部分还是统一的单冒号，但是抛开兼容性的问题，我们在书写时应该尽可能养成好习惯，区分两者。

参考

http://www.alloyteam.com/2016/05/summary-of-pseudo-classes-and-pseudo-elements/

[↑] 回到顶部

三、JavaScript

js的基本类型有哪些，引用类型有哪些，null和undefined的区别

基本类型有：undefined , null , boolean , srting , number

引用类型有：object , array , function , date , error

null是一个表示”无”的对象，转为数值时为0；undefined是一个表示”无”的原始值，转为数值时为NaN。 null表示”没有对象”，即该处不应该有值。undefined表示”缺少值”，就是此处应该有一个值，但是还没有定义。

typeof NaN = 'number'
typeof null = 'object'
//这2个有点难记
Number(undefined)  = NaN;
Number(null) = 0;

js中的NaN如何产生的？

怎么区分内存的堆区与栈区。

参考

https://juejin.im/post/5acc7e606fb9a028c67609f7

数据结构中的堆和栈是两种不同的、数据项按序排列的数据结构。

基本类型变量：在内存中分别占有固定大小的空间，他们的值保存在栈空间，通过按值访问、拷贝和比较。(变量的拷贝过程就是拷贝了内存中的一个副本？？？)

引用类型变量：栈内存中存放的只是该对象的访问地址，在堆内存中为该值分配空间，由于这种值的大小不固定，因此不能把他们保存到栈内存中；但内存地址大小是固定的，因此可以将堆内存地址保存到栈内存中。这样，当查询引用类型的变量时，就先从栈中读取堆内存地址，然后再根据该地址取出对应的值。

很显而易见的一点就是，JavaScript 中所有引用类型创建实例时，都是显式或隐式地 new 出对应类型的实例，实际上就是对应 C 语言的 malloc 分配内存函数。

js 中变量的赋值分为「传值」与「传址」。

[↑] 回到顶部

js有哪些内置对象

内置对象就是指javascript这个语言自带的一些对象

Array数组对象， string字符串， Math对象， Date日期对象

//数组对象
unshift() //数组开头增加
shift() //数组开头删除
push() //数组末尾添加
pop() //数组末尾删除
concat() //数组拼接  //concat可以实现数组的克隆()不传值
splice（index, howmany, item1, ...itemx） //数组的删除，增加，替换  ???
slice（n,m）      //数组截取
reverse() //数组翻转
sort() //数组排序
toString() //数组转字符数
join() //数组拼接

//字符串
charAt() //通过索引找字符
indexOf() //从前向后找，返回索引
lastIndexOf() //从后向前找，返回索引
slice() //字符串截取
substring()  // 这里等价于slice()
substr（n，m）  // 从索引n开始截取m 个
split() //字符串分隔成数组
toUpperCase() //转成大写
toLowerCase() //转成小写

//Math
Math.floor（）        //向下取整
Math.ceil（）         //向上取整
Math.random（）      //取0-1之间的随机小数
Math.round（）     //四舍五入
Math.abs（）      //取绝对值
Math.pow（x，y）      //x的y次幂
Math.sqrt（）     //开平方
Math.max（）      //取最大值

[↑] 回到顶部

Object是引用类型嘛，引用类型和基本类型有什么区别，哪个是存在堆哪一个是存在栈上面的

基本类型

基本类型的值是不可变得
基本类型的比较是值的比较
基本类型的变量是存放在栈内存中的
在从一个变量向另一个变量赋值基本类型时，会在该变量上创建一个新值，然后再把该值复制到为新变量分配的位置上：

引用类型

引用类型的值是可变的
引用类型的值是同时保存在栈内存和堆内存中的对象
引用类型的比较是引用的比较
两个变量都保存了同一个对象地址，则这两个变量指向了同一个对象

var person1 = '{}';
var person2 = '{}';
console.log(person1 == person2); // true

var person2 = {};
var person4 = {};
console.log(person3 == person4); // false

参考

https://www.cnblogs.com/focusxxxxy/p/6390536.html

[↑] 回到顶部

如何判断一个变量是Array类型，如何判断一个变量是Number类型

typeof 检查基本类型ok，引用类型GG

//判断是Array类型
let arr = [];
arr instanceof Array  //true
arr.constructor == Array //true
// Array.isArray()
Array.isArray(arr)  //true
// 利用对象的toString方法
Object.prototype.toString.call([]) === "[object Array]"; // true

后2种较为准确

//判断是Number类型
let num = 123;
typeof num == "number" //true
arr.constructor ==Number //true
Object.prototype.toString.call(num) == "[object Number]"; //true

1 2	// isNaN isNaN(123) = false;

[↑] 回到顶部

防抖和节流

函数节流是指一定时间内js方法只跑一次。比如人的眨眼睛，就是一定时间内眨一次。这是函数节流最形象的解释。

函数防抖是指频繁触发的情况下，只有足够的空闲时间，才执行代码一次。比如生活中的坐公交，就是一定时间内，如果有人陆续刷卡上车，司机就不会开车。只有别人没刷卡了，司机才开车。

JS 常见的 dom 操作 api

[↑] 回到顶部

解释一下事件冒泡和事件捕获

[↑] 回到顶部

事件委托(手写例子)，事件冒泡和捕获，如何阻止冒泡?如何组织默认事件?

[↑] 回到顶部

对闭包的理解?什么时候构成闭包?闭包的实现方法?闭包的优缺点?

先看一个列子

let add=(function(){
let now=0;
return {
 doAdd:function(){
    now++;
    console.log(now);
}
}
})();
//方法调用
add.doAdd();

now 这个变量，并没有随着函数的执行完毕而被回收，而是继续保存在内存里面。

由于 add 里面有函数是依赖于 now 这个变量。所以 now不会被销毁，回收。这就是闭包的用途之一（延续变量周期）。由于 now 在外面访问不到，这就是闭包的另一个用途（创建局部变量，保护局部变量不会被访问和修改）。

《JavaScript权威指南》中的概念

函数对象可以通过作用域链互相关联起来,函数体内部的变量都可以保存在函数作用域内,这种特性在计算机科学中成为闭包

《JavaScript权威指南》中的概念

闭包是指有权访问另一个函数作用域中的变量的函数。

《JavaScript忍者秘籍》中的概念

闭包是一个函数在创建时允许该自身函数访问并操作该自身函数以外的变量时所创建的作用域。

《你不知道的JavaScript》中的概念

闭包是基于词法作用域书写代码时所产生的自然结果。当函数记住并访问所在的词法作用域，闭包就产生了。

闭包就是一个函数，一个可以访问并操作其他函数内部变量的函数。也可以说是一个定义在函数内部的函数。因为JavaScript没有动态作用域，而闭包的本质是静态作用域（静态作用域规则查找一个变量声明时依赖的是源程序中块之间的静态关系），所以函数访问的都是我们定义时候的作用域，也就是词法作用域。所以闭包才会得以实现。

我们常见的闭包形式就是a 函数套 b 函数，然后 a 函数返回 b 函数，这样 b 函数在 a 函数以外的地方执行时，依然能访问 a 函数的作用域。其中”b 函数在 a 函数以外的地方执行时”这一点，才体现了闭包的真正的强大之处。

参考

[↑] 回到顶部

this有哪些使用场景，跟C，Java中的this有什么区别，如何改变this的值

JavaScript中的js

this的指向在函数定义的时候是确定不了的，只有函数执行的时候才能确定this到底指向谁,记住关键的一句话：

哪个对象调用函数，函数里面的this指向哪个对象

//this指向全局对象
//作为函数调用
function a(){
    var user = "追梦子";
    console.log(this.user); //undefined
    console.log(this); //Window
}
a();

// this指向o对象（o对象调用了函数）
// 作为对象调用
var o = {
    user:"追梦子",
    fn:function(){
        console.log(this.user);  //追梦子
    }
}
o.fn();

// this指向obj对象，obj对象下 无b属性
window.b=2222
let obj={
    a:111,
    fn:function(){
        alert(this.a);//111
        alert(this.b);//undefined
    }
}
obj.fn();

//this指向o.b对象
var o = {
    a:10,
    b:{
        a:12,
        fn:function(){
            console.log(this.a); //12
        }
    }
}
o.b.fn();

//作为构造函数调用
let TestClass = function() {
    this.name = '111';
}
TestClass.prototype.name = '11';

let subClass = new TestClass();
subClass.name = 'niceboybao';

console.log(subClass); //niceboybao
let subClass1 = new TestClass();
console.log(subClass1.name) //111

作为构造函数调用，可行了解下js中的new()一个对象具体做了什么一个对象具体做了什么)

// apply和call调用
let obj1 = {
    a: 222
};
let obj2 = {
    a: 111,
    fn: function() {
        console.log(this.a); //222
    }
}
obj2.fn.call(obj1);

此时虽然是 obj2 调用方法，但是使用了call，动态的把 this 指向到 obj1。相当于这个 obj2.fn 这个执行环境是 obj1 。

当然，apply和call会改变传入函数的this

this 有哪些使用场景

作为对象方法调用(参考上面)
作为函数调用
作为构造函数调用
使用 apply 或 call 调用

参考

[↑] 回到顶部

call，apply，bind

call和apply

共同点：改变 this 的指向；方法借用

不同点：参数不同而已

call 和 apply 的作用，完全一样，唯一的区别就是在参数上面。call 接收的参数不固定，第一个参数是函数体内 this 的指向，第二个参数以下是依次传入的参数。apply接收两个参数，第一个参数也是函数体内 this 的指向。第二个参数是一个集合对象（数组或者类数组）

//注意如果call和apply的第一个参数写的是null，那么this指向的是window对象
var a = {
    user:"追梦子",
    fn:function(){
        console.log(this); //Window
    }
}
var b = a.fn;
b.apply(null);

bind()

bind()方法创建一个新的函数, 当被调用时，将其this关键字设置为提供的值，在调用新函数时，在任何提供之前提供一个给定的参数序列。

bind()也可以用来改变this的指向，但是有点不同

var a = {
    user:"追梦子",
    fn:function(){
        console.log(this.user);
    }
}
var b = a.fn;
b.bind(a);

var a = {
    user: "追梦子",
    fn: function() {
        console.log(this.user);
    }
}
var b = a.fn;
var c = b.bind(a);
console.log(c);  //ƒ () {console.log(this.user);}