最近参加了一场面试,感觉自己题目都懂,但是说起来就是有点说不明白,所以写个博客整理以下吧。答案不少不是面试时回答的答案,只是整理一下可行答案

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文档,原来文档每个指令后面都有“指令”两个字,我倒是一直没注意

关于第一次web前端面试的记录的更多相关文章

  1. web前端面试试题总结---html篇

    HTML Doctype作用?标准模式与兼容模式各有什么区别? (1).<!DOCTYPE>声明位于位于HTML文档中的第一行,处于 <html> 标签之前.告知浏览器的解析器 ...

  2. Web前端面试笔试题总结

    最近一段时间要毕业了,忙着找工作,见过不少笔试面试题,自己总结了一些加上网上找的一些整合了一下.答案暂时都东拼西凑出来了,但是还是先不发出来,一方面是答案并不是唯一的并且自己的答案不能保证对,另一方面 ...

  3. 百度web前端面试2015.10.18

    邮件里通知的周日下午两点参加百度校招面试,我13:10分就到了,前台先让我拿了个面试资格单(上面是我的信息),然后在web前端面试入口排队,面试在百度食堂举行的,等了大概1个小时,放我去面试.都是一对 ...

  4. web前端面试试题总结---javascript篇

    JavaScript 介绍js的基本数据类型. Undefined.Null.Boolean.Number.String. ECMAScript 2015 新增:Symbol(创建后独一无二且不可变的 ...

  5. Web前端理论知识记录

      Web前端理论知识记录 Elena· 5 个月前 cookies,sessionStorage和localStorage的区别? sessionStorage用于本地存储一个会话(session) ...

  6. web前端面试总结

    本文由我收集总结了一些前端面试题,初学者阅后也要用心钻研其中的原理,重要知识需要系统学习.透彻学习,形成自己的知识链.万不可投机取巧,临时抱佛脚只求面试侥幸混过关是错误的!也是不可能的! 前端还是一个 ...

  7. 2016年Web前端面试题目汇总

    转载: 2016年Web前端面试题目汇总 以下是收集一些面试中经常会遇到的经典面试题以及自己面试过程中未解决的问题,通过对知识的整理以及经验的总结,重新巩固自身的前端基础知识,如有错误或更好的答案,欢 ...

  8. web前端面试试题总结---其他

    其他问题 原来公司工作流程是怎么样的,如何与其他人协作的?如何夸部门合作的? 你遇到过比较难的技术问题是?你是如何解决的? 设计模式 知道什么是singleton, factory, strategy ...

  9. web前端面试试题总结---css篇

    CSS 介绍一下标准的CSS的盒子模型?低版本IE的盒子模型有什么不同的? (1)有两种, IE 盒子模型.W3C 盒子模型: (2)盒模型: 内容(content).填充(padding).边界(m ...

随机推荐

  1. Android 5.1 预制输入法

    Android修改默认输入法为讯飞方法如下: 首先将讯飞输入法apk预制到系统app中: 在firefly-rk3288_android5.1_git_20180126/out/target/prod ...

  2. VMware虚拟机提示找不到vmnetbridge.dl文件的解决办法

    把vmware workstation删了重装,估计是异地安装包在安装时候出现的问题. 先把安装包拷贝到本地,然后控制面板上把已有的vmware workstation删除. 最后重新安装VMware ...

  3. vue子组件获取父组件方法

    注:以下代码未使用esLint语法检查 父组件: <template> <div class="wrapper"> <cp_action @paren ...

  4. ssh-key添加之后依旧需要密码输入Bug的解决

    场景重现 要求从10.183.93.181的root用户ssh免密登录至10.110.155.26的boss用户 1.在10.110.155.26 的boss用户下面新建目录.ssh 2.在10.11 ...

  5. java随笔记录

    JAVA的变量类型 类变量:独立于方法之外的变量,用 static 修饰. 实例变量:独立于方法之外的变量,不过没有 static 修饰. 局部变量:类的方法中的变量. public class Va ...

  6. leetcode-第14周双周赛-1272-删除区间

    题目描述: 自己的提交: class Solution: def removeInterval(self, intervals: List[List[int]], toBeRemoved: List[ ...

  7. leetcode-163周赛-1262-可被3整除的最大和

    题目描述: 方法一:动态规划 O(N) class Solution: def maxSumDivThree(self, nums: List[int]) -> int: dp = [0, -1 ...

  8. 测试使用python的用途

    使用Python:1. 分析日志,尤其是服务器端日志.脚本就是短小精悍的2. 用来生成测试数据,比如生成随机的10w个词,很麻烦:如果找一个字库,存在数表里,然后用Python取数据3. 做数据发出的 ...

  9. JS闭包的详解

    目录 一.什么是闭包? 二.闭包有什么好处?应用在哪? 2.1 好处: 2.2 用法: 三.闭包需要注意的地方? 3.1 IE下会引发内存泄露 一.什么是闭包? 特点: 1 函数嵌套函数 2 内部函数 ...

  10. legend2---开发日志16

    legend2---开发日志16 一.总结 一句话总结: 编程敲代码,一定要把 关系弄清楚,关系不弄清楚,很容易敲错,比如:如何求无限级分类的博客的数据的数目 弄清楚关系式:自己总数量=孩子总数量+自 ...