行内元素和块级元素
行内元素会在一条直线上排列（默认宽度只与内容有关），都是同一行的，水平方向排列。
块级元素各占据一行（默认宽度是它本身父容器的100%（和父元素的宽度一致），与内容无关），垂直方向排列。块级元素从新行开始，结束接着一个断行。
块级元素可以包含行内元素和块级元素。行内元素不能包含块级元素，只能包含文本或者其它行内元素。
行内元素设置width无效，height无效(可以设置line-height)，margin上下无效，padding上下无效。
回流和重绘
回流是什么？ 当render tree的一部分或全部的元素因改变了自身的宽高，布局，显示或者隐藏，或者元素内部的文字结构发生变化 导致需要重新构建页面的时候，回流就产生了
重绘：主要样式的改变
回流一定触发重绘
严格模式和混杂模式
严格模式：又称标准模式，是指浏览器按照 W3C 标准解析代码。
混杂模式：又称怪异模式或兼容模式，是指浏览器用自己的方式解析代码。
如何区分：浏览器解析时到底使用严格模式还是混杂模式，与网页中的 DTD 直接相关。
content 标准
content padding border。混杂模式
content padding border margin
BFC
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。
BFC ：块级格式化上下文。它是指一个独立的块级渲染区域。
如何触发BFC：
- 根元素
- float的值不为none
- overflow的值不为visible
- display的值为inline-block、table-cell、table-caption
- position的值为absolute和fixed
例子：
当触发main生成BFC后，这个新的BFC不会与浮动的aside重叠，因此会根据包含块的宽度和aside的宽度自动变窄
<!--
自适应两栏布局
BFC的区域不会与float box重叠。
-->
<style>
body{
position: relative;
width: 300px;
}
.aside{
float: left;
background-color: #f66;
width: 100px;
height: 150px;
}
.main{
height: 200px;
background-color: #fcc;
/* BFC的区域不会与float box重叠。 */
overflow: hidden;
}
</style>
</head>
<body>
<div class="aside">
</div>
<div class="main">
</div>
</body>
例子：清除内部浮动
高度塌陷
<style>
.main{
border: 5px solid #ffcccc;
width: 300px;
// 为达到清除内部浮动，我们可以触发main生成BFC，那么main在计算高度时，main内部的浮动元素aside也会参与计算。
overflow: hidden;
}
.aside {
float: left;
border: 5px solid #f66;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div class="main">
<div class="aside">
</div>
<div class="aside">
</div>
</div>
</body>
例子：防止垂直的margin重叠
相邻的两个盒子上下外边距会发生重叠。重叠之后的结果是这两个盒子相邻部分的垂直外边距取两者中较大的那个数值。
<style>
p {
color: #f55;
background: #fcc;
width: 200px;
line-height: 100px;
text-align:center;
margin: 100px;
}
</style>
<body>
<p>Haha</p>
<p>Hehe</p>
</body>
两个p之间的距离为100px 发生了margin折叠
Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
解决：
我们在p外面包裹一层容器，并触发该容器生成一个BFC。那么两个p便不属于同一个BFC，就不会发生重叠了。
<body>
<p>Haha</p>
<div class="wrap">
<p>Hehe</p>
</div>
</body>
.wrap {
overflow: hidden;
}
5.进程和线程的区别
- 怎么通信
- 操作系统里如何调度
- 计算机网络的七层模型
- http在哪一层，tcp呢
- tcp和udp区别
setTimeOut
延迟多少时间执行任务。定时器的作用
setTimeout是一个宏任务
setTimeout(fn,0)的含义是，指定某个任务在主线程最早可得的空闲时间执行，意思就是不用再等多少秒了，只要主线程执行栈内的同步任务全部执行完成，栈为空就马上执行
console.log('script start');
setTimeout(function() {
console.log('timeout1');
}, 10);
new Promise(resolve => {
console.log('promise1');
resolve();
setTimeout(() => console.log('timeout2'), 10);
}).then(function() {
console.log('then1')
})
console.log('script end');
首先，事件循环从宏任务(macrotask)队列开始，最初始，宏任务队列中，只有一个script(整体代码)任务；当遇到任务源(task source)时，则会先分发任务到对应的任务队列中去。所以，就和上面例子类似，首先遇到了console.log，输出script start； 接着往下走，遇到setTimeout任务源，将其分发到任务队列中去，记为timeout1； 接着遇到promise，new promise中的代码立即执行，输出promise1,然后执行resolve,遇到setTimeout,将其分发到任务队列中去，记为timemout2,将其then分发到微任务队列中去，记为then1； 接着遇到console.log代码，直接输出script end 接着检查微任务队列，发现有个then1微任务，执行，输出then1 再检查微任务队列，发现已经清空，则开始检查宏任务队列，执行timeout1,输出timeout1； 接着执行timeout2，输出timeout2 至此，所有的都队列都已清空，执行完毕。其输出的顺序依次是：script start, promise1, script end, then1, timeout1, timeout2
原型链 代码
每一个构造函数都有自己的一个原型对象，原型对象都包含一个指向构造函数的指针，而实例都包含一个指向原型对象内部的指针
function Person(){
this.name = 'wode';
}
Person.prototype.say = function(){
console.log('是我a ')
}
function Student(name){
this.name =name;
}
Dog.prototype = new Student();
var mys = new Student('wowo')
mys.say()
继承
构造函数
原型链继承
构造函数和原型链组合继承
原型式继承
寄生式继承
寄生式组合继承
创建对象
工厂模式
构造函数
原型模式
构造函数和原型模式组合
动态原型
寄生构造函数
Apply call的区别
apply和call 改变this的指向
B.call(A,arguments):A对象应用B对象上的方法
caller ：看下什么函数调用了我
callee：指向拥有这个arguments对象的函数
Ajax的作用 全称
Ajax异步的js和xml
Ajax是用于创建快速动态网页的技术。
通过在后台与服务器进行少量数据交换，AJAX可以使网页实现异步更新。
主要的核心是XHR对象。
同源策略
同域名 同端口 同协议
Ajax只能在同源策略下进行请求。
同源策略限制了从同一源家在的文档或文本如何与来自另一个源的资源进行交互
不受同源策略限制的：
页面的链接，重定向，表单提交
跨域资源的引入是可以的
- 跨域的方式
- 事件轮询
浏览器如何渲染页面
处理HTML标记并构建DOM树
处理CSS标记并构建CSSOM树
将DOM与CSSOM合并成一个渲染树
根据渲染树来布局，计算每个节点的布局信息
将各个节点绘制到屏幕上
async属性：加载和渲染后续文档元素的过程将和 script.js 的加载与执行并行进行（异步）。无顺序
defer：加载后续文档元素的过程将和 script.js 的加载并行进行（异步），但 script.js 的执行要在所有元素解析完成之后，DOMContentLoaded 事件触发之前完成。按顺序
css的垂直水平居中
- 块级元素的水平垂直居中
<style>
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.content{
width: 200px;
height: 200px;
background-color: #f66;
/* 水平居中 */
margin: 0 auto;
position: relative;
top: 50%;
/* margin-top: -100px; */
/* 使得div向上平移自身高度的一半 */
transform: translateY(-50%)
}
</style>
</head>
<body>
<div class="content"></div>
</body>
- 行内元素的水平居中
主要的点是直接设置为 text-align:center
<style>
.parent {
text-align: center;
background-color: #f667
}
.child {
display: inline-block;
background-color: #f66;
}
</style>
</head>
<body>
<div class="parent" >
<div class="child" >demo</div>
</div>
</body>
- Tcp三次握手四次挥手
- http请求方式
- 二分法 代码
- 垂直居中的代码 适合什么环境
