CSS实现文本垂直居中
1. 父元素设置table布局，子元素设置单元格table-cell布局
.box1 {
display: table;
}
.child1 {
display: table-cell;
vertical-align: middle;
}2. 子元素设置宽高，使用定位和根据元素宽高设置外边距
.box2 {
position: relative;
}
.child2 {
position: absolute;
width: 200px;
height: 70px;
border: 1px solid red;
top: 50%;
left: 50%;
margin-top: -35px;
margin-left: -100px;
}3. 同理，使用translate进行平移
.box3 {
position: relative;
}
.child3 {
width: 100%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}4. flex布局
.box4 {
display: flex;
justify-content: center;
align-items: center;
}5.
.box5 {
display: flex;
}
.child5 {
margin: auto;
}对于float的理解
对于float的最初认识，就是使文字环绕着图片显示。其他的用途：实现横向排版、多列布局、具有包裹性（元素刚好占据文本的大小）、消除标签之间的默认空白。
使用float定位的元素，它的父元素坍塌，怎么清除浮动？
清除浮动的方法：
1. overflow: hidden;
2. 添加一个空的div块，设置css样式clear: both;
3.使用伪元素 .clearfix
.clearfix:after {
content: "";
display: table;
clear: both;
}
.clearfix {
zoom: 1;
}伪类和伪元素
伪类分为UI伪类和结构化伪类。
UI伪类
a:hover
a:visited
a:active
a:link
input:focus结构化伪类
tr:first-child
tr:last-child
tr:nth-child(even)表格间隔一行的背景颜色显示，可以由tr:nth-child(even) {…}实现
伪元素
常用的伪元素:before，:after 。可以用于添加自定义字符，常用的清除浮动方法也是应用了伪元素:after。
a:after {
content: 'hhh';
color: green;
}选择器
在每一行底部加上下划线
li {
border-bottom: 1px solid #ddd;
}
li:last-child {
border-bottom: none;
}利用选择器也可以实现
li+li {
border-top: 1px solid #ddd;
}选择器的权重
ID选择器 100
class选择器 10
标签选择器 1
==和===的区别
var num = 1;
var str = '1';
var test = 1;
test == num //true 相同类型 相同值
test === num //true 相同类型 相同值
test !== num //false
num == str //true 把str转换为数字，检查其是否相等。
num === str //false 类型不同，直接返回false
num !== str //true this的使用
什么是this?
this是JavaScript的关键字之一。找拥有当前上下文（context）的对象（context object）。它是 对象 自动生成的一个内部对象，只能在 对象 内部使用。随着函数使用场合的不同，this的值会发生变化。this指向的是当前谁调用了它，它就指向谁。在普通情况下就是全局，浏览器里就是window；在use strict的情况下就是undefined。
function foo() {
var a = 1;
console.log(this.a);
}
var a = 10;
foo(); // 10,调用window.foo(),this指向windowfunction showThis() {
console.log(this);
}
function showStrictThis() {
'use strict'
console.log(this);
}
showThis(); // window
showStrictThis(); // undefinedthis指向什么，完全取决于什么地方以什么方式调用，而不是创建时。（比较多人误解的地方）
var bar = {
name: 'bar',
returnThis() {
return this;
}
}
bar.returnThis() === bar; // true
function foo() {
console.log(this.a);
}
var obj = {
a: 10,
foo: foo
};
foo(); // undefined
obj.foo(); // 10如果是链性的关系，比如 xx.yy.obj.foo();, 上下文取函数的直接上级，即紧挨着的那个，或者说对象链的最后一个。
隐性绑定中有一个致命的限制，就是上下文必须包含我们的函数 ，例：var obj = { foo : foo },如果上下文不包含我们的函数用隐性绑定明显是要出错的，不可能每个对象都要加这个函数 ,那样的话扩展,维护性太差了，那怎么直接给函数强制性绑定this呢？利用Object.prototype.call和Object.prototype.apply，它们可以通过参数指改变this的指向，第一个参数都是 设置this对象。
两个函数的区别：
1. call从第二个参数开始所有的参数都是 原函数的参数。
2. apply只接受两个参数，且第二个参数必须是数组，这个数组代表原函数的参数列表。
function foo(a, b) {
console.log(a + b);
}
foo.call(null, '你', '好'); // 你好
foo.apply(null, ['你', '好']); // 你好还有一个改变this指向的函数Object.prototype.bind，它不会立刻执行，只是将一个值绑定到函数的this上,并将绑定好的函数返回。它不但通过一个新函数来提供永久的绑定，还会覆盖call，apply的绑定。
function returnThis() {
return this;
}
var test01 = {name: 'test01'};
var test01returnThis = returnThis.bind(test01);
test01returnThis(); // test01
var test02 = {name: 'test02'};
test01returnThis.call(test02); // test01function foo() {
console.log(this.a);
}
var obj = {a: 10};
foo = foo.bind(obj);
foo(); // 10
var obj2 = {a: 20};
foo.call(obj2); // 10当我们new一个函数时，就会自动把this绑定在新对象上，然后再调用这个函数。它会覆盖bind的绑定。使用new调用函数后，函数会 以自己的名字 命名 和 创建 一个新的对象，并返回。
那么用new 做到函数的构造调用后，js帮我们做了什么工作呢?
1.创建一个新对象。
2.把这个新对象的__proto__属性指向 原函数的prototype属性。(即继承原函数的原型)
3.将这个新对象绑定到 此函数的this上 。
4.返回新对象，如果这个函数没有返回其他对象。
this指向中最强大的就是ES2016(ES6)中 的箭头函数 => 。箭头函数里的this永远指向当前词法作用域之中，称作 Lexical this ，在代码运行前就可以确定。没有其它函数或方法可以覆盖。对于箭头函数，只要看它在哪里创建的就行。
这样的好处就是方便让回调函数的this使用当前的作用域，不怕引起混淆。
判断this
现在我们可以根据优先级来判断函数在某个调用位置应用的是哪条规则。可以按照下面的
顺序来进行判断:
1. 函数是否在new中调用(new绑定)?如果是的话this绑定的是新创建的对象。
var bar = new foo()
2. 函数是否通过call、apply(显式绑定)或者硬绑定调用?如果是的话，this绑定的是 指定的对象。
var bar = foo.call(obj2)
3. 函数是否在某个上下文对象中调用(隐式绑定)?如果是的话，this 绑定的是那个上 下文对象。
var bar = obj1.foo()
4. 如果都不是的话，使用默认绑定。如果在严格模式下，就绑定到undefined，否则绑定到 全局对象。
var bar = foo()
就是这样。对于正常的函数调用来说，理解了这些知识你就可以明白 this 的绑定原理了。
–摘自《你不知道的JavaScript（上）》