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

資訊專欄INFORMATION COLUMN

前端面試復(fù)盤

Jason / 2758人閱讀

摘要：從上面那段代碼可以看到，下的上外邊距只占了兩個(gè)距離的一半，所以兩個(gè)的間距是。下面分別對(duì)第和第個(gè)條件進(jìn)行了測(cè)試。關(guān)于這一點(diǎn)，兩個(gè)元素的間距是這樣計(jì)算的上的下外邊距包裹上的下內(nèi)邊距下的上外邊距可以看下面這個(gè)例子印證第三點(diǎn)。

昨天面了html5前端。
下面是其中3個(gè)問(wèn)題：

雙外邊距疊加。

用原生js怎么實(shí)現(xiàn)div選項(xiàng)卡。

如何去實(shí)現(xiàn)一個(gè)插件。

一、雙外邊距折疊 問(wèn)題描述

一上一下兩個(gè)div，上面div的下外邊距是10px，下面div的上外邊距是5px，這兩個(gè)div的距離是多少？

解析

10px。不是15px。

從上面那段代碼可以看到，下div的上外邊距只占了兩個(gè)div距離的一半，所以兩個(gè)div的間距是10px。

這里是關(guān)于這個(gè)問(wèn)題的一個(gè)描述：https://www.zhihu.com/questio...

發(fā)生的條件：

兩個(gè)或多個(gè)。

毗鄰。

垂直方向。

下面分別對(duì)第2和第3個(gè)條件進(jìn)行了測(cè)試。

與之前不同的是，上div被一個(gè)div包裹住了，而包裹它的div設(shè)置了下內(nèi)邊距1px（如果沒(méi)有設(shè)置還是會(huì)發(fā)生疊加）。
可以看到，這時(shí)候下div的上外邊距占了兩個(gè)div間距的三分之一。兩個(gè)元素的間距是16px。

關(guān)于這一點(diǎn)，兩個(gè)元素的間距是這樣計(jì)算的：上div的下外邊距+包裹上div的下內(nèi)邊距+下div的上外邊距

可以看下面這個(gè)例子印證：

第三點(diǎn)。

這里用了float屬性實(shí)現(xiàn)兩個(gè)div水平排布的效果，此時(shí)第二個(gè)div的左外邊距只占了兩個(gè)div間距的三分之一，說(shuō)明兩個(gè)元素的間距是15px，沒(méi)有發(fā)生疊加。

二、用原生js實(shí)現(xiàn)div選項(xiàng)卡 問(wèn)題描述

用原生js實(shí)現(xiàn)如上div選項(xiàng)卡。

解析

這個(gè)問(wèn)題有很多的解決方案，原生jq等等都可以實(shí)現(xiàn)（還有一個(gè)我找到時(shí)沒(méi)看懂的：http://bbs.blueidea.com/threa...，容我暫時(shí)看不懂），還可以加上錨點(diǎn)使得打開(kāi)頁(yè)面時(shí)就跳轉(zhuǎn)到固定的選項(xiàng)卡。
但是都不外乎涉及到控制display這個(gè)屬性，被選中的選項(xiàng)卡設(shè)置‘display：block’，不被選中的則為‘display：none’。
選項(xiàng)卡的實(shí)現(xiàn)可以分為兩個(gè)：
1.選擇部分
2.展示部分（一般為div）

對(duì)應(yīng)第一張圖就是‘代辦公文’、‘已辦公文’、‘全部公文’這一塊為選擇部分，讓用戶點(diǎn)擊進(jìn)行選項(xiàng)卡切換。展示部分就是下面的內(nèi)容。一個(gè)選項(xiàng)對(duì)應(yīng)著一個(gè)內(nèi)容（div）。

實(shí)現(xiàn)的步驟很簡(jiǎn)單:1、獲取所有選項(xiàng)元素和內(nèi)容元素，存至數(shù)組（選項(xiàng)元素的序號(hào)與內(nèi)容元素的序號(hào)是一一對(duì)應(yīng)的）。2、給所有的選項(xiàng)元素加上點(diǎn)擊監(jiān)聽(tīng)。監(jiān)聽(tīng)函數(shù)的邏輯是把所有的內(nèi)容元素的display屬性設(shè)為none，然后把被點(diǎn)擊元素的display屬性設(shè)為block。





�(wú)�(biāo)題文�








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

  

    
�(nèi)�

    
�(nèi)�

    
�(nèi)�

    
�(nèi)�

代碼�(lái)自：http://www.cnblogs.com/jingan...

�、如何實(shí)�(xiàn)插件 �(wèn)題描�

�(zhǔn)確一�(diǎn)是用原生js如何�(shí)�(xiàn)插件�
再放兩�(gè)鏈接�
一步一步實(shí)�(xiàn)JS拖拽插件
如何�(kāi)�(fā)原生� JavaScript 插件(知識(shí)�(diǎn)+寫法)

解析

具體的實(shí)�(xiàn)方法上面兩�(gè)鏈接里都有說(shuō)明了�
主要兩種方式�
1.直接暴露函數(shù)到全局�
2.把函�(shù)保存到一�(gè)�(duì)象當(dāng)中�

如果把上面的選項(xià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方法��

�、寫在后�

這幾�(gè)�(wèn)題都�?；A(chǔ)，雙邊距疊加的問(wèn)題在css的基�(chǔ)教程里就有提�。選�(xiàng)卡和插件的實(shí)�(xiàn)的問(wèn)題其�(shí)自己之前也都遇到，當(dāng)�(shí)是看明白�，但是沒(méi)有好好的總結(jié)記錄。另外簡(jiǎn)歷如何寫也是面試�(dāng)中重要的一�(huán)。這次�(zhǔn)備的太不充分��

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

�(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/111836.html

相關(guān)文章

  • 2018�, 我的前端面試�(fù)�

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

    Yujiaao �(píng)� 收藏0

  • 前端面試�(fù)�

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

    tomener �(píng)� 收藏0

  • 前端面試�(fù)�

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

    hufeng �(píng)� 收藏0

  • 我的秋招�(fù)�——回�2022秋招�(jīng)�

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

    longshengwang �(píng)� 收藏0

  • python�(fù)�之windows�(huán)境的安裝

    摘要：原生環(huán)境的安裝原生�(huán)境的安裝�(yīng)該是每�(gè)�(xué)�(guò)都熟悉的，在官網(wǎng)的頁(yè)面下載自己想要的版本，然后雙擊打�(kāi)，一路就好了，推薦使�，具體原因可以上�(wǎng)查一下和版本的對(duì)比，我最直觀的感受就是在使用的過(guò)程中，因?yàn)榫幋a�(wèn)題導(dǎo)致的�(wèn)題明顯減�� 前言 寫這篇文章的起因是�?yàn)樽詫W(xué)python，最近在面試一�(gè)python職位的時(shí)候面試官讓我聊一聊我自學(xué)python的經(jīng)�，然后就像及流水賬似的將自己自學(xué)pytho...

    Miracle �(píng)� 收藏0

�(fā)表評(píng)�

0條評(píng)�

最新活�(dòng)
閱讀需要支�1元查�
<