关于第一次web前端面试的记录
最近参加了一场面试，感觉自己题目都懂，但是说起来就是有点说不明白，所以写个博客整理以下吧。答案不少不是面试时回答的答案，只是整理一下可行答案
1、
如图1，使B相对于A垂直居中
图1
<style>
/*方案一，父元素高度确定，使用高度+行高，内部只能有一行元素(可以有几个单行排列的行内盒子)*/
#A{
height: 100px;
line-height: 100px;
}
/*方案二，父元素高度不定，使用内边距，内部不限制盒子数量*/
#A{
padding: 10px 0;
}
/*方案三，使用弹性盒子，内部不限制盒子数量*/
#A{
display: flex;
height: 100px;/*最好设置，否则两个盒子会没有间隙，虽然这也可以算是居中吧*/
align-items: center;
}
/*方案四，父元素高度确定，使用表格单元格格式，内部不限制盒子数量*/
#A{
display: table-cell;
vertical-align: middle;
height: 100px;
}
</style> <div id="A">
<div id="B"></div>
</div>
此题答的时候没听清问题，以为是垂直水平排布呢，直接答了各内边距都是10，及一个定位+移动
2、
如图1，使B相对于A水平居中
<style>
/*方案一，父元素宽度不定，使用内边距，内部不限制盒子数量*/
#A{
padding: 0 10px;
}
/*方案二，父元素宽度确定，使用文本居中，内部不限制盒子数量，只对行内/行内-块级元素起效*/
#A{
text-align: center;
}
/*方案三，父元素宽度确定，使用弹性盒子，内部不限制盒子数量*/
#A{
display: flex;
width: 100px;
/*最好设置，否则内外两个盒子会没有间隙，虽然这也可以算是居中吧*/
justify-content: center;
/*使用center会使内部盒子间没有间隙，使用space-around更好吧，不过对于单个盒子来说显示效果并没有区别*/
}
</style> <div id="A">
<div id="B"></div>
</div>
这个答了一个弹性盒子，一个定位。
以上两个居中均可使用定位+位移实现，不过使用定位+位移后麻烦蛮多的，还是少用吧
/*水平居中*/
#A{
width: 300px;
position: relative;
}
#B{
position: absolute;
left: 50%;
transform: tranlateX(-50%);
} /*垂直居中*/
#A{
height: 100px;
position: relative;
}
#B{
position: absolute;
top: 50%;
transform: tranlateY(-50%);
}
3、
如图2，使盒子内单行文本水平垂直居中
图2
<style>
/*方案一，元素宽度不定/确定，高度确定，使用高度+行高+文本居中，内部只能有一行文本*/
#A{
height: 100px;
line-height: 100px;
text-align: center;
}
/*方案二，元素宽高不定，使用内边距，内部不限制文本行数*/
#A{
padding: 10px 0;
}
/*方案三，元素宽高不定，使用弹性盒子，内部不限制文本行数*/
#A{
display: flex;
width: 100px;/*最好设置，否则盒子和文本没有间隙，虽然这也可以算是居中吧*/
height: 100px;/*最好设置，否则盒子和文本没有间隙，虽然这也可以算是居中吧*/
align-items: center;
justify-content: center;
}
/*方案四，元素宽度确定/不定，元素高度确定，使用表格单元格格式，内部不限制文本行数*/
#A{
display: table-cell;
vertical-align: middle;
height: 100px;
text-align: center;
}
</style> <div id="A"></div>
这题答了一个内边距和一个弹性盒子吧。
4、
清除浮动的方式
/*传统做法，写好后需要在需要清除浮动的元素上写上class名称，会添加多余的属性*/
.clearfix::after{
display: block;
height:;
/*此处内容随意，"."占位比较小故写个“.”*/
content: ".";
clear: both:
} /*从bootstrap中学来的，好处是html中不会有多余的属性，坏处该元素不能与弹性盒子同时使用，伪元素会占位*/
/*固有的一些需要清除浮动的类名，此处使用nav来举例*/
.nav::before, .nav::after{
display: table;
content: "";
}
.nav::after{
clear: both;
}
这题答的时候逻辑比较差，如果使用打字应该好很多
5、
visibility: hidden;和display: none;的区别
visiblity是使元素不可见，但是还是在文档流中占位，display: none;是使元素消失，就像文档中没有这个标签及其子元素一样
这题回答的时候，我以为visiblity是超出裁剪呢，不过倒是没说超出裁剪，而是说了只是看不见，但是还是占着位，而display倒是完全没错，我都没去研究过，真是歪打正着哈哈哈（写博客时特地去研究了一下）。
6、
问：js有哪些数据类型
答：number、String、Boolean、Object、null、undefined
提问的时候有点蒙，什么是叫js的数据类型啊，是指int什么的吗，但是js没有啊，然后就提着胆答了这些东西，结果问的就是这个，我对于这些名词真的没什么感觉就是了。
7、
问：控制台会打印出什么来
var a = {b: 1, c: 2};
var d = a;
d.b = 10;
console.log(a);
答：会打印出{b: 10, c: 2}
原因：因为a是一个对象，所以在创建d的时候，赋的值的是a的内存地址，故修改d的属性就是修改它对应内存地址对象的属性，所以a也会跟着改变。
答的时候一开始还答错了，以为是复制了一个a过去呢，还好面试官提了一下才反应过来是赋了一个内存地址。
8、
问：控制台会打印出什么来
var a = 10;
a.pro = 10;
console.log(a);
console.log(a.pro);
console.log(a.pro + a); var s = 'hello';
s.pro = 'world';
console.log(s.pro + s);
答：会打印出10, undefined, NaN, undefinedhello
原因：
1、a是10，故打印10
2、a是number类型变量，故找不到a.pro
3、a.pro是undefined类型，undefined是NaN，而根据ECMAScript的规则，使用算术运算符+号时，一个数据为NaN则答案为NaN
4、s.pro也是undefined类型，但是使用为字符串运算符+号时(相加数据有一个为字符串会是字符串运算符)，所有数据均会变成字符串然后连接。
我回答的时候，第一个是对的，第二、三、四个就完全懵了，只知道a不是对象所以a.pro应该是一个错误数据，所以第二、三个应该是错误信息，第四个答了个worldhello，就很蒙。
9、
问：控制台会打印出什么来
var test = (function(a) {
this.a = a;
return function(b) {
return this.a + b;
}
)(function(a,b){
return a
}(3,5)));
console.log(test(7));
答：10
原因：此处是使用了两个立即执行的匿名函数+闭包。
首先，使用立即执行的匿名函数时，
(function(a){
}(3))
相当于
function c(a) {}
c(3);
其次，闭包是指函数及函数创建时所在的词法作用域（此处从MDN抄来的），就是说这个返回的匿名函数的this.a是指它的父函数里的this.a，b是指它的参数b。
再次，
(function(a,b){
return a
}(3,5)
该段代码会返回一个a的值回去，而a的值就是3。
最后，
var test = (function(a) {
this.a = a;
return function(b) {
return this.a + b;
}
)(3));
console.log(test(7));
该段代码的运行逻辑是，先执行一次匿名函数，存入参数a=3，之后为test变量赋值，值为function(b){...}，其中，这个function(b){...}中存着this.a=3，之后调用test函数，为其参数b赋值7，之后运行该函数，其返回结果就是10了(3+7)
面试时，回答的逻辑糟糕透了，毕竟全是匿名函数我都不知道怎么称呼。
10、
问：vue有哪些指令
答：v-html, v-bind, v-if, v-for, v-model（这时面试官叫停了，问了我下一题）
这问题问的我头蒙，什么叫指令啊，最后问了问是不是指v-html这一类的东西，面试官说是了之后就安心了，就答了下去
ps: 隔几天看vue文档，原来文档每个指令后面都有“指令”两个字，我倒是一直没注意
最新文章
- java动态代理的2种实现方式
- RDD、DataFrame和DataSet的区别
- 一致性 hash 算法（ consistent hashing ）a
- CentOS 关闭防火墙和selinux
- 去除UITableView中多余的分割线或者隐藏cell间的分割线
- Unity的物理材质
- .NET多线程编程(转)
- linux内核--软中断与tasklet
- C++ typedef与const
- MySQL之常用函数
- Servlet 学习总结
- cdh安装spark遇到的几个BUG
- Linux基础命令---top显示进程信息
- java-网络通信-索引
- BitMap的简单实现
- window.frames[]在Firefox下无法兼容的解决方式
- 学习笔记----float后不与前面元素同行解决办法。
- MapReduce优化参数
- php 可变数量的参数列表
- Atitit.sql ast 表达式 语法树 语法 解析原理与实现 java php c#.net js python