一、HTML
1、重排和重绘
浏览器下载完页面的所有组件（html、js、css、图片）后，会解析并生成两个内部数据结构：
DOM树——表示页面结构
渲染树——表示DOM节点如何显示
DOM树中每一个需要显示的节点在渲i染树中至少存在一个对应的节点。一旦DOM树和渲染树构建完成，浏览器就开始“绘制”页面元素。
当DOM的变化影响了元素的几何元素（宽和高），就要重新构造渲染树，这个过程称之为“重排”；
完成“重排”后，浏览器会重新绘制受影响部分的元素到屏幕中，这个过程称为“重绘”。
重排何时发生
在页面布局和几何元素改变时，就需要“重排”。有下列几种情况：
1.添加或删除可见的DOM元素；
2.元素位置发生改变
3.元素尺寸改变（margin、padding、border、width、height等）；
4.内容改变，例如文本改变或图片用另外一个不同尺寸的图片替代；
5.页面渲染器初始化；
6.浏览器窗口尺寸改变。
根据改变的范围和程度，渲染树中或多或少的对应的部分需要重新计算，有时会触发整个页面的重绘，例如：当滚动条出现。
不要在布局信息改变时查询，改变完成后，统一查询。
最小化重排和重绘
重排和重绘代价昂贵，尽量减少次数，应该合并多次对DOM和样式的修改。
一、改变样式
二、批量修改DOM
缓存布局信息
让元素脱离动画流
2、Meta标签中的viewport属性及含义
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
Viewport含义：
手机浏览器是把页面放在一个虚拟的“窗口”（viewport）中，通常这个虚拟的“窗口”（viewport）比屏幕宽，这样就不用把每个网页挤到很小的窗口中，也不会破坏没有针对手机浏览器优化的网页的布局，用户可以通过平移和缩放来看网页的不同部分。
属性：
| 属性名 | 内容 |
|---|---|
| width | 控制viewport的大小，可以指定一个值，如600， 或者特殊的值，如device-width，为设备的宽度（单位是缩放为100%的CSS的像素） |
| height | 和width相对应，指定高度 |
| initial-scale | 初始缩放比例，页面第一次加载时的缩放比例 |
| maximum-scale | 允许用户缩放到的最大比例，范围从0到10.0，（如果是1.0将禁止用户放大到实际尺寸之上） |
| minimum-scale | 允许用户缩放到的最小比例，范围从0到10.0 ，（1.0同理上） |
| user-scalable | 用户是否可以手动缩放：①yes、 true允许用户缩放；②no、false不允许用户缩放 |
3、CSS标准盒子 （box-sizing）（转载：css 盒子模型）
一、盒模型
标准盒模型=内容（width）+内边距（padding）+边框（border）+外边距（margin）；
（IE盒模型=内容（width）+内边距（padding）+边框（border）+外边距（margin）；
但是内容width包含了padding和border部分）
元素总宽度=元素内容width+padding左右内边距+border左右宽度+margin左右外边距的值；
元素总高度=元素内容height+padding上下内边距+border上下宽度+margin上下外边距的值；
盒模型.png
二、css上下外边距合并
两个上下方向相邻的元素框垂直相遇时，外边距会合并，合并后的外边距的高度等于两个发生合并的外边距中较高的那个边距值。如图：
合并1
合并2
三、box-sizing属性
box-sizing属性允许您以特定的方式定义匹配某个区域的特定元素。
box-sizing : content-box|border-box|inherit;
(1) content-box ,默认值，可以使设置的宽度和高度值应用到元素的内容框。盒子的width只包含内容content。
即总宽度=margin+border+padding+width
(2) border-box , 设置的width值其实是除margin外的border+padding+element的总宽度。盒子的width包含border+padding+内容content
即总宽度=margin+width
很多CSS框架，都会对盒子模型的计算方法进行简化。
(3) inherit , 规定应从父元素继承 box-sizing 属性的值。
关于border-box的使用：
1 一个box宽度为100%，又想要两边有内间距，这时候用就比较好
2 全局设置 border-box 很好，首先它符合直觉，其次它可以省去一次又一次的加加减减，它还有一个关键作用——让有边框的盒子正常使用百分比宽度。
四、实际开发中遇到的与盒模型相关的应用及小知识
1、浏览器之间的盒模型问题
（1）ul标签在Mozilla中默认是有padding值的，而在IE中只有margin有值。
（2）标准盒子模型与IE模型之间的差异：
标准的盒子模型就是上述介绍的那种，而IE模型更像是 box-sizing : border-box; 其内容宽度还包含了border和padding。解决办法就是：在html模板中加doctype声明。
2、margin越界（第一个子元素的margin-top和最后一个子元素的margin-bottom的越界问题）
以第一个子元素的margin-top 为例：
当父元素没有边框border时，设置第一个子元素的margin-top值的时候，会出现margin-top值加在父元素上的现象，解决方法有四个：
（1）给父元素加边框border （副作用）
（2）给父元素设置padding值 （副作用）
（3）父元素添加 overflow：hidden （副作用）
（4）父元素加前置内容生成。（推荐）
以第四种方法为例：
.parent {
width : 500px;
height : 500px;
background-color : red;
}
.parent : before {
content : " ";
display : table;
}
.child {
width : 200px;
height : 200px;
background-color : green;
margin-top : 50px;
}
<div class="parent">
<div class="child"></div>
</div>
图片显示,只有子元素才margin-top:50px：
1
不解决，同时margin-top:50px：
2
3 用盒子模型画三角形
<!DOCTYPE html>
<html>
<head>
<style>
.triangle {
width : 0;
height: 0;
border : 100px solid transparent;
border-top : 100px solid blue; /*这里可以设置border的top、bottom、left、right四个方向的三角*/
}
</style>
</head>
<body>
<div class="triangle"></div>
</body>
</html>
页面显示结果为：
盒子模型画三角形
4、清除浮动
5、两列布局（右侧定宽200px,左边随屏幕自动填充宽度）
6、水平垂直居中（转载自：css 水平垂直居中）
1、水平居中
方法一：父元素为块级元素，将父元素设置为text-align：center。将子元素设置为inline|inline-block（行内或行内块元素）
示例代码：
.parent1 {
text-align:center;
}
.child1 {
display:inline|inline-block;
}
方法二：父元素和子元素都为块级元素，则将子元素设置宽度后，设置margin：auto
代码：
<main class="parent2">
<div class="child2">我是孩子2，我要水平居中</div>
</main>
.child2 {
width:60%;
margin:auto;
}
方法三： 如果是多个子元素水平居中，则有两种方法
3.1 将子级设置成行内或者行内块元素，父元素设置text－align属性（见方法一））
3.2 将父元素设置display：flex
<main class="parent4">
<div class="child4">我是孩子4，我要水平居中</div>
<div class="child4">我是孩子4，我要水平居中</div>
<div class="child4">我是孩子4，我要水平居中</div>
</main>
.parent4 {
display: flex;
justify-content: center;/*两句代码一起才有效果，单用flex没有用，目前还没进入深层次研究*/
}
.child4 {
margin:10px;/*不设置全挨着一块了*/
}
2、垂直居中
方法一：1 除了设置固定的padding值使其看起来垂直居中之外，还可用line－height
将line－height和height的值设置为相同值，
<main class="parent5">
<div class="child5">我是孩子5，我要垂直居中</div>
</main>
.child5 {
height:50px;
line-height: 50px;
}
方法二： 如果是多行的，可以像table那样，按照table cell 模式显示，配合vertical－align
<main class="parent6">
<div class="child6">我是孩子6，我要垂直居中</div>
<div class="child6">我是孩子6，我要垂直居中</div>
<div class="child6">我是孩子6，我要垂直居中</div>
</main>
.parent6 {
display: table;
}
.child6 {
display: table-cell;
border:2px solid #000;
vertical-align: middle;
}
方法三：通过绝对定位(子元素高度确定或者不确定两种)
<main class="parent7">
<div class="child7">我是孩子7，我要垂直居中</div>
</main>
/*如果知道子元素宽高*/
.parent7 {
position: relative;
height: 100px;
}
.child7 {
position: absolute;
top:50%;
height:60px;
margin-top:-30px;/*height一半值*/
}
/*如果不知道子元素宽高*/
.parent7 {
position: relative;
height: 100px;
}
.child7 {
position: absolute;
top:50%;
transform: translateY(-50%);
}
方法四：使用flex
<main class="parent8">
<div class="child8">我是孩子8，我要垂直居中</div>
</main>
.parent8 {
height: 200px;/*可填可不填*/
display: flex;
flex-direction: column;
justify-content: center;
}
3、水平垂直居中
方法一：使用绝对定位
<main class="parent9">
<div class="child9">我是孩子9，我要水平垂直居中</div>
</main>
/*如果不知道子元素宽高*/
.parent9 {
position: relative;
height: 150px;
}
.child9 {
position: absolute;
top:50%;
left:50%;
transform: translate(-50%,-50%);/*垂直居中只有translateY(-50%)*/
}
/*如果知道子元素宽高*/
.parent9 {
position: relative;
height: 150px;
}
.child9 {
position: absolute;
top:50%;
left:50%;
height:60px;
width:100px;
margin-left:-50px;/*width一半值*/
margin-top:-30px;/*height一半值*/
}
方法二：使用flex
.parent10 {
height: 200px;
display: flex;
flex-direction: column;
justify-content: center;
}
.child10 {
margin: auto;/*不设置占整行*/
}
上述所有图片：
1
2
7、addEventListener()有几个参数，是什么？
addEventListener()方法用于向指定元素添加事件
element.addEventListener(event, function, useCapture) 有三个参数；
addEventListener.png
图片来源：addEventListener()
一、JS
1、typeof的类型（举例说属于什么类型）
typeof.png
详细用法见typeof
2、function.prototype.bind()/call()/apply()的用法及区别
1、方法定义
call方法:
语法：call([thisObj[,arg1[, arg2[, [,.argN]]]]])
定义：调用一个对象的一个方法，以另一个对象替换当前对象。
说明：
call 方法可以用来代替另一个对象调用一个方法。call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。
如果没有提供 thisObj 参数，那么 Global 对象被用作 thisObj。
apply方法：
语法：apply([thisObj[,argArray]])
定义：应用某一对象的一个方法，用另一个对象替换当前对象。
说明：
如果 argArray 不是一个有效的数组或者不是 arguments 对象，那么将导致一个 TypeError。
如果没有提供 argArray 和 thisObj 任何一个参数，那么 Global 对象将被用作 thisObj， 并且无法被传递任何参数。
使用1：
function add(a,b)
{
alert(a+b);
}
function sub(a,b)
{
alert(a-b);
}
add.call(sub,3,1); //结果是alert(4)
使用2：
function Animal(){
this.name = "Animal";
this.showName = function(){
alert(this.name);
}
}
function Cat(){
this.name = "Cat";
}
var animal = new Animal();
var cat = new Cat();
//通过call或apply方法，将原本属于Animal对象的showName()方法交给对象cat来使用了。
//输入结果为"Cat"
animal.showName.call(cat,",");
//animal.showName.apply(cat,[]);
这个例子中的意思就是用 add 来替换 sub，add.call(sub,3,1) == add(3,1) ，所以运行结果为：alert(4)。
网友评论