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