前端面試覆盤

時間 2019-12-06

標籤前端面試欄目快樂工作简体版

原文原文鏈接

昨天面了html5前端。
下面是其中3個問題：javascript

雙外邊距疊加。php
用原生js怎麼實現div選項卡。css
如何去實現一個插件。html

1、雙外邊距摺疊

問題描述

一上一下兩個div，上面div的下外邊距是10px，下面div的上外邊距是5px，這兩個div的距離是多少？前端

解析

10px。不是15px。html5

<div style="background: yellow;height: 100px;margin-bottom: 10px;"></div>
<div style="background-color: red;height: 100px;margin-top: 5px;"></div>

從上面那段代碼能夠看到，下div的上外邊距只佔了兩個div距離的一半，因此兩個div的間距是10px。java

這裏是關於這個問題的一個描述：https://www.zhihu.com/questio...面試

發生的條件：數組

兩個或多個。ide
毗鄰。
垂直方向。

下面分別對第2和第3個條件進行了測試。

<div style="padding-bottom: 1px;"><div style="background: yellow;height: 100px; margin-bottom: 10px;clear: both;"></div></div>                        
<div style="background-color: red;height: 100px;margin-top: 5px;clear: both;"></div>

與以前不一樣的是，上div被一個div包裹住了，而包裹它的div設置了下內邊距1px（若是沒有設置仍是會發生疊加）。
能夠看到，這時候下div的上外邊距佔了兩個div間距的三分之一。兩個元素的間距是16px。

關於這一點，兩個元素的間距是這樣計算的：上div的下外邊距+包裹上div的下內邊距+下div的上外邊距

能夠看下面這個例子印證：

<div style="padding-bottom: 20px;"><div style="background: yellow;height: 100px;margin-bottom: 20px;"></div></div>                        
<div style="background-color: red;height: 100px;margin-top: 20px;"></div>

第三點。

<div style="float: left; background: yellow;height: 100px;width: 50px; margin-right: 10px;"></div>
<div style="float: left; background-color: red;height: 100px;width: 50px; margin-left: 5px;"></div>

這裏用了float屬性實現兩個div水平排布的效果，此時第二個div的左外邊距只佔了兩個div間距的三分之一，說明兩個元素的間距是15px，沒有發生疊加。

2、用原生js實現div選項卡

問題描述

用原生js實現如上div選項卡。

解析

這個問題有不少的解決方案，原生jq等等均可以實現（還有一個我找到時沒看懂的：http://bbs.blueidea.com/threa...，容我暫時看不懂），還能夠加上錨點使得打開頁面時就跳轉到固定的選項卡。
可是都不外乎涉及到控制display這個屬性，被選中的選項卡設置‘display：block’，不被選中的則爲‘display：none’。
選項卡的實現能夠分爲兩個：
1.選擇部分
2.展現部分（通常爲div）

對應第一張圖就是‘代辦公文’、‘已辦公文’、‘所有公文’這一塊爲選擇部分，讓用戶點擊進行選項卡切換。展現部分就是下面的內容。一個選項對應着一個內容（div）。

實現的步驟很簡單:一、獲取全部選項元素和內容元素，存至數組（選項元素的序號與內容元素的序號是一一對應的）。二、給全部的選項元素加上點擊監聽。監聽函數的邏輯是把全部的內容元素的display屬性設爲none，而後把被點擊元素的display屬性設爲block。

<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312" />
<title>無標題文檔</title>
<style>
body,ul,li{margin:0; padding:0; font:12px/1.5 arial;}
ul,li{list-style:none;}
.wrap{width:500px; margin:20px auto;}
.hide{display:none;}
#tab_t{height:25px;border-bottom:1px solid #ccc;}
#tab_t li{float:left; width:80px; height:24px; line-height:24px; margin:0 4px; text-align:center; border:1px solid #ccc; border-bottom:none; background:#f5f5f5; cursor:pointer}
#tab_t .act{ position:relative; height:25px; margin-bottom:-1px; background:#fff;}
#tab_c{border:1px solid #ccc; border-top:none; padding:20px;}
</style>
<script>
window.onload = function(){
  var tab_t = document.getElementById("tab_t");
    var tab_t_li = tab_t.getElementsByTagName("li");
  var tab_c = document.getElementById("tab_c");
    var tab_c_li = tab_c.getElementsByTagName("div");
    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].onclick = 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 = '';
        }
    }
    
}
</script>
</head>

<body>

<div class="wrap">
  <ul id="tab_t">
    <li class="act">選擇1</li>
    <li>選擇2</li>
    <li>選擇3</li>
    <li>選擇4</li>
  </ul>
  <div id="tab_c">
    <div>內容1</div>
    <div class="hide">內容2</div>
    <div class="hide">內容3</div>
    <div class="hide">內容4</div>
  </div>
</div>  
  
</body>
</html>

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

3、如何實現插件

問題描述

準確一點是用原生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方法了。