前端知识大杂烩（每天一个知识点）

前端基础知识点

1.事件委托

事件捕获

• 事件捕获中，父级元素先触发，子集元素后触发
• 事件会从最外层开始，直到具体的元素，比如click的捕获过程document->html->body->div->p

事件冒泡

• 事件冒泡时，子元素先出发，父级元素后触发
• 元素自身事件被触发后，如果父元素有相同的事件，那么元素本身的触发状态就会传递，就是冒到父元素，父元素相同事件也会一级级向外触发

事件代理

• 事件委托，通俗地来讲，就是把一个元素响应事件（click、keydown......）的函数委托到另一个元素
• 一般来讲，会把一个或者一组元素的事件委托到它的父层或者更外层元素上，真正绑定事件的是外层元素，当事件响应到需要绑定的元素上时，会通过事件冒泡机制从而触发它的外层元素的绑定事件上，然后在外层元素上去执行函数

优点

• 减少了事件注册，节省了内存，如在 table 上代理所有 tr 的 click 事件
• 简化了 dom 更新时的事件操作，如现在 table 内增加了一行 tr，不用再为这个 tr 添加事件了

缺点

• 事件委托基于冒泡，不冒泡的事件无法委托，如 blur、focus、mouseenter、mouseleave、input、keydown、keyup
• 可能被中间层阻止
• 事件会频繁的被调用，比如 tr 的事件被代理到 body 上
• 如果把所有事件都用事件委托,可能会出现事件误判,即不该触发事件的被绑定了

2.target和currentTarget的区别

• target：触发事件的元素。
• currentTarget：事件绑定的元素

两者在没有冒泡的情况下，是一样的值，但在用了事件委托的情况下，就不一样

3.BOM与history

浏览器对象模型(Browser Object Model,简称BOM)是浏览器的内置对象管理模型。

路由Router的基石：BOM的history.

Javascript基础

1.var let 区别 (推荐使用let)

1.  let是块状作用域，而var是函数作用域。
2. let不能在定义之前访问该变量（var是可以的，它确实是js世界中许多bug和困扰的源头）。
3. let不能被重新定义

// 输出 5,5,5,5,5
for (var i = 0; i < 5; i++) {
	setTimeout(function() {
		console.log(i);
	}, 1000);
}

// 输出 0,1,2,3,4
for (let i = 0; i < 5; i++) {
	setTimeout(function() {
		console.log(i);
	}, 1000);
}

  

CSS基础

1.css水平、垂直居中的写法

水平居中

• 行内元素: text-align: center
• 块级元素: margin: 0 auto
• position:absolute +left:50%+ transform:translateX(-50%)  只适用于单个子节点，多个会重叠覆盖
• display:flex + justify-content: center

垂直居中

• 设置line-height 等于height
• position：absolute +top:50%+ transform:translateY(-50%)  只适用于单个子节点，多个会重叠覆盖 
• display:flex + align-items: center
• display:table+display:table-cell + vertical-align: middle;

 flex弹性布局

relative（相对定位）：定位原点是元素本身所在位置；

absolute（绝对定位）：定位原点是离自己这一级元素最近的一级position设置为absolute或者relative的父元素的左上角为原点的

<div class="div1">我是内容</div>

div1{
	height: 500px;
	width: 500px;
	background-color: plum;
	font-size: 30px;

	text-align: center; // 文字水平居中
	line-height: 500px; // 垂直居中，适用于单行文本
}

<div class="parent">
	<div class="child"></div>
</div>

.parent{
	height: 500px;
	width: 500px;
	background-color: plum;
	font-size: 30px;
}
.child{
	height: 200px;
	width: 200px;
	background-color: #FF7F50;
	
	margin: 0 auto; // 块级元素水平居中
}

<div class="parent">
	<div class="child"></div>
</div>

.parent{
	height: 500px;
	width: 500px;
	background-color: plum;
	font-size: 30px;
	position: relative; // 父节点相对定位
}
.child{
	height: 200px;
	width: 200px;
	background-color: #FF7F50;
	position: absolute; // 子节点绝对定位，只适用于单个子节点，多个会重叠覆盖
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

<div class="parent">
	<div class="child"></div>
    <div class="child"></div>
</div>

.parent{
	height: 500px;
	width: 500px;
	background-color: plum;
	font-size: 30px;

	display:flex;
	justify-content: center;
	align-items: center
}
.child{
	height: 200px;
	width: 200px;
	background-color: #FF7F50;
}

<div class="parent">
	<div class="child"></div>
</div>

.parent{
	height: 500px;
	width: 500px;
	background-color: plum;
	font-size: 30px;

	vertical-align: middle;
	display:table-cell ;
}
.child{
	height: 200px;
	width: 200px;
	background-color: #FF7F50;
    margin:0 auto;
}

2.盒子模型

盒模型的组成，由里向外content,padding,border,margin.

在IE盒子模型中，width表示content+padding+border这三个部分的宽度

在标准的盒子模型中，width指content部分的宽度

box-sizing 属性可以被用来调整这些表现:

• content-box  是默认值。如果你设置一个元素的宽为100px，那么这个元素的内容区会有100px 宽，并且任何边框和内边距的宽度都会被增加到最后绘制出来的元素宽度中。
• border-box 告诉浏览器：你想要设置的边框和内边距的值是包含在width内的。也就是说，如果你将一个元素的width设为100px，那么这100px会包含它的border和padding，内容区的实际宽度是width减去(border + padding)的值。大多数情况下，这使得我们更容易地设定一个元素的宽高。

• content-box

  width = 内容的宽度        height = 内容的高度

• border-box

  width = border + padding + 内容的宽度           height = border + padding + 内容的高度

3.清除浮动的几种方式

• ::after（父级元素的最后，添加了一个:after伪元素，通过清除伪元素的浮动，达到撑起父元素高度的目的，子元素因浮动会有重合覆盖部分）
• clear: both（清除当前元素左右浮动）
• 创建父级 BFC(overflow:hidden)
• 父级设置高度 （撑起父元素高度，子元素因浮动会有重合覆盖部分）

 

<div class="top">
	<div class="left"></div>
	<div class="text"></div>
</div>
<div class="bottom"></div>

.left{
	height: 200px;
	width:200px;
	background-color: #DDA0DD;
	float: left;
}
.text{
	height: 150px;
	width:600px;
	background-color: #FF7F50;
    text-align: center;
	font-size: 60px;
	line-height: 150px;
	color: white;
}
.bottom{
	height: 200px;
	width:400px;
	background-color: aqua;
}
		

1.clear:both/left/right

.text{
	height: 150px;
	width:600px;
	background-color: #FF7F50;
	clear: both;/* 清除左右的浮动 */
	text-align: center;
	font-size: 60px;
	line-height: 150px;
	color: white;
}

2.父级设置高度：子元素因浮动会有重合覆盖部分

.top{
	height: 300px;
	border: 1px solid red;
}

3.伪元素after

.top:after{
	content:'';
	display:block;
	clear:both;
	height: 0;
}

4.创建父级BFC

.top{
	border: 1px solid red;
	overflow:hidden
}

4.BFC（Block Formatting Context，块格式化上下文）

BFC的触发条件

1、根元素（<html>）
2、float值非none
3、overflow值非visible
4、display值为inline-block、table-cell、table-caption、flex、inline-flex
5、position值为absolute、fixed

BFC的特性

1、属于同一个BFC的两个相邻容器的上下margin会重叠（重点）
2、计算BFC高度时浮动元素也参于计算（重点）
3、BFC的区域不会与浮动容器发生重叠（重点）
4、BFC内的容器在垂直方向依次排列
5、元素的margin-left与其包含块的border-left相接触
6、BFC是独立容器，容器内部元素不会影响容器外部元素

详细说明点击查看