酷家乐二面准备

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)一次。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 217,185评论 6 503
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,652评论 3 393
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 163,524评论 0 353
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,339评论 1 293
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,387评论 6 391
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,287评论 1 301
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,130评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,985评论 0 275
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,420评论 1 313
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,617评论 3 334
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,779评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,477评论 5 345
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,088评论 3 328
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,716评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,857评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,876评论 2 370
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,700评论 2 354

推荐阅读更多精彩内容