数据可视化面试总结分享

1. 首先自我介绍一下，知道我本科学的是java，问我为什么想做前端

2. 技术问题：

1. 什么是盒子模型

IE的盒子模型和标准W3C盒子模型，从外到里依次为：margin、border、padding、content

不同之处是：IE的盒子模型的width=content + padding+border,W3C的盒子模型的width=content

2. 盒子模型的宽度可不可以改变

不知道是我没有听懂面试官的意思还是这个问题本来就有问题，直接设置width不就好啦，如果是IE的盒子模型，还可以设置border或者padding，比如：

div{
    width: 200px;
    border-left: 1px solid #ccc;
    padding-left: 10px;
}

对于IE的盒子模型来说，上面的宽度就是 200px + 1px + 10px = 211px；

3. js和java有什么不同

开放性问题，我回答的是数据类型不同、js更灵活，java严谨等

4. 说一说你都看过什么css和js的书

就说自己看的书就好了，开放性问题

5. 对js印象最深的部分是什么

原型链和继承，然后解释了一下。原型链建议大家好好理解一下，每本讲js的书都会详细解释的。

6. 你认为css是一门语言吗

不是，它是层叠样式表，但是功能很强大，可以给你意想不到的惊喜。巴拉阿拉~~~

7. css吸引你的地方是什么

开放性问题

8. 数据可视化和前端你认为有什么区别

开放性问题

9. angular学的怎么样？核心是什么

只是简单用过，只用到了双向数据绑定和路由，然后简单解释了一下，这个问题答得不是很好。

10. 你是怎么学习angular的？看书吗

先是看的官方文档，不太理解，看了视频，有看过书

11. 然后就问了项目，你在项目中做了什么

要突出自己做了什么，而不是项目具有什么功能。将开发过程中遇到的坑和解决方法说清楚，思路要清晰

12. 说一说spring和angular的共同点

说了模块化的思想，都用到了mvc模式，巴拉巴拉，回答的不好，主要是对二者都不熟。

13. 现场写一个程序，去除数组中的相同元素

/* var arr = [1,2,3,4,5,2,3];*/
var arr = ["ww","name","ww","test","ranran","ranran",123,"123",123];
var result = [];
for(var i=0;i<arr.length;i++) {
        if(result.indexOf(arr[i]) == -1) {
            result.push(arr[i]);
        }
}
console.log(result);

14. 讲一讲css的定位

position，属性有relative、absolute、fixed、还有一个默认的static
static
元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。

relative
元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。

absolute
元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。

fixed
元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。

15. 如何去除浮动

清除浮动的几种方法：
1. clear:both/left/right
clear属性是指元素的两边或某一侧不能有浮动元素，为了达到这个目的，在 CSS1 和 CSS2 中，这是通过自动为清除元素（即设置了 clear 属性的元素）增加上外边距实现的。在 CSS2.1 中，会在元素上外边距之上增加清除空间，而外边距本身并不改变。最终使这个元素被挤到浮动元素的下外边距以下。 以这种方法为原理，通过在所有浮动元素下方添加一个clear:both的元素，可以消除float的破坏性。
更高级的方法是通过伪元素选择器在父元素后面增加了一个clear:both的元素，也就是bootstrap采用的.clearfix
.clearfixt:after{ display:block/table; clear:both; content:”“;
}
2. overflow:hidden/auto
使用这种方法的原理是overflow需要父元素紧贴子元素，所以父元素需要撑大来包裹子元素，需要注意当设置成auto时，如果父元素内容过多，会出现滚动条，而使用hidden时，不能和position配合使用，因为超出的尺寸的会被隐藏。
这个方法不适用于IE6/7，需要加上一个IE特有的属性zoom:1
3. 给父元素设置高度（不推荐）
清除浮动的方法基本上属于clear和使父元素包裹两大类，设置overflow属性，使父元素浮动等都属于第二类，同理，可以设置父元素position:absolute，display:inline-block等，一些具有包裹性的CSS属性，都具有抑制浮动副作用的作用。

16. 给看2张打印出来的代码，问我程序的意图是什么？里面有什么错误？如何改正确？找出共有几处错误

这个主要是考观察的细致程度和对代码的感觉

17. spring的核心是什么，什么是控制反转

Spring核心思想就是IOC和AOP，IOC是控制反转的意思，以前我们通常要在一个类的方法得到另外一个类需要 new 一个，现在只要通过注解（@autowide）注入就好了。

18. 讲一讲http的状态码有哪几大类

HTTP的状态码分为五大类：
100-199 用于指定客户端应相应的某些动作。
200-299 用于表示请求成功。
300-399 用于已经移动的文件并且常被包含在定位头信息中指定新的地址信息。
400-499 用于指出客户端的错误。
500-599 用于支持服务器错误。

常见的：200 (OK/正常)，403 (SC_FORBIDDEN)的意思是除非拥有授权否则服务器拒绝提供所请求的资源，一般是由于服务器上的损坏文件或目录许可而引起。404 (SC_NOT_FOUND)状态每个网络程序员可能都遇到过，他告诉客户端所给的地址无法找到任何资源。500 (Internal Server Error/内部服务器错误)

19. 如何隐藏一个层，除了display和visibility还有什么方式

可以设置z-index 让其他的层覆盖掉该层，也可以使用定位，让层偏移到浏览器的其他地方去，造成用户看不见的假象。

20. 给我一分半钟计时，让我尽可能多的说砖头的作用有什么

考的是发散思维，自我感觉回答的不错，哈哈~

21. 都关注了前端哪些东西

nodeJS、react、D3.js、H5、AngularJS、MEAN等

3. 交叉面

这次面试持续了2个小时，整个过程还是比较轻松的，先是进来两个面试官，让我自我介绍，然后问我技术问题，问完之后他们出去了，让我等着，十分钟后又进来两个面试官，又让我自我介绍了一下，然后问题了一堆问题后离开，让我等着。过了十几分钟后，后面进来的两个人告诉了面试的结果，说我基础还算扎实，打算要我，但是实习生岗位没有了，会帮我申请，让我等通知。
后来才知道之前进来的两个是数据可视化部门的leader，后面进来的两个是web前端部门的leader。可能是自己太年轻，不知道什么是紧张。整个过程也没觉得时间很长，是一段值得回忆的经历，毕竟是人生中的第一家面试公司。