第一次记录
一、CSS部分
1、实现布局样式
实现如下图所示样式，该题考察了CSS的flex布局，以及样式选择器。要求外面盒子宽度为400px，盒子内边距为20px，同时盒子内的小盒子数量不等，瀑布流效果，数量变多则对应高度变高。
代码实现：
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.out{
width: 358px;
border: 1px solid red;
display: flex;
flex-wrap: wrap;
padding: 20px;
justify-content: space-between;
}
.inner-box {
width: 100px;
height: 50px;
background-color: red;
}
.inner-box:not(:nth-child(-n + 3)) {
margin-top: 10px;
}
</style>
</head>
<body>
<div class="out">
<div class="inner-box"></div>
<div class="inner-box"></div>
<div class="inner-box"></div>
<div class="inner-box"></div>
<div class="inner-box"></div>
<div class="inner-box"></div>
<div class="inner-box"></div>
<div class="inner-box"></div>
<div class="inner-box"></div>
<div class="inner-box"></div>
<div class="inner-box"></div>
</div>
</body>
</html>2、浏览器中的大小单位
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body {
font-size: 20px;
}
.contain{
font-size: 3rem;
}
.title{
font-size: 2em;
}
.article {
font-size: 3rem;
}
</style>
</head>
<body>
<div class="contain">
<div class="title">标题</div>
<div class="article">内容</div>
</div>
</body>
</html>3、position的值以及作用
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box1 {
left: 20px;
top: 20px;
position: relative;
}
.box2 {
left: 20px;
top: 20px;
position: absolute;
}
.box3{
left: 20px;
top: 20px;
position: absolute;
}
.box4 {
left: 20px;
right: 20px;
position: fixed;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2">
<div class="box3"></div>
</div>
<div class="box4"></div>
</div>
</body>
</html>4、吸顶效果怎么实现
二、JS部分
1、JS中数据类型
2、引用数类型以及基础数据类型有哪些以及分类
3、一个方法实现判断输入数据的数据类型
4、浏览器的存储方式有哪些，有什么区别
5、事件循环
什么是事件循环，如下例子的输出顺序是什么
javascript
async1()
setTimeout(() => {
new Promise((resolve, reject) => {
console.log(2);
resolve()
}).then(() => {
console.log(3);
})
}, 10)
new Promise((resolve, reject) => {
console.log(4);
resolve()
}).then(() => {
console.log(5);
})
async function async1() {
console.log(1);
await async2()
console.log(7)
}
async function async2() {
console.log(6);
}
setTimeout(() => {
new Promise((resolve, reject) => {
console.log(8);
resolve()
}).then(() => {
console.log(9);
})
})
console.log(10)