整合營銷服務商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
目：談談你對CSS盒模型的認識
首先要說出border margin padding content，還要說出標準模型+IE模型。
緊接著，面試官可能要問標準模型和IE模型的區(qū)別：寬度和高度的計算不同。
下面給出兩張圖片來看一下兩種模型的高度計算方式
回答出來后，面試官可能繼續(xù)追問CSS是如何設(shè)置這兩種模型的：
box-sizing: content-box; // 標準模型
box-sizing: border-box; // IE模型
再繼續(xù)追問的話就是，JS如何獲取對應盒模型的寬和高？
1.dom.style.width/height（僅限于DOM節(jié)點的行間樣式）
2.dom.currentStyle.width/height（拿到瀏覽器渲染完成之后即時運行的結(jié)果(相對準確)，瀏 覽器不管是設(shè)置的行間樣式還是樣式表或者style節(jié)點，缺點只有IE支持）
3.window.getComputedStyle(dom).width/height（2的兼容方式）
4.dom.getBoundingClientRect().width/height（可拿到瀏覽器即時運行完之后的準確結(jié)果，常用于計算元素相對于視窗左上角的絕對位置，可獲取4個結(jié)果top left width height）
最后，還有一個題目，可能給一個實例題（根據(jù)盒模型解釋邊距重疊）
題目中子元素高度100px(margin-top: 10px)，距離父元素上邊距10px，請給出父元素的高度？
其實這個題你說100px也對，說110px也對，要看父元素盒模型的設(shè)置方式。
給父元素設(shè)置overflow: hidden;則高度為110px，否則為100px。
那這又是為什么呢？原因在于overflow: hidden；給父元素創(chuàng)建了BFC也就是塊級格式化上下文（其實還有一個IFC內(nèi)聯(lián)元素的格式化上下文，此處不做介紹）
最后的最后還會有考察的知識點嗎？有的，那就是終極拔高的BFC（邊距重疊解決方案）
BFC基本概念：塊級格式化上下文
BFC原理：
1.BFC區(qū)域內(nèi)垂直方向元素的邊距發(fā)生重疊
2.BFC的區(qū)域不會與浮動元素的box重疊
3.BFC在頁面上是一個獨立的容器，外面的元素不會影響它里面的元素，反之亦然。
4.計算BFC高度的時候，浮動元素也參與計算
如何創(chuàng)建BFC：
1.float值不為none
2.position的值不是static和relative
3.display屬性值和table相關(guān)(inline-box table table-cell table-caption)
4.overflow的值不為visible
----------------------------------------------------------------------------------------------
看到這就結(jié)束了，各位小伙伴不留下一些意見嗎？哈哈哈
通過v-on 監(jiān)聽 和$emit觸發(fā)來實現(xiàn)：
1、在父組件中 通過v-on 監(jiān)聽 當前實例上的 自定義事件。
2、在子組件 中 通過'$emit'觸發(fā) 當前實例上的 自定義事件。
示例：
父組件：
<template>
<div class="fatherPageWrap">
<h1>這是父組件</h1>
<!-- 引入子組件，v-on監(jiān)聽自定義事件 -->
<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 觸發(fā)
this.$emit('emitMethods',{"name" : 123});
}
}
</script>
結(jié)果：
子組件 會調(diào)用 父組件的fatherMethod 方法，該并且會alert 彈出傳遞過去的參數(shù)：{"name":123}。
實際上原生事件是這樣的v-on:click="xxxxxxx" ,此處click還可以是keyup等其他原生內(nèi)置事件。本來的操作是需要手動去點擊click或按鍵盤keyup去觸發(fā)事件。以上述為例子，現(xiàn)在v-on:emitMethods不需要直接手動了，v-on:xxx的這個xxx動作由$emit去模擬人的手動。因此事件的本質(zhì)是一樣的。又因為xxxx不是原生內(nèi)置事件（解釋一下：原生內(nèi)置事件就是瀏覽器內(nèi)部預先設(shè)計好的，我們可以直接用。比如計時器setInterval( )與setTimeout( )就是內(nèi)置好的方法），所以稱之為自定義事件。
簡單模式：
多層組件嵌套模式：
先有個印象吧，后續(xù)還繼續(xù)探討Vue組件,畢竟 數(shù)據(jù)雙向綁定系統(tǒng)和組件系統(tǒng)是Vue的核心內(nèi)容。理解了組件，對于任何框架的模塊化開發(fā)，都得心應手。
span:first-child{ background:lime; } li{ color:red; } li:first-child,li:last-child{ color:green; } //////////////////////////////////////////////////////////////////////////////// <span>This span is limed</span> <span>This span is not :first-child</span> <ul> <li>List 1</li> <li>List 2</li> <li>List 3</li> <li>List 4</li> <li>List 5</li> <li>List 6</li> </ul> |
:nth-child(an+b) 這個 匹配文檔樹中在其之前具有 an+b-1 個兄弟節(jié)點的元素，其中 n 為正值或零值。簡單點說就是，這個選擇器匹配那些在同系列兄弟節(jié)點中的位置與模式 an+b 匹配的元素。
示例：
tr:nth-child(2n+1)
表示HTML表格中的奇數(shù)行。
tr:nth-child(odd)
表示HTML表格中的奇數(shù)行。
tr:nth-child(2n)
表示HTML表格中的偶數(shù)行。
tr:nth-child(even)
表示HTML表格中的偶數(shù)行。
span:nth-child(0n+1)
表示子元素中第一個且為span的元素，與 選擇器作用相同。
span:nth-child(1)
表示父元素中子元素為第一的并且名字為span的標簽被選中
span:nth-child(-n+3)
匹配前三個子元素中的span元素。
示例
.first span:nth-child(2n+1), .second span:nth-child(2n+1), .third span:nth-of-type(2n+1) { background-color: lime; } <div> <a href="#">THIS IS a </a> <span>This span is selected!</span> <span>This span is not. :(</span> <span>What about this?</span> <span>And this one?</span> <span>Another example</span> <span>Yet another example</span> <span>Aaaaand another</span> </div> |
3, 5, and 7 are selected, 1沒有被選中，因為1不是span，但被計數(shù)
<div> <span>This span is selected!</span> <span>This span is not. :(</span> <em>This one is an em.</em> <span>What about this?</span> <span>And this one?</span> <span>Another example</span> <span>Yet another example</span> <span>Aaaaand another</span> </div> |
Children 1, 5, and 7 are selected.
3因為也是孩子，所以被計數(shù)，但沒有被選中，因為不是span。
<div> <span>This span is selected!</span> <span>This span is not. :(</span> <em>This one is an em.</em> <span>What about this?</span> <span>And this one?</span> <span>Another example</span> <span>Yet another example</span> <span>Aaaaand another</span> </div> .third span:nth-of-type(2n+1) { background-color: lime; } |
Children 1, 4, 6, and 8 are selected.
3 沒有被計數(shù)，因為用的CSS是span:nth-of-type 只選擇span類型的孩子，而且也只對這一類型進行計數(shù)。不是這一類型的孩子直接被忽略掉
*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
