酷家乐二面准备

2018-05-01  本文已影响0人  Observer_____
3.如何实现两栏布局。

div+设置display为inline-box

div+float(还讲了如何清除浮动的方法)

还有使用flex布局的方法

还有使用bootstrap的col-*-6

4.有了解BFC吗。

BFC 即 Block Formatting Contexts (块级格式化上下文),它属于上述定位方案的普通流。

具有 BFC 特性的元素可以看作是隔离了的独立容器,容器里面的元素不会在布局上影响到外面的元素,并且 BFC 具有普通容器所没有的一些特性。

通俗一点来讲,可以把 BFC 理解为一个封闭的大箱子,箱子内部的元素无论如何翻江倒海,都不会影响到外部。
只要元素满足下面任一条件即可触发 BFC 特性:

  • body 根元素
  • 浮动元素:float 除 none 以外的值
  • 绝对定位元素:position (absolute、fixed)
  • display 为 inline-block、table-cells、flex
  • overflow 除了 visible 以外的值 (hidden、auto、scroll)

1. 同一个 BFC 下外边距会发生折叠

<head>
div{
    width: 100px;
    height: 100px;
    background: lightblue;
    margin: 100px;
}
</head>
<body>
    <div></div>
    <div></div>
</body>

avatar

从效果上看,因为两个 div 元素都处于同一个 BFC 容器下 (这里指 body 元素) 所以第一个 div 的下边距和第二个 div 的上边距发生了重叠,所以两个盒子之间距离只有 100px,而不是 200px。

首先这不是 CSS 的 bug,我们可以理解为一种规范,如果想要避免外边距的重叠,可以将其放在不同的 BFC 容器中。

<div class="container">
    <p></p>
</div>
<div class="container">
    <p></p>
</div>

.container {
    overflow: hidden;
}
p {
    width: 100px;
    height: 100px;
    background: lightblue;
    margin: 100px;
}

这时候,两个盒子边距就变成了 200px

avatar

2. BFC 可以包含浮动的元素(清除浮动)

我们都知道,浮动的元素会脱离普通文档流,来看下下面一个例子

<div style="border: 1px solid #000;">
    <div style="width: 100px;height: 100px;background: #eee;float: left;"></div>
</div>

avatar

由于容器内元素浮动,脱离了文档流,所以容器只剩下 2px 的边距高度。如果使触发容器的 BFC,那么容器将会包裹着浮动元素。

<div style="border: 1px solid #000;overflow: hidden">
    <div style="width: 100px;height: 100px;background: #eee;float: left;"></div>
</div>

效果如图:

avatar

3. BFC 可以阻止元素被浮动元素覆盖

先来看一个文字环绕效果:

<div style="height: 100px;width: 100px;float: left;background: lightblue">我是一个左浮动的元素</div>
<div style="width: 200px; height: 200px;background: #eee">
我是一个没有设置浮动, 
也没有触发 BFC 元素, width: 200px; height:200px; background: #eee;</div>

avatar

这时候其实第二个元素有部分被浮动元素所覆盖,(但是文本信息不会被浮动元素所覆盖) 如果想避免元素被覆盖,可触第二个元素的 BFC 特性,在第二个元素中加入 overflow: hidden,就会变成:

avatar

这个方法可以用来实现两列自适应布局,效果不错,这时候左边的宽度固定,右边的内容自适应宽度(去掉上面右边内容的宽度)。

5.垂直居中的方法。

垂直

1. vertical-align: middle;

前提是元素display: inline-block;

2. dispkay: flex;

单个子元素align-self: center;
多个子元素align-items:center;

3. lineh-eight: 100px;

设置height与line-height相同,适用于子元素为单行文本的情况

水平

1. margin: 0 auto; text-align: center; 父元素必须指定宽高

2. display: flex

设置容器justify-content: center

3. position: absolute;

父元素设置position: absolute; 子元素的margin-left为父元素剩余宽度的一半,适用于父子元素宽度确定的情况

6.ES6哪些用了比较多。

let、const、箭头函数、解构赋值、Set、Map。
Promise
Promise.all() 参数为Promise实例数组,当其中所有Promise状态都变为fulfilled才会将该Promise状态变为fullfiled,返回值作为数组,而只要有一个变为rejected,则该Promise状态也会变为rejected,获得第一个变为rejected的返回值

7.Set的兼容性怎么处理。
let arr = [1,2,3,3,4,5,2,3]
let set = new Set(arr)
let arr2 = [...set]
let arr3 = Array.from(set)
console.log(arr2) //[1,2,3,4,5]
console.log(arr3) //[1,2,3,4,5]
8.Promise链。给你两个异步任务,你要在两个异步任务完成之后,在控制台打印出finished。
const p = Promise.all([p1, p2])
p.then(function() {
  console.log('finished')
})
9.写个函数,参数为n和value,需要返回一个长度为n的数组,里面每个元素都是value,不能使用循环。
function fn(n, value) {
    return new Array(n).fill(value)
}
10.你是如何去学习前端的?你从什么时候开始学习前端的?

楼主觉得“你从什么时候开始学习前端的?”是最难答得问题,

因为你回答的学习久,会让人觉得你学习能力不行,答得学习得比较晚,会让面试官觉得你的深度不行,不稳。

11.经常会逛哪些社区?

只回答了国内的知乎、博客园、牛客网。。。。。

12.git和svn的区别。
git的使用不需要联机

SVN集中式版本控制:每个人的版本都是提交到服务器,服务器坏了就雪崩。
git分布式版本控制: 安全,每人本地有个版本库,每个人都可以充当‘服务器
它的使用流程不需要联机,可以先将对代码的修改,保存在本机。等上网之后,再实时推送过去。

提交代码,查看日志,推送具有闪电般的速度

git提交是个本地操作,相对svn闪电一般。

本地包含了完整的日志,无需网络

git向远程服务器推送提交内容相比svn更快

每个git存储库只有一个git目录

和 SVN不同,一个Git项目一般只在项目的根目录下建一个“.git”目录,而SVN则会在项目的每一个目录下建一个”.svn”目录

git项目移植更方便

Git把所有的历史提交信息全部存储在“Git目录”里,它就是一个Git项目的仓库;你对本地的源代码进行编辑修改后创建的提交也都会先保存在这里面,然后再推送到远端的服务器。当我们我把项目目录和“Git目录”一起拷到其它电脑里,它能马上正常的工作(所有的提交信息全都保存在Git目录里);甚至可以只把“Git目录”拷走也行,但是要再签出(checkout)一次。

git支持tag属性

svn在模型上是没有分支和tag的。tag是通过目录权限限制(对开发只读)来保证不变。

git模型上支持tag,保证只读。

合并对提交过程的保留

git:合并操作保留原有的提交过程(即保留了合并来源的作者、提交次数、分离提交的内容)。

svn:合并操作把来源多个提交合并成了一个合并提交,即在提交历史中Crash了自然的提交过程。

更强大智能的合并能力

git:重命名(无论文件还有目录)提交 , 可以合并上文件重命名前的这些文件的提交。

svn:重命名(无论文件还有目录)提交后,你本地/或是分支上 有文件重命名前的这些文件的修改或提交,在做合并操作时,恭喜,你会碰上传说中难搞的树冲突!

因为惧怕svn树冲突,在包名调整(重命名目录)或类名调整(重命名文件)前,我不得不先向一起开发的组员广播:

提交你的修改
暂停相关类的修改
我开始做调整
等我修改好后,你再开始修改

廉价好用的本地分支

git:有本地分支

svn:无本地分支

git可以方便创建本地分支,且创建分支的时间是O(1),即瞬间就创建好了。由于分支可以是本地的,也就不存在svn目录权限的问题。

git能保证数据的完整性

git中所有数据在存储前都计算校验和,然后以校验来引用,所以你在传输中丢失文件,git都知道。具备断点续传功能。

缺点

(1)git的入门,稍微有点麻烦,需要在本机创建一个ssh的钥匙。

(2)图形化操作界面不及svn那么好用

git和github的关系

git是一个非常强大的版本管理工具。github则是一个基于git的日益流行的开源项目托管库。

Git把所有的历史提交信息全部存储在“Git目录”里,它就是一个Git项目的仓库;你对本地的源代码进行编辑修改后创建的提交也都会先保存在这里面,然后再推送到远端的服务器。当我们我把项目目录和“Git目录”一起拷到其它电脑里,它能马上正常的工作(所有的提交信息全都保存在Git目录里);甚至可以只把“Git目录”拷走也行,但是要再签出(checkout)一次。

上一篇下一篇

猜你喜欢

热点阅读