成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

前端面試復(fù)盤

hufeng / 589人閱讀

摘要：從上面那段代碼可以看到，下的上外邊距只占了兩個距離的一半，所以兩個的間距是。下面分別對第和第個條件進行了測試。關(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。





無標(biāo)題文檔








  
    
    
  • 選擇1
    • 
    
  • 選擇2
    • 
    
  • 選擇3
    • 
    
  • 選擇4
    • 
  

  

    
內(nèi)容1

    
內(nèi)容2

    
內(nèi)容3

    
內(nèi)容4

代碼來自：http://www.cnblogs.com/jingan...

三、如何實現(xiàn)插件 問題描述

準(zhǔn)確一點是用原生js如何實現(xiàn)插件。
再放兩個鏈接：
一步一步實現(xiàn)JS拖拽插件
如何開發(fā)原生的 JavaScript 插件(知識點+寫法)

解析

具體的實現(xiàn)方法上面兩個鏈接里都有說明了。
主要兩種方式：
1.直接暴露函數(shù)到全局。
2.把函數(shù)保存到一個對象當(dāng)中。

如果把上面的選項卡封裝插件可以這樣：

            (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)的問題其實自己之前也都遇到，當(dāng)時是看明白了，但是沒有好好的總結(jié)記錄。另外簡歷如何寫也是面試當(dāng)中重要的一環(huán)。這次準(zhǔn)備的太不充分了。

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/50635.html

相關(guān)文章

  • 2018年, 我的前端面試復(fù)盤

    摘要：技術(shù)一面一面主要考察基礎(chǔ)，有些會有技術(shù)筆試，比如騰訊，。騰訊的面試官就很喜歡問，安全，瀏覽器緩存方面的問題，計算機基礎(chǔ)，但是要懂為什么。 這篇文章簡單總結(jié)下2018年內(nèi)我的一些前端面試經(jīng)歷， 在這簡單分享一下，希望對大家有所啟發(fā)。 樓主在深圳，畢業(yè)兩年。面的主要是深圳的幾家公司。 包括: 騰訊， 螞蟻金服， Lazada， Shopee, 有贊 等 。 樓主在準(zhǔn)備面試前， 想著復(fù)習(xí)一...

    Yujiaao 評論0 收藏0

  • 前端面試復(fù)盤

    摘要：從上面那段代碼可以看到，下的上外邊距只占了兩個距離的一半，所以兩個的間距是。下面分別對第和第個條件進行了測試。關(guān)于這一點，兩個元素的間距是這樣計算的上的下外邊距包裹上的下內(nèi)邊距下的上外邊距可以看下面這個例子印證第三點。 昨天面了html5前端。下面是其中3個問題： 雙外邊距疊加。 用原生js怎么實現(xiàn)div選項卡。 如何去實現(xiàn)一個插件。 一、雙外邊距折疊 問題描述 一上一下兩個di...

    Jason 評論0 收藏0

  • 前端面試復(fù)盤

    摘要：從上面那段代碼可以看到，下的上外邊距只占了兩個距離的一半，所以兩個的間距是。下面分別對第和第個條件進行了測試。關(guān)于這一點，兩個元素的間距是這樣計算的上的下外邊距包裹上的下內(nèi)邊距下的上外邊距可以看下面這個例子印證第三點。 昨天面了html5前端。下面是其中3個問題： 雙外邊距疊加。 用原生js怎么實現(xiàn)div選項卡。 如何去實現(xiàn)一個插件。 一、雙外邊距折疊 問題描述 一上一下兩個di...

    tomener 評論0 收藏0

  • 我的秋招復(fù)盤——回顧2022秋招經(jīng)歷

    摘要：接下來，我主要從三個階段回顧我的秋招，分別是前期中期尾聲。到了這里，我的秋招算是正式的塵埃落定了，簽完三方后，我的秋招結(jié)束了。四復(fù)盤總結(jié)這次的復(fù)盤主要是我自己整個秋招的歷程縮影，很多細(xì)節(jié)無法在一篇文章就說清楚。 ...

    longshengwang 評論0 收藏0

  • python復(fù)盤之windows環(huán)境的安裝

    摘要：原生環(huán)境的安裝原生環(huán)境的安裝應(yīng)該是每個學(xué)過都熟悉的，在官網(wǎng)的頁面下載自己想要的版本，然后雙擊打開，一路就好了，推薦使用，具體原因可以上網(wǎng)查一下和版本的對比，我最直觀的感受就是在使用的過程中，因為編碼問題導(dǎo)致的問題明顯減少。 前言 寫這篇文章的起因是因為自學(xué)python，最近在面試一個python職位的時候面試官讓我聊一聊我自學(xué)python的經(jīng)歷，然后就像及流水賬似的將自己自學(xué)pytho...

    Miracle 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<