var contentBox=document.getElementById("content-box"); var paddingBox=document.getElementById("padding-box"); var borderBox=document.getElementById("border-box"); alert(contentBox.offsetWidth); --弹出150px alert(paddingBox.offsetWidth); --弹出110px alert(borderBox.offsetWidth); --弹出100px

 简单来说，box-sizing与我们平时的盒模型最大的区别就是，在浏览器屏幕上显示的宽度不一样。

五：git中涉及到的一些命令

      列举了一些经常用的命令，但有几个不常用的搞忘记了，关于git常见命令可参考廖雪峰老师的文档。

      的git教程。

六：关于块级元素和行级元素

     块级元素：div  , p  , form,   ul,  li ,  ol, dl,    form,   address,  fieldset,  hr, menu,  table  （p是块级元素）

     行内元素：span,   strong,   em,  br,  img ,  input,  label,  select,  textarea,  cite

     区别：

      1）块级元素会独占一行，其宽度自动填满其父元素宽度

          行内元素不会独占一行，相邻的行内元素会排列在同一行里，直到一行排不下，才会换行，其宽度随元素的内容而变化

      2） 块级元素可以设置 width, height属性，行内元素设置width,  height无效。

         【注意：块级元素即使设置了宽度，仍然是独占一行的】

      3) 块级元素可以设置margin 和 padding。行内元素的水平方向的padding-left,padding-right,margin-left,margin-right 都产生边距效果

但是竖直方向的padding-top,padding-bottom,margin-top,margin-bottom都不会产生边 距效果。（水平方向有效，竖直方向无效）

      面试官抛出一个问题，如何使块级元素和行级元素在同一行？

      解决办法：给块级元素加display:inline-block,看下代码：

4444222

    css部分：

.div1{border:1px solid red;} .div2{border:1px solid blue;} .span{border:1px solid green;}

实现效果如下：

可以看出，此时块级元素div独占一行，而行级元素span，在下面一行，只占据本身的宽度。

如果加上display:inline-block，则可使块级元素和行级元素在同一行。

.div1{border:1px solid red;} .div2{border:1px solid blue;display:inline-block} .span{border:1px solid green;}

效果如下：

 延伸拓展下：如果要要使两个行内元素在同一行，应该怎么写？

解决办法：给行内元素加vertical-align:middle   具体的可参考我这篇文章：

总结：

     个人感觉，这次面试的公司，问的东西都很基础，有些东西，自己不常用的知识点，都被问到了，还好，根据理解和残留的记忆，基本上都回答出来了或者在面试官的引导下，答出来了。上午的面试官问到的js方面多，包括AJAX跨域，性能优化，http等。下午的面试官问到的基本都是css3方面的问题，让你当场写代码，细节追问的很详细。这次的面试，个人感觉很不错，学到了不少东西。

    ps:我要去上海实习了，各位上海的兄弟姐妹，能不能给我推荐一下合租房啊！7号线行知路附近。求告知，求联系！