10月31号面试问题

1、如何让几个block元素在同一行垂直居中对齐（尽可能说出更多的方法）

第一种：flex布局实现
首先为这几个block元素添加一个父元素<div class="parent"></div>

.parent {
   display: flex;
   justify-content: center;
   align-content: center;
   flex-wrap: nowrap;
}

效果查看：http://js.jirengu.com/zitaletecu/21/edit

第二种：table
与上一个类似也会为几个block元素添加一个父元素：

<div class="parent">
  <div class="child">1</div>
  <div class="child">2</div>
  <div class="child">3</div>
</div>

.parent {
  text-align: center;   //水平居中
  display: table-cell;
  vertical-align: middle;  //垂直居中
}
.child {
  display: inline-block;   //防止块级元素独占一行
}

效果查看：http://js.jirengu.com/zitaletecu/17/edit

第三种：absolute+transform 水平垂直居中
还是同样的为这几个块级元素加一个父元素

<div class="parent">
  <div class="child child1">1</div>
  <div class="child child2">2</div>
</div>

<style>
.parent {
  position: relative;
  height: 100px;
  border: 1px solid red;
}
.child {
  position: absolute;
  padding: 10px;
  background: blue;
}
.child1 {
  left:33.33%;
  top: 50%;
  transform: translate(-50%,-50%)
}
.child2 {
  left: 66.67%;
  top: 50%;
  transform: translate(-50%,-50%)
}
</style>

效果查看：http://js.jirengu.com/zitaletecu/15/edit
附上之前写过的一篇博客：http://www.jianshu.com/p/0fc76e1b1558

2.如何阻止事件的冒泡？jQuery中on方法和delegate方法的区别

阻止事件的冒泡：在DOM的事件模型中，事件分为捕获阶段和冒泡阶段，事件冒泡阶段是事件已经到达了具体的元素，然后逐渐向上传播，到达不具体的元素，阻止冒泡：event.stopPropagation()

jQuery中on方法是对选中的元素直接绑定事件，常见用法如下(以点击事件为例)

$('xxx').on('click',function(){
   xxxx
})

delegate() 方法为指定的元素（属于被选元素的子元素）绑定事件，处理的是子元素上的事件效果，用法如下：

$("parent").delegate("child","click",function(){
   xxxx
});

写了一个demo：http://js.jirengu.com/ducuwicixi/3/edit
多用于当前或未来的元素（比如由脚本创建的新元素）

3、父元素 `div{display:flex; position:relative}` ,子元素`div {float:right; position:absolute; top:8px}`，子元素表现形式如何，为什么？

表现形式：子元素的位于父元素的左侧、顶部下面8px处。
参考demo：http://js.jirengu.com/gahoserequ/4/edit

分析：在子元素中定义了绝对定位position:absolute会让向右浮动float:right这一特性失效，同时父元素是相对定位的position:relative，所有子元素相对于父元素top:8px会位于父元素顶部下面8px。

4、bootstrap弹性布局的原理

实现原理：利用媒体查询(media query)来创建关键的分界点的阈值，针对不同设备的宽度来调整栅格系统中的行和列的组合，下面我依据bootstrap原理来写了一个弹性布局的demo:
预览：http://www.guohezu.me/CSS/Grid.html (请调整页面宽度查看效果)

PC (min-width:1200px):

pc.png

pad: (min-width: 992px)

pad.png

phone:

phone.png

实现源码：https://github.com/joinmouse/CSS/blob/master/Grid.html

5、正则表达式/(W{1,2}面积.*?(\d+)平方米)/的含义是什么？

根据这个正则表达式的条件推测应该是匹配：xx面积yy(y为数字)平方米，这边不太确定业务逻辑，推测应该是爬虫过滤数据用的，chrome测试如下：

match.png

6、最近解决的技术问题

利用webpack的实现了js部分的实现代码模块化打包：将原来的一个js文件中比较混乱的代码，分为了5个逻辑清晰的js代码块文件，最后再用webpack打包后形成一个js文件，然后引入页面。
项目地址：https://github.com/joinmouse/movie-douban

10月31号面试问题