前端面试系列（7）
一、css盒模型
1、基本概念：
css的盒模型本质是一个盒子，封装周围的HTML元素，包括：外边距、边框、内边距和实际内容。
- Margin（外边距）：边框以外的区域，外边距是透明的
- Border(边框)：围绕在内边距和内容外的边框
- Padding（内边距）：内容与边框之间的区域，内边距是透明的
- Content（内容）：盒子的内容
2、标准盒模型和IE盒模型
区别：标准盒模型和IE盒模型的width和height的计算方式不同
举个栗子：假设设置一个元素宽高各为100px，为了方便观察设置背景色为red，代码如下：
<style>
#div1{
width: 100px;
height: 100px;
background-color: red;
padding: 10px;
}
</style>
</head>
<body>
<div id="div1">盒模型</div>
</body>然后在浏览器审查元素的时候你就会发现，元素的大小并不是自己设置的100px，而是变成了120px。
这是因为在默认情况下的盒模型是标准盒模型，设置的width、heigh仅仅只是内容的宽高，不包含padding、border等；所以在添加了padding之后自然整体宽高都会变大，不是自己之前设置的了。
- 标准盒模型的定义的width指的是content-width，
- IE盒模型定义的width指 border+padding+content-width
设置：
- 标准模型（默认）box-sizing：content-box
- IE盒模型 box-sizing：border-box
二、link和@import的区别
1、首先来说一下link和@import是用来干什么的，在HTML中引入css的方式有四种：
内联方式：直接在HTML标签中style属性中添加css样式
<div style="background: red"></div>嵌入方式：在HTML头部中的style标签中写下css代码
<head>
<style>
.content {background: red;}
</style>
</head>链接方式：在HTML头部的<head>标签中引入外部css文件
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>导入方式：是指使用css规则引入外部css文件
<style>
@import url(style.css);
</style>所以link和@import是将css引入HTML中的方式，虽然都是css引入方式，但是可能对大家而言link比较熟悉，使用的次数比较多，相比之下@import就很少被使用。为什么都是导入方式大家都喜欢用link，而不是@import，这就要看一下他两之间的区别了。
2、区别：
- 加载方式不同，link可以在页面载入的同时进行加载，而@import只能在页面加载完成之后才能进行加载。
- link属于HTML，不存在兼容问题，@import是css2.1才提出的概念，所以浏览器版本较低时可能就无法正确导入外部样式文件。
- @import是css提供的语法规则，只有导入样式表的作用，而link属于html，不仅可以导入样式表，还可以定义rel等属性。
- link支持使用JavaScript来改变DOM样式，@import不支持
三、绑定事件的三种方式
1、DOM元素直接绑定，简单来说就是在html标签中绑定事件的话，需要在js中写上事件处理的程序，然后在html中使用同名的html特性来调用。
<button type="button" onclick="messageShow()">clickme</button>
<script>
function messageShow(){
alert("Yes");
}
</script>2、在js中绑定事件，这是我们最常用的一种绑定事件的方式，先获取到html元素，再在js里绑定事件
<button type="button">clickMe</button><script>
var oBtn=document.getElementsByTagName("button")[0];
oBtn.onclick=function(){
alert('Yes1');
}
</script> 3、使用事件监听绑定事件
<button type="button">clickMe</button>
<script>
var oBtn=document.getElementsByTagName("button")[0]; // 给元素绑定事件监听函数 oBtn.addEventListener('click',function(){
alert(this.type);
},false)
var Show=function(){
alert('OK!');
};
</script>需要注意的是使用事件监听绑定事件时，有三个参数，addEventListener（事件名，事件处理程序，布尔值），最后一个参数是布尔值，如果是true，表示在捕获阶段调用事件处理程序，如果是false，表示在冒泡阶段调用事件处理程序，一般都是false。
四、typeof和instance的区别
- 基本数据类型：number、string、Boolean、undefined、null
- 引用数据类型：object
1、typeof
typeof可以检测给定变量的数据类型，返回值为一个字符串，可能是number、boolean、string、function、undefined、object。
console.log(typeof(Array)); //"function"
console.log(typeof(Object)); //"function"
console.log(typeof(null)); //"Object"要注意以上三种情况，Array和Object的数据类型是function，因为Array本身就是js内部创建的构造函数。null是指空对象，所以输出来为Object类型。
typeof一般用来判断一个变量是否存在：
if(typeof(a)!="undefined"){
console.log("ok");
}如果存在的话返回ok。
2、instanceof
instanceof的作用是判断一个变量是否是某一个对象的实例，A instanceof B（判断A是否是B的实例，是的话返回true，不是的话返回去false）。
var a=new Array;
console.log(a instanceof Array); //"true"
console.log(Array instanceof Function); //"true"
console.log(Object instanceof Function);//"true"
console.log(a instanceof Function);//"true"上面的例子也证明了typeof的输出结果，Array和Object是Function的实例，所以检测出来Array和Object的数据类型为function。
因为Array是function的实例，而a又是Array的实例，所以a就是Function的实例，a instanceof Function会返回一个true。
五、src和herf的区别
- src是将指定资源嵌套进当前文档
- herf是在当前文档和指定资源之间开辟了一条通道
六、从输入一个url开始，到页面加载完成，都会发生哪些操作？
1、DNS解析
DNS（域名解析）实现了网址到IP地址的转换，通过主机名，获取到与主机名相对应的ip地址。其实就是一个递归查询到过程，从本地域名->根域名->顶级域名，比如com->google.com->www.google.com
2、TCP连接（三握四挥）
- 发送http请求
- 发送http请求就是构建http请求报文，并通过TCP协议发送到服务器的指定端口（http是8080，https包括443/tcp 443/udp）。
- http请求报文一般包括请求方式、请求报头、请求正文
- 请求行：
Method Request-URL HTTP-Version
请求方法 请求URL HTTP版本
常用的方法有: GET, POST, PUT, DELETE, OPTIONS, HEAD。
2.服务器响应请求并返回http报文
- http响应报文由三部分组成：状态码、响应报头、响应报文
- 状态码：
1××：指示信息-表示请求已接收，继续处理
2××：成功-表示请求已经成功接收、理解、接受
3××：重定向-表示要完成请求必须进行更近一步的操作
4××：客户端错误-请求有语法错误或者请求无法实现
5××：服务器错误-服务器无法完成合法的请求
3、浏览器解析并渲染页面
- 解析html文档，构建DOM树。
- 下载css文件，开始构建css树。
- css树构建完成之后，和DOM树一起构成渲染树。
- 布局：计算出每个节点在页面中的位置。
- 显示，通过显卡显示页面
DOM树和渲染树的区别：
- DOM树与HTML标签一一对应，包括head和隐藏的节点
- 渲染树不包括head和隐藏的元素，并且每个节点都有与之对应的css样式。
重绘和重排（这个也需要划重点）：
- 当页面中的元素样式发生变化时（颜色等），不影响节点的布局时，会引起浏览器的重绘
- 当页面中的DOM元素的位置，尺寸等影响布局的样式发生变化时，会引起浏览器的重排
- 重排一定会引发重绘
- 但是重绘不一定能引起重排
在任何时代，
教育说起来都是一件高大上的事，
但却没有什么真正有价值的东西是教得会的，
没有任何一种文化模因
可以说清楚一个个体的全部问题。
在任何时代，
想要抓住人性的弱点来赚钱都非常容易，
没有一点高级。
相反，想要建设一种文化，
耐心地拆除信息壁垒，
并且能够坚持下来，
那真不是一般的不易。
在任何时代，
在一秒钟内看到本质的人，
和花半辈子看不清的人，
自然是不一样的命运。
每一天，你将受到才哥的理论，结合历史、政治、文化、艺术、商业故事，令人防不胜防的高纯度无死角知识轰炸。以及，不间断的私藏书籍、电影推荐。
有时候，某件事虽记不清楚，但总感觉这样的事在很久很久以前发生过...
有时候，某个人虽从未见过，但总感觉面前的人在另一个时空里曾遇见...
那时候相忘于江湖的事，或许穿越了时光，有了新的世界
那时候不远万里追寻的梦，也许穿行过人海，也有了新的意义
而对于我们来说，那个惦念的江湖，那个执着的梦，其核心都是在偌大的世界里，寻找到更真实更好的自己！
知道你会来
所以我一直在这里等
岁月不饶人，我亦未曾绕过岁月
最后，大家有什么想要吐槽的，就在留言区说出你的想法。