摘要：从上面那段代码可以看到，下的上外边距只占了两个距离的一半，所以两个的间距是。下面分别对第和第个条件进行了测试。关于这一点，两个元素的间距是这样计算的上的下外边距包裹上的下内边距下的上外边距可以看下面这个例子印证第三点。
昨天面了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的基础教程里就有提到。选项卡和插件的实现的问题其实自己之前也都遇到，当时是看明白了，但是没有好好的总结记录。另外简历如何写也是面试当中重要的一环。这次准备的太不充分了。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/111836.html
摘要：技术一面一面主要考察基础，有些会有技术笔试，比如腾讯，。腾讯的面试官就很喜欢问，安全，浏览器缓存方面的问题，计算机基础，但是要懂为什么。 这篇文章简单总结下2018年内我的一些前端面试经历， 在这简单分享一下，希望对大家有所启发。 楼主在深圳，毕业两年。面的主要是深圳的几家公司。 包括: 腾讯， 蚂蚁金服， Lazada， Shopee, 有赞 等 。 楼主在准备面试前， 想着复习一...
摘要：接下来，我主要从三个阶段回顾我的秋招，分别是前期中期尾声。到了这里，我的秋招算是正式的尘埃落定了，签完三方后，我的秋招结束了。四复盘总结这次的复盘主要是我自己整个秋招的历程缩影，很多细节无法在一篇文章就说清楚。 ...
摘要：原生环境的安装原生环境的安装应该是每个学过都熟悉的，在官网的页面下载自己想要的版本，然后双击打开，一路就好了，推荐使用，具体原因可以上网查一下和版本的对比，我最直观的感受就是在使用的过程中，因为编码问题导致的问题明显减少。 前言 写这篇文章的起因是因为自学python，最近在面试一个python职位的时候面试官让我聊一聊我自学python的经历，然后就像及流水账似的将自己自学pytho...
阅读 2830·2021-09-28 09:45
阅读 1506·2021-09-26 10:13
阅读 897·2021-09-04 16:45
阅读 3660·2021-08-18 10:21
阅读 1083·2019-08-29 15:07
阅读 2632·2019-08-29 14:10
阅读 3146·2019-08-29 13:02
阅读 2458·2019-08-29 12:31
