前言

《旧唐书·魏徵传》中曾这样写道：夫以铜为鉴，可正衣寇；以古为鉴，可知兴替；以人为鉴，可明得失。唐太宗有魏徵为镜，所以才有了四方来朝的大唐盛世。其实面试也是一样的，相信很多小伙伴在面试的时候，面对对面的大神，都会紧张嘴瓢以至于发挥不到平时的两三成，但是你要相信，神也是人，他只是完成了我们做不到的事。

所以要打败他们，我们就要了解他们，正所谓：“知己知彼，百战不殆”，而最好的了解他们的方法就是成为他们，以他们为镜，知道自己的得失，每天如此，这样的话，楼兰可破，指日可待。

最后，如果把面试比作一场战争的话，那这肯定一场“敌很强，我很弱的战争”，所以“左”倾冒险主义的思想肯定不能有，要使用毛主席的游击战的打法，请君入瓮，把敌人拉进我们的主场去打，才能取得革命的胜利。简单来说，就是引导面试官去问自己想被问的问题。

当我是面试官时，关于《盒模型》，我会问：

面试官： 给我讲一讲盒模型呗！

我：页面就是由一个个盒模型堆砌起来的，每个HTML元素都可以叫做盒模型，盒模型由外而内包括：边距（margin）、边框（border）、填充（padding）、内容（content）。它在页面中所占的实际宽度是margin + border + paddint + content 的宽度相加，但是，盒模型有标准盒模型和IE的盒模型（引导面试官）

面试官： 标准盒模型和IE的盒模型有啥区别呢？

我：不同之处就是标准盒模型的内容大小就是content的大小，而IE的则是content + padding +border 总的大小。

面试官： 那怎么设置他们呢？

我：通过设置 box-sizing:content-box(W3C)/border-box(IE)就可以达到自由切换的效果。

面试官：JS怎么获取和设置box的宽高呢，你能想到几种方法？

我：

clientWidth和ClientHeight
这组属性可以获取元素可视区的大小，可以得到元素内容及内边距所占据的空间大小。（不包括滚动条）

var obj = document.getElementById("test");
//test为样式名
  alert(obj.clientWidth + "," + obj.clientHeight);

scrollWidth和scrollHeight 这组属性可以获取滚动内容(可见内容)的元素大小
offsetWidth和offsetHeight 这组属性可以返回元素实际大小，包含边框、内边距和滚动条.

 var obj = document.getElementById("test");
    alert(obj.offsetWidth + "," + obj.offsetHeight);

clientLeft和clientTop获取边框大小这组属性可以获取元素设置了左边框和上边框的大小。

 var obj = document.getElementById("test");
    alert(obj.clientLeft + "," + obj.clientTop);

offsetLeft和offsetTop
这组属性可以获取当前元素相对于父元素的位置。获取元素当前相对于父元素的位置，最好将它设置为定位position:absolute；

window.onload = function(){
    var obj = document.getElementById("test");
    alert(obj.offsetLeft + "," + obj.offsetTop); // 30， 20
};

scrollTop和scrollLeft 这组属性可以获取滚动条被隐藏(滚动条上方区域)的区域大小，也可设置定位到该区域。如果要让滚动条滚动到最初始的位置，那么可以写一个函数：


function scrollStart (element) {
    if ( element.scrollTop != 0 ) {
        element.scrollTop = 0;
    }
}

getBoundingClientRect() 这个方法返回一个矩形对象，包含四个属性：left、top、right和bottom。分别表示元素各边与页面上边和左边的距离。
通过window.getComputedStyle(dom).width/height获取元素的宽高。这个方法兼容性较好，支持firefox、chrome
window.innerHeight也可以获得视窗的高度

这些你可以慢慢说，拖时间，这场战争可是持久战呢！

面试官： 什么是边距重叠？什么情况下会发生边距重叠？如何解决边距重叠？

我：边距重叠：两个box如果都设置了边距，那么在垂直方向上，两个box的边距会发生重叠，以绝对值大的那个为最终结果显示在页面上

父子关系的边距重叠：

父子关系，如果子元素设置了外边距，在没有把父元素变成BFC的情况下，父元素也会产生外边距

同级关系的重叠：

同级元素在垂直方向上外边距会出现重叠情况，最后外边距的大小取两者绝对值大的那个

解决办法：把元素变成BFC(引出面试官问有关BFC的内容)

面试官： 给我讲讲BFC呗！

我： BFC的基本概念–BFC就是“块级格式化上下文”的意思。它是 W3C CSS 2.1 规范中的一个概念，是一个特殊的块，内部有自己的布局方式，不受外边元素的影响。

它的原理是：

BFC内部的盒子，会在垂直方向，一个接一个地放置。垂直方向上也会发生边距重叠。
BFC就是页面上的一个独立容器，容器里面的子元素不会影响到外面的元素，外边的也不会影响里边的。
BFC的区域不会与float box重叠。
计算BFC的高度时，浮动元素也被计算在内。 BFC是这样产生的–
overflow: auto/ hidden;
position: absolute/ fixed;
float: left/ right;
display: inline-block/ table-cell/ table-caption/ flex/ inline-flex

面试官： BFC可以实现哪些场景呢?

我：可以用来自适应布局。

<!-- BFC不与float重叠 -->
    <section id="layout">
        <style media="screen">
          #layout{
            background: red;
          }
          #layout .left{
            float: left;
            width: 100px;
            height: 100px;
            background: #664664;
          }
          #layout .right{
            height: 110px;
            background: #ccc;
            overflow: auto;
          }
        </style>
        <div class="left"></div>
        <div class="right"></div>
        <!-- 利用BFC的这一个原理就可以实现两栏布局，左边定宽，右边自适应。不会相互影响，哪怕高度不相等。 -->
    </section>

可以清除浮动：

<!-- BFC子元素即使是float也会参与计算 -->
        <section id="float">
            <style media="screen">
              #float{
                background: #434343;
                overflow: auto;
              }
              #float .float{
                float: left;
                font-size: 30px;
              }
            </style>
            <div class="float">我是浮动元素</div>
        </section>

解决垂直边距重叠：

 <section id="margin">
        <style>
            #margin{
                background: pink;
                overflow: hidden;
            }
            #margin>p{
                margin: 5px auto 25px;
                background: red;
            }
            #margin>div>p {
                margin: 5px auto 20px;
                background: red;
            }
        </style>
        <p>1</p>
        <div style="overflow:hidden">
            <p>2</p>
        </div>
        <p>3</p>
        <!-- 这样就会出现第一个p标签的margin-bottom不会和第二个p标签的margin-top重叠，这也是BFC元素的另一个原则，不会影响到外边的box，是一个独立的区域。 -->
    </section>

总结

当然，上面的话可能太机械化了，所以懂意思就好了，真正面试的时候，你可以用更戏剧化更形象的话语去描述他们，这样才能打动面试官。

转载自：blog.csdn.net/m0_37585915…

面试准备小技巧一（盒模型）

前言

当我是面试官时，关于《盒模型》，我会问：

总结