目：谈谈你对CSS盒模型的认识

首先要说出border margin padding content，还要说出标准模型+IE模型。

紧接着，面试官可能要问标准模型和IE模型的区别：宽度和高度的计算不同。

下面给出两张图片来看一下两种模型的高度计算方式

回答出来后，面试官可能继续追问CSS是如何设置这两种模型的：

box-sizing: content-box; // 标准模型

box-sizing: border-box; // IE模型

再继续追问的话就是，JS如何获取对应盒模型的宽和高？

1.dom.style.width/height（仅限于DOM节点的行间样式）

2.dom.currentStyle.width/height（拿到浏览器渲染完成之后即时运行的结果(相对准确)，浏 览器不管是设置的行间样式还是样式表或者style节点，缺点只有IE支持）

3.window.getComputedStyle(dom).width/height（2的兼容方式）

4.dom.getBoundingClientRect().width/height（可拿到浏览器即时运行完之后的准确结果，常用于计算元素相对于视窗左上角的绝对位置，可获取4个结果top left width height）

最后，还有一个题目，可能给一个实例题（根据盒模型解释边距重叠）

题目中子元素高度100px(margin-top: 10px)，距离父元素上边距10px，请给出父元素的高度？

其实这个题你说100px也对，说110px也对，要看父元素盒模型的设置方式。

给父元素设置overflow: hidden;则高度为110px，否则为100px。

那这又是为什么呢？原因在于overflow: hidden；给父元素创建了BFC也就是块级格式化上下文（其实还有一个IFC内联元素的格式化上下文，此处不做介绍）

最后的最后还会有考察的知识点吗？有的，那就是终极拔高的BFC（边距重叠解决方案）

BFC基本概念：块级格式化上下文

BFC原理：

1.BFC区域内垂直方向元素的边距发生重叠

2.BFC的区域不会与浮动元素的box重叠

3.BFC在页面上是一个独立的容器，外面的元素不会影响它里面的元素，反之亦然。

4.计算BFC高度的时候，浮动元素也参与计算

如何创建BFC：

1.float值不为none

2.position的值不是static和relative

3.display属性值和table相关(inline-box table table-cell table-caption)

4.overflow的值不为visible

----------------------------------------------------------------------------------------------

看到这就结束了，各位小伙伴不留下一些意见吗？哈哈哈

题：vue中子组件调用父组件的方法

通过v-on 监听 和$emit触发来实现：

1、在父组件中 通过v-on 监听 当前实例上的 自定义事件。

2、在子组件 中 通过'$emit'触发 当前实例上的 自定义事件。

示例：

父组件：

<template>
	<div class="fatherPageWrap">
 <h1>这是父组件</h1>
 <!-- 引入子组件，v-on监听自定义事件 -->
 <emitChild v-on:emitMethods="fatherMethod"></emitChild>
	</div>
</template>
<script type="text/javascript">
 import emitChild from '@/page/children/emitChild.vue';
	export default{
		data () {
		 return {}
		},
		components : {
 emitChild
		},
		methods : {
		 fatherMethod(params){
 alert(JSON.stringify(params));
 }
		}
	}
</script>

子组件：

<template>
	<div class="childPageWrap">
 <h1>这是子组件</h1>
	</div>
</template>
<script type="text/javascript">
	export default{
		data () {
		 return {}
		},
		mounted () {
 //通过 emit 触发
 this.$emit('emitMethods',{"name" : 123});
		}
	}
</script>

结果：

子组件 会调用 父组件的fatherMethod 方法，该并且会alert 弹出传递过去的参数：{"name":123}。

实际上原生事件是这样的v-on:click="xxxxxxx" ,此处click还可以是keyup等其他原生内置事件。本来的操作是需要手动去点击click或按键盘keyup去触发事件。以上述为例子，现在v-on:emitMethods不需要直接手动了，v-on:xxx的这个xxx动作由$emit去模拟人的手动。因此事件的本质是一样的。又因为xxxx不是原生内置事件（解释一下：原生内置事件就是浏览器内部预先设计好的，我们可以直接用。比如计时器setInterval( )与setTimeout( )就是内置好的方法），所以称之为自定义事件。

父组件与子组件数据流的过程：

简单模式：

多层组件嵌套模式：

先有个印象吧，后续还继续探讨Vue组件,毕竟 数据双向绑定系统和组件系统是Vue的核心内容。理解了组件，对于任何框架的模块化开发，都得心应手。

置相关的结构伪类

:first-child 代表了一组兄弟元素中的第一个元素

:last-child 代表父元素的最后一个子元素。

:nth-child

:nth-child(an+b) 这个 匹配文档树中在其之前具有 an+b-1 个兄弟节点的元素，其中 n 为正值或零值。简单点说就是，这个选择器匹配那些在同系列兄弟节点中的位置与模式 an+b 匹配的元素。

示例：

tr:nth-child(2n+1)

表示HTML表格中的奇数行。

tr:nth-child(odd)

表示HTML表格中的奇数行。

tr:nth-child(2n)

表示HTML表格中的偶数行。

tr:nth-child(even)

表示HTML表格中的偶数行。

span:nth-child(0n+1)

表示子元素中第一个且为span的元素，与 选择器作用相同。

span:nth-child(1)

表示父元素中子元素为第一的并且名字为span的标签被选中

span:nth-child(-n+3)

匹配前三个子元素中的span元素。

示例

3, 5, and 7 are selected, 1没有被选中，因为1不是span，但被计数

Children 1, 5, and 7 are selected.

3因为也是孩子，所以被计数，但没有被选中，因为不是span。

Children 1, 4, 6, and 8 are selected.

3 没有被计数，因为用的CSS是span:nth-of-type 只选择span类型的孩子，而且也只对这一类型进行计数。不是这一类型的孩子直接被忽略掉