1、如何理解CSS的盒子模型？
标准盒子模型：宽度=内容的宽度（content）+ border + padding
低版本IE盒子模型：宽度=内容宽度（content+border+padding）
2、 BFC？
-
什么是 BFC
BFC（Block Formatting Context）格式化上下文，是 Web 页面中盒模型布局的 CSS 渲染模式，指一个独立的渲染区域或者说是一个隔离的独立容器。
-
形成 BFC 的条件
- 浮动元素，float 除 none 以外的值
- 定位元素，position（absolute，fixed）
- display 为以下其中之一的值 inline-block，table-cell，table-caption
- overflow 除了 visible 以外的值（hidden，auto，scroll）
-
BFC 的特性
- 内部的 Box 会在垂直方向上一个接一个的放置。
- 垂直方向上的距离由 margin 决定
- bfc 的区域不会与 float 的元素区域重叠。
- 计算 bfc 的高度时，浮动元素也参与计算
- bfc 就是页面上的一个独立容器，容器里面的子元素不会影响外面元素。
3、如何清除浮动
不清楚浮动会发生高度塌陷：浮动元素父元素高度自适应（父元素不写高度时，子元素写了浮动后，父元素会发生高度塌陷）
- clear清除浮动（添加空div法）在浮动元素下方添加空div,并给该元素写css样式： {clear:both;height:0;overflow:hidden;}
- 给浮动元素父级设置高度
- 父级同时浮动（需要给父级同级元素添加浮动）
- 父级设置成inline-block，其margin: 0 auto居中方式失效
- 给父级添加overflow:hidden 清除浮动方法
- 万能清除法 after伪类 清浮动（现在主流方法，推荐使用）
.float_div:after{
content:".";
clear:both;
display:block;
height:0;
overflow:hidden;
visibility:hidden;
}
.float_div{
zoom:1
}
4、 用纯CSS创建一个三角形的原理是什么？
5、 css3实现0.5px的细线
6、css实现三栏布局 （左右固定，中间自适应）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.box {
display: flex;
justify-content: center;
height: 200px;
}
.left {
width: 200px;
background-color: red;
height: 100%;
}
.content {
background-color: yellow;
flex: 1;
}
.right {
width: 200px;
background-color: green;
}
</style>
</head>
<body>
<div class="box">
<div class="left"></div>
<div class="content"></div>
<div class="right"></div>
</div>
</body>
</html>
6、让一个div垂直居中
宽度高度已知的 宽度和高度未知 flex布局
7、谈一谈css的伪类和伪元素
1、闭包
2、js中函数执行
3、new一个对象的过程中发生了什么嘛
4、宏任务跟微任务
5、防抖和节流
6、数组的常用方法
7、立即执行函数
8、js原型和原型链
9、js中call,apply,bind方法
10、Promise
11、async/await
12、深拷贝、浅拷贝
13、跨域
14、for in 和 for of
15、如何阻止冒泡？
16、如何阻止默认事件？
17、var,let,const
18、Class
19、Set
20、Map
1、实现一个new操作符
2、实现一个call或 apply
3、实现一个Function.bind
4、实现一个继承
5、手写一个Promise(中高级必考)
6、手写防抖(Debouncing)和节流(Throttling)
7、手写一个JS深拷贝
function deepCopy(obj) {
//判断是否是简单数据类型，
if (typeof obj == "object") {
//复杂数据类型
var result = obj.constructor == Array ? [] : {};
for (let i in obj) {
result[i] = typeof obj[i] == "object" ? deepCopy(obj[i]) : obj[i];
}
} else {
//简单数据类型 直接 == 赋值
var result = obj;
}
return result;
}
1、Vue的双向数据绑定原理是什么？
2、请详细说下你对vue生命周期的理解？
-
beforeCreate 创建前执行（vue实例的挂载元素$el和数据对象data都为undefined，还未初始化）
-
created 完成创建 （完成了data数据初始化，el还未初始化）
-
beforeMount 载入前（vue实例的$el和data都初始化了，但还是挂载之前为虚拟的dom节点，data.message还未替换。）
-
mounted 载入后html已经渲染(vue实例挂载完成，data.message成功渲染。)
-
beforeUpdate 更新前状态（view层的数据变化前，不是data中的数据改变前）
-
updated 更新状态后
-
beforeDestroy 销毁前
-
destroyed 销毁后 （在执行destroy方法后，对data的改变不会再触发周期函数，说明此时vue实例已经解除了事件监听以及和dom的绑定，但是dom结构依然存在）
说一下每一个阶段可以做的事情
-
beforeCreate:可以在这里加一个loading事件，在加载实例时触发。
-
created:初始化完成时的事件写这里，如果这里结束了loading事件，异步请求也在这里调用。
-
mounted:挂在元素，获取到DOM节点
-
updated:对数据进行处理的函数写这里。
-
beforeDestroy:可以写一个确认停止事件的确认框。
3、动态路由定义和获取
在 router 目录下的 index.js 文件中，对 path 属性加上 /:id。
使用 router 对象的 params.id 获取
4、vue-router 有哪几种导航钩子?
三种
- 全局导航钩子（跳转前进行判断拦截）
- router.beforeEach(to, from, next),
- router.beforeResolve(to, from, next),
- router.afterEach(to, from ,next)
2.组件内钩子
- beforeRouteEnter
- beforeRouteUpdate
- beforeRouteLeave
3.单独路由独享组件
- beforeEnter
5、组件之间的传值通信？
父组件向子组件传值：
子组件在props中创建一个属性，用来接收父组件传过来的值；
在父组件中注册子组件；
在子组件标签中添加子组件props中创建的属性；
把需要传给子组件的值赋给该属性
子组件向父组件传值：
子组件中需要以某种方式（如点击事件）的方法来触发一个自定义的事件；
将需要传的值作为$emit的第二个参数，该值将作为实参传给响应事件的方法；
在父组件中注册子组件并在子组件标签上绑定自定义事件的监听。
网友评论