面经一

95 阅读 0 评论 63 点赞

我是靠谱客的博主怕孤独鞋子，这篇文章主要介绍面经一，现在分享给大家，希望可以做个参考。

记录一下去网易的面试，积累经验，再战啦。

辛辛苦苦跑去面试，那天也过得格外不顺利，自己技术不过硬再加上那天倒霉透顶，所以不出意料地跪了网易面试，但是其实还是蛮沮丧的，事后太忙了也一直没记录，今天有空来写一下。

先开始面试，面试官让我简单介绍自己的项目，我大概简单介绍了一下，然后问了几个项目里的问题，我都简单描述了一下。然后就问我基本的HTML和CSS的问题了，

第一个问的是居中问题，怎么实现用户登录框的水平垂直居中，现在再来复习一下水平垂直居中的几种方法：

垂直居中

方法一
这个方法把一些 div 的显示方式设置为表格，因此我们可以使用表格的 vertical-align property 属性。

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div id="wrapper">
<div id="cell">
<div class="content">
Content goes here</div>
</div>
</div>

#wrapper {
display:table;
}
#cell {
display:table-cell; 
vertical-align:middle;
}

优点：
content 可以动态改变宽度高度(不需在 CSS 中定义)。当 wrapper 里没有足够空间时， content 不会被截断
缺点：
Internet Explorer(甚至 IE8 beta)中无效。

方法二：
这个方法使用绝对定位的 div，把它的 top 设置为 50％，margin-top设置为负的 content 高度。这意味着对象必须指定固定的高度。
因为有固定高度，当给 content 指定 overflow:auto，这样如果 content 太多的话，就会出现滚动条，以免content 溢出。

复制代码

1
2
3
4
5
6
7
8
9
<div class="content">
Content goes here</div>

#content {
position:absolute;
top:50%;
height:240px;
margin-top:-120px; /* negative half of the height */
}

当元素不定高的时候，也可以用两种方法实现垂直居中：
Method 1：

复制代码

1
2
3
4
5
6
7
8
.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

Method 2：用flexbox布局

复制代码

1
2
3
4
5
.parent {
  display: flex;
  flex-direction: column;//主轴方向
  justify-content: center;//项目在主轴上的对齐方式。
}

水平居中

对于宽度确定的块级元素，直接可以可以设置margin-left和margin-right为auto就行。

对于不定宽度的块级元素：
1、dispaly 设置为 inline 类型，然后使用 text-align:center 来实现居中效果。
缺点：丢失盒子模型的特性

2、relative相对定位

复制代码

1
2
3
4
5
6
7
8
9
10
.parent{
float:left;
position:relative;
left:50%;
}

.child{
position:relatie;
left:-50%;
}

3、flex-box布局：

复制代码

1
2
3
4
.parent{
display:flex;
justify-content:center;
}

感觉自从flex布局出来之后，对于不定宽高的元素布局很方便。

然后为了我关于fixed定位问题。不过是放在具体情境里，当时懵了没有回答上来，然后想得很复杂，面试官告诉我，position里的一个用法就可以实现啊，我还跟他争了半天。自己想太麻烦了 - -。以后面试官说什么我就点头好好好，自己也是蠢得呵呵哒。跪了也是该。+ +。

让我画一下盒模型图。
这里写图片描述

IE的盒子模型：IE的content部分包含了 border 和 padding。

问了问我知道css3的哪些新特性，我答了答，旋转、动画，文字阴影等，然后给了我具体情境问了我具体实现。
CSS3新特性：
CSS3实现圆角（border-radius），阴影（box-shadow），
对文字加特效（text-shadow、），线性渐变（gradient），旋转（transform）
transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);//旋转,缩放,定位,倾斜
增加了更多的CSS选择器多背景 rgba
在CSS3中唯一引入的伪元素是::selection.
媒体查询，多栏布局
border-image

问了我两栏布局、三栏布局的实现。
圣杯布局双飞翼布局
搭建 head content(main left right) foot, content 内部的三个元素全部左浮动，然后给content清除浮动防止影响 foot
给 main 100% 的宽度让他占满一行
给 left元素 -100% 的margin-left 让他移动到最左边，给 right元素和他宽度一样的负 margin-left 让他移动到最右边
针对移动后 main 的两边会被 left 和 right 重合覆盖掉做出不同的改变，这儿也就是两个布局的本质区别 – 圣杯布局会给 content 内边距，左右分别为 left 和 right的宽度，然后再利用相对定位移动 left (position:relative; left:负元素宽度；)和 right(position:relative;right:负元素宽度;) – 双飞翼布局会在 main 里面再加一层 wrap ，然后把内容都写在 wrap 里面，正对 wrap 设置他的 margin, 左右外边距和 left 与 right 一样即可。

问我ES6的新特性，结果没答好。
ES6新特性有：promise let map set
新增模板字符串（为JavaScript提供了简单的字符串插值功能）、箭头函数（操作符左边为输入的参数，而右边则是进行的操作以及返回的值Inputs=>outputs。）、for-of（用来遍历数据—例如数组中的值。）arguments对象可被不定参数和默认参数完美代替。ES6将promise对象纳入规范，提供了原生的Promise对象。增加了let和const命令，用来声明变量。增加了块级作用域。let命令实际上就增加了块级作用域。ES6规定，var命令和function命令声明的全局变量，属于全局对象的属性；let命令、const命令、class命令声明的全局变量，不属于全局对象的属性。。还有就是引入module模块的概念。

大概就问了这些，整个过程持续半个小时吧，都是特别基础的问题，自己基础不是很扎实，面试的时候不注意技巧，所以跪也跪得理所应当。

多总结，多加油！