目：談談你對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類型的孩子，而且也只對這一類型進行計數。不是這一類型的孩子直接被忽略掉