資訊專欄INFORMATION COLUMN
摘要：從上面那段代碼可以看到，下的上外邊距只占了兩個距離的一半，所以兩個的間距是。下面分別對第和第個條件進行了測試。關于這一點，兩個元素的間距是這樣計算的上的下外邊距包裹上的下內邊距下的上外邊距可以看下面這個例子印證第三點。
昨天面了html5前端。
下面是其中3個問題：
雙外邊距疊加。
用原生js怎么實現div選項卡。
如何去實現一個插件。
一、雙外邊距折疊 問題描述一上一下兩個div，上面div的下外邊距是10px，下面div的上外邊距是5px，這兩個div的距離是多少？
解析10px。不是15px。
從上面那段代碼可以看到，下div的上外邊距只占了兩個div距離的一半，所以兩個div的間距是10px。
這里是關于這個問題的一個描述：https://www.zhihu.com/questio...
發生的條件：
兩個或多個。
毗鄰。
垂直方向。
下面分別對第2和第3個條件進行了測試。
與之前不同的是，上div被一個div包裹住了，而包裹它的div設置了下內邊距1px（如果沒有設置還是會發生疊加）。
可以看到，這時候下div的上外邊距占了兩個div間距的三分之一。兩個元素的間距是16px。
關于這一點，兩個元素的間距是這樣計算的：上div的下外邊距+包裹上div的下內邊距+下div的上外邊距
可以看下面這個例子印證：
第三點。
這里用了float屬性實現兩個div水平排布的效果，此時第二個div的左外邊距只占了兩個div間距的三分之一，說明兩個元素的間距是15px，沒有發生疊加。
二、用原生js實現div選項卡 問題描述用原生js實現如上div選項卡。
解析這個問題有很多的解決方案，原生jq等等都可以實現（還有一個我找到時沒看懂的：http://bbs.blueidea.com/threa...，容我暫時看不懂），還可以加上錨點使得打開頁面時就跳轉到固定的選項卡。
但是都不外乎涉及到控制display這個屬性，被選中的選項卡設置‘display：block’，不被選中的則為‘display：none’。
選項卡的實現可以分為兩個：
1.選擇部分
2.展示部分（一般為div）
對應第一張圖就是‘代辦公文’、‘已辦公文’、‘全部公文’這一塊為選擇部分，讓用戶點擊進行選項卡切換。展示部分就是下面的內容。一個選項對應著一個內容（div）。
實現的步驟很簡單:1、獲取所有選項元素和內容元素，存至數組（選項元素的序號與內容元素的序號是一一對應的）。2、給所有的選項元素加上點擊監聽。監聽函數的邏輯是把所有的內容元素的display屬性設為none，然后把被點擊元素的display屬性設為block。
無標題文檔
- 選擇1
- 選擇2
- 選擇3
- 選擇4
內容1內容2內容3內容4
代碼來自：http://www.cnblogs.com/jingan...
三、如何實現插件 問題描述準確一點是用原生js如何實現插件。
再放兩個鏈接：
一步一步實現JS拖拽插件
如何開發原生的 JavaScript 插件(知識點+寫法)
具體的實現方法上面兩個鏈接里都有說明了。
主要兩種方式：
1.直接暴露函數到全局。
2.把函數保存到一個對象當中。
如果把上面的選項卡封裝插件可以這樣：
(function(window) {
function tab(tab_t, tab_t_tag, tab_c, tag_c_tag, evt) {
var tab_t = document.getElementById(tab_t);
var tab_t_li = tab_t.getElementsByTagName(tab_t_tag);
var tab_c = document.getElementById(tab_c);
var tab_c_li = tab_c.getElementsByTagName(tag_c_tag);
var len = tab_t_li.length;
var i = 0;
for(i = 0; i < len; i++) {
tab_t_li[i].index = i;
tab_t_li[i][evt] = function() {
for(i = 0; i < len; i++) {
tab_t_li[i].className = "";
tab_c_li[i].className = "hide";
}
tab_t_li[this.index].className = "act";
tab_c_li[this.index].className = "";
}
}
}
window.tab = tab;
})(window)
引入文件后就可以直接調用tab方法了。
四、寫在后面這幾個問題都非常基礎，雙邊距疊加的問題在css的基礎教程里就有提到。選項卡和插件的實現的問題其實自己之前也都遇到，當時是看明白了，但是沒有好好的總結記錄。另外簡歷如何寫也是面試當中重要的一環。這次準備的太不充分了。
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/82312.html
摘要：技術一面一面主要考察基礎，有些會有技術筆試，比如騰訊，。騰訊的面試官就很喜歡問，安全，瀏覽器緩存方面的問題，計算機基礎，但是要懂為什么。 這篇文章簡單總結下2018年內我的一些前端面試經歷， 在這簡單分享一下，希望對大家有所啟發。 樓主在深圳，畢業兩年。面的主要是深圳的幾家公司。 包括: 騰訊， 螞蟻金服， Lazada， Shopee, 有贊 等 。 樓主在準備面試前， 想著復習一...
摘要：接下來，我主要從三個階段回顧我的秋招，分別是前期中期尾聲。到了這里，我的秋招算是正式的塵埃落定了，簽完三方后，我的秋招結束了。四復盤總結這次的復盤主要是我自己整個秋招的歷程縮影，很多細節無法在一篇文章就說清楚。 ...
摘要：原生環境的安裝原生環境的安裝應該是每個學過都熟悉的，在官網的頁面下載自己想要的版本，然后雙擊打開，一路就好了，推薦使用，具體原因可以上網查一下和版本的對比，我最直觀的感受就是在使用的過程中，因為編碼問題導致的問題明顯減少。 前言 寫這篇文章的起因是因為自學python，最近在面試一個python職位的時候面試官讓我聊一聊我自學python的經歷，然后就像及流水賬似的將自己自學pytho...
閱讀 2162·2023-04-26 00:43
閱讀 2680·2021-11-22 15:22
閱讀 3809·2021-11-11 16:55
閱讀 967·2021-11-04 16:06
閱讀 1783·2019-08-30 14:12
閱讀 994·2019-08-30 14:02
閱讀 3366·2019-08-29 17:05
閱讀 1415·2019-08-29 12:27
