1.style标签在上面和下面的区别

• style标签在HTML文档中的位置，实际上会影响页面的加载和显示效果。
• 放在下面会导致页面先加载html，加载完成后加载css。
• 如果在HTML文档中将style标签放在body标签后面，会导致浏览器在解析到尾部样式表（外联或写在style标签）时停止之前的渲染，等待加载且解析样式表完成后重新渲染。这可能会导致FOUC（Flash of Unstyled Content，即样式失效导致页面闪烁问题）等现象。
• 推荐将style标签放在HTML文档的head部分。这样可以让浏览器在解析HTML文档时，同时加载并解析样式表，从而避免上述的问题。对于link元素，标准则允许其出现在body元素中，因为它可以用于引用外部样式表资源，实现故意设计的异步加载。

2.css中flex属性是由哪几个属性集合的

flex属性是flex-grow、flex-shrink和flex-basis三属性的简写总和。

• flex-grow：定义了当flex容器有多余空间时，item是否放大。默认值为0，即当有多余空间时也不放大；可能的值为整数，表示不同item的放大比例。
• flex-shrink：定义了当容器空间不足时，item是否缩小。默认值为1，表示当空间不足时，item自动缩小，其可能的值为整数，表示不同item的缩小比例。
• flex-basis：表示项目在主轴上占据的空间，默认值为auto。

3.visibility:hidden和display:none的区别

• 作用不同:

visibility:hidden将元素隐藏，但是在网页中该占的位置还是占着。

display:none将元素的显示设为无，即在网页中不占任何的位置。

• 使用后HTML元素有所不同:

visibility:hidden，使用该属性后，HTML元素（对象）仅仅是在视觉上看不见（完全透明），而它所占据的空间位置仍然存在，也即是说它仍具有高度、宽度等属性值。

display:none，使用该属性后，HTML元素（对象）的宽度、高度等各种属性值都将“丢失”。

• 定义不同:

visibility属性指定一个元素是否是可见的。

display这个属性用于定义建立布局时元素生成的显示框类型。

4.vue在created钩子函数操作DOM

Vue.nextTick() 或者 计时器

5.重排和重绘

• 重排：页面的结构发生变化，引起页面重排

• 重绘：页面的元素属性发生变化，引起页面重绘

• 重绘不一定引起重排，重排肯定会引起重绘

6.css :empty

当一个元素没有任何子集和文本内容时生效