一省：HTML
8. link和@import的区别？
区别：
- link是xhtml标签，无兼容性问题，而@import是css2.1提出，低版本浏览器不支持。
- link标签和页面同时加载，而@import等到页面加载完成后加载。
- link标签除了css文件外，还可以引入其他资源文件，而@import只能引入css。
- link标签的权重大于@import的权重。
二省： CSS
8. css塌陷是怎么产生的？怎么解决塌陷？
css塌陷一般分为高度塌陷和外边距塌陷两种。
- 高度塌陷：原因是父元素没有设置高度，子元素设置浮动属性之后，父元素的高度为0。如下：
<html lang="en"> <head> <style> body { background: gray; } .father { background: blue; } .son { width: 200px; height: 200px; background: tomato; float: left; } </style> </head> <body> <div class="father"> <div class="son"></div> </div> </body> </html>
高度塌陷解决方式：
- 给父元素设置高度
- 触发BFC(见上篇触发BFC方式)
- 给父元素加一个有高度且没有浮动的子元素
- 使用伪元素清除浮动，如下：
.father::after { content: ''; display: block; clear: both; }
- 外边距塌陷：外边距塌陷分为相邻元素塌陷和嵌套盒子塌陷。相邻元素塌陷如下：
<html lang="en"> <head> <style> body { background: gray; } .son { width: 200px; height: 200px; background: tomato; margin-bottom: 20px; } .brother { width: 200px; height: 200px; margin-top: 50px; background: skyblue; } </style> </head> <body> <div class="father"> <div class="son"></div> <div class="brother"></div> </div> </body> </html>
效果是外边距合并并且以较大的为主。
相邻元素塌陷解决方式：
- 只给一个盒子设置margin
- 用padding代替margin实现效果
- 把其中一个盒子设置为行内块元素
嵌套盒子塌陷如下：
<html lang="en">
<head>
<style>
body {
background: gray;
}
.father {
background: blue;
}
.son {
width: 200px;
height: 200px;
background: tomato;
margin-top: 50px;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
</html>
嵌套盒子塌陷解决方式：
- 触发BFC
三省：JavaScript
8. var、let、const有什么区别？
var、let、const都可以声明变量，var声明的范围是函数作用域，let和const声明的范围是块级作用域。let和const声明的变量不能在声明之前使用，因为它们有暂时性死区，而var可以。for循环时推荐使用let，因为var会导致迭代变量渗透到循环体外部，从而引发问题。
| 关键字 | 变量提升 | 重复声明 | 重复赋值 | 块级作用域 | 要初始化值
| -- | --- | --- | --- | --- | --- |
| var | ✅ | ✅ | ✅ | ❎ | ❎ |
| let | ❎ | ❎ | ✅ | ✅ | ❎ |
| const | ❎ | ❎ | ❎ | ✅ | ✅ |
