【20220414】
1.对于盒子模型有什么了解
在W3C标准的盒模型中一个盒子的宽度是：margin(左右外边距)+padding(左右内边距)+border(左右边框)+内容的(width) 而在IE盒模型中：一个快的宽度=内容的(width)+margin(左右)（这里的内容width包含了padding(左右内边距)+border(左右边框)）。
2.box-sizing有什么属性
当设置box-sizing:content-box时，采用标准模式进行计算，默认就是这种模式；
当设置box-sizing:border-box时，采用怪异模式进行计算
3.对BFC了解吗？
块级格式化上下文：是普通流。相当于一块独立的渲染区域，容器内的元素不会影响容器外的元素。
可以用以下条件触发BFC
·body根元素
·设置浮动，不包括none
·设置定位，absoulte或者fixed
·行内块显示模式，inline-block
·设置overflow，即hidden，auto，scroll
·表格单元格，table-cell
·弹性布局，flex
（1）作用
- 可以避免外边距重叠
- 清除浮动
- 阻止元素被浮动元素覆盖
4.两栏布局的方法？如果左边折叠，右边怎么撑满宽度？
（1）左浮动，右固定：左边浮动，右边利用margin - left将右边的盒子顶出去，自适应添加了剪切效果。
（2）弹性盒子：利用flex进行两栏布局时，我们要知道flex-shrink 、flex-grow、flex-basis的用法。flex-basis是前两个元素的基础。这里的overflow添加了滑动块属性。
（3）position：absolute：父级元素设置相对定位，左边元素设置绝对定位，宽度固定右边，基于左边的宽度加一个间距。和float有些类似。和float一样，右边无限小时会被隐藏
（6）float+BFC方法：左边浮动，右边和字通过overflow形成了BFC，右侧盒子不会与浮动的元素重叠，自适应是因为右侧的盒子是块元素，会掉落到下一行
5.浮动元素会和BFC重叠吗？
不会
6.margin边距重叠怎么避免？
BFC
7.定位元素有几种？相对定位和绝对定位有什么区别？
position的属性值共有四个常用的：static、relative、absolute、fixed。
Static
所有元素在默认的情况下position属性均为static，而我们在布局上经常会用到的相对定位和绝对定位常用的属性top、bottom、left、right或者 z-index
声明在position为static的情况下无效。其用法为：在改变了元素的position属性后可以将元素重置为static让其回归到页面默认的文档流中。
Fixed
在很长的时间里，这个属性值因为兼容性问题，并没有得到非常广泛的应用（IE6未实现该属性值）。fixed和absolute有很多共同点：
1.会改变行内元素的呈现模式，使display之变更为block。
2.会让元素脱离文档流，不占据空间。
3.默认会覆盖到非定位元素上。
fixed与absolute最大的区别在于：absolute的”根元素“是可以被设置的，而fixed则其”根元素“固定为浏览器窗口。即当你滚动网页，其元素与浏览器窗口之间的距离是恒定不变的。
区别：
一、主体不同
1、相对定位：是设置为相对定位的元素框会偏移某个距离。
2、绝对定位：absolute 脱离文档流，通过 top,bottom,left,right 定位。
二、特点不同
1、相对定位：在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它框。
2、绝对定位：选取其最近的父级定位元素，当父级 position 为 static 时，absolute元素将以body坐标原点进行定位，可以通过z-index进行层次分级。
8.css选择器和优先级？
总结排序：!important > 行内样式 > ID选择器 > 类选择器 > 元素 > 通配符 > 继承 > 浏览器默认属性
9.vue生命周期？
10.一般数据加载在哪个周期？
看实际情况，一般在 created（或beforeRouter） 里面就可以，如果涉及到需要页面加载完成之后的话就用 mounted。
在created的时候，视图中的html并没有渲染出来，所以此时如果直接去操作html的dom节点，一定找不到相关的元素 而在mounted中，由于此时html已经渲染出来了，所以可以直接操作dom节点，（此时document.getelementById 即可生效了）。
11.created和mounted区别
created:在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图。
mounted:在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作。
11.父子组件加载顺序
1、父子组件的加载顺序为
父beforeCreated ->父created ->父beforeMounted ->子beforeCreated ->子created ->子beforeMounted ->子mounted -> 父mounted
2、父组件更新顺序为
父beforeUpdate->父updated
3、子组件更新顺序为
父beforeUpdate->子beforeUpdate->子updated->父updated
4、父子组件销毁顺序为
父beforeDestroy->子beforeDestroy->子destroyed->父destroyed
12.watch和computed的区别及用法
computed 计算属性说明:
computed 是基于响应性依赖来进行缓存的。只有依赖数据发生改变，才会重新进行计算（当触发重新渲染，若依赖数据没有改变，则 computed 不会重新计算）。若没改变，计算属性会立即返回之前缓存的计算结果。
不支持异步，当 computed 内有异步操作时无效，无法监听数据的变化的值。
computed 中的成员可以只定义一个函数作为只读属性, 也可以定义成 get/set 变成可读写属性
如果一个属性是由其他属性计算而来的，这个属性依赖其他属性，是一个多对一或者一对一，一般用 computed。
下面的计算属性将不再更新，因为 Date.now() 不是响应式依赖：
| 12345 | computed: {`` `` now: ``function () {`` ``return Date.now()`` ``}``} |
|---|
相比之下，每当触发重新渲染时，调用方法将总会再次执行函数。
我们为什么需要缓存？假设我们有一个性能开销比较大的计算属性 A，它需要遍历一个巨大的数组并做大量的计算。然后我们可能有其他的计算属性依赖于 A。如果没有缓存，我们将不可避免的多次执行 A 的 getter！如果你不希望有缓存，请用方法来替代。
watch 监听属性说明：
不支持缓存，数据变或者触发重新渲染时，直接会触发相应的操作。
watch 支持异步
当一个属性发生变化时，需要执行对应的操作；一对多时，一般用 watch。
监听数据必须是 data 中声明过或者父组件传递过来的 props 中的数据，当数据变化时，触发其他操作，函数有两个参数，immediate：组件加载立即触发回调函数执行，deep: 深度监听，为了发现对象内部值的变化，复杂类型的数据时使用，例如数组中的对象内容的改变，注意监听数组的变动不需要这么做。注意：deep 无法监听到数组的变动和对象的新增，参考 vue 数组变异,只有以响应式的方式触发才会被监听到。
watch 和 computed 的区别是：
相同点：
两者都是观察页面数据变化的。
不同点：
- computed 只有当依赖的数据变化时才会计算, 会缓存数据。
- watch 每次都需要执行函数。watch 更适用于数据变化时的异步操作。
