听了这么多年的播客,终于也做了一回嘉宾

(图片来源:http://teahour.fm)

2017年10月31日,星期二,下午2点,如约接到了国内某容器云公司的电话面试。

电话是从北京打过来的(我是在南京),刚接到电话,我深吸了一口气,安慰自己要放松,之后按下了接通键。

首先,跟面试官简单介绍了一下自己,然后又问我以前做过什么东西没有,我回答道,之前跟着老师做过项目,也和同学接过私活做过。(刚开始的时候,有点紧张,并且还有点害羞😳,语速也有点快)

接着,又让我具体说一下自己参加过的某一个项目,我就开始介绍我去年和同学做的银团的项目,之后,后面的一系列技术相关的问题就开始了(说实话,这里我就开始有点慌了,主要是没有电话面试的经历,心里想,大牛别问太深的问题啊,我是小白)。

  • 整个项目采用了哪些技术,用了什么架构?
    我说前端我们使用了mui,后端我们用了PHP的Laravel框架,架构的话,一开始讨论是Restful Service和MVC,最后用了MVC。

  • 介绍一下什么是MVC?
    M:Model,主要是数据库方面的封装,把数据表映射成可操作的数据对象。
    V:View,就是用户看到的视图层,负责用户的前端操作。
    C:Controller,控制器层,负责处理前端发送过来的http请求。
    整个流程:用户在View层进行操作,发送http请求给后台,后台Controller层收到请求,然后再从Model层进行数据的操作,之后返回给Controller,Controller再对数据处理后,最后返回数据给View层。

  • 谈到MySQL数据库,数据库方面的优化有哪些?
    缓存,SQL语句方面的优化,多表链接查询优化(自己对数据库方面的知识掌握还是比较薄弱的,这里没有答好)

  • 又谈到了聊天功能,这里用到了哪些技术?
    我说用到了WebSocket,接下来好几个问题就都是围绕websocket来的,自己也没有深入了解过,感觉回答的很烂。

// 此处略过n个问题

面试快到最后,面试官给我出了一道题,第一遍没有听清楚,然后让面试官又重复了一遍,题目大概是这样的(具体的记得不太清楚了):有一个集合,里面有一百万个自然数,如何快速判断集合内的数在一百万以内。

由于全场每根神经都是紧绷的,我急于给出答案,没有做太多思考,答得很糟。第一次回答是用取模的方法,每十个数分别取余(不知道当时怎么想的,居然就这么回答了);第二次,我说先对集合排序,再做二分查找,面试官也不是很满意。

最后,面试官说他没有什么问题了,问我有没有其他问题。我接连提了两个问题后,整个面试愉快的技术了。

整个电话面试持续了将近半个小时,面试官是一直在提问,而且每个问题都跟我做的项目相关,本来还以为会问我一些容器云相关的问题,结果只字未提。

这次面试,短短三十分钟,感觉自己做了一回播客节目的嘉宾(假装大佬😂),主持人就是面试官,但气氛却没有播客中那么轻松。整个面试下来发现了自己的短板,技术不够扎实,浮于表面,还是太过浮躁了。

万圣节快乐(图片来源:bing)

最后,想起来快万圣节了,所以祝大家节日快乐。

CSS3中的box-sizing属性

box-sizing属性是css3中新添加的属性,用来替换原来的css盒子模型,box-sizing属性值的不同,元素的高度和宽度的计算方法也不同。

1
2
3
4
/* box-sizing的三个属性值,我们只针对前两个说明 */
box-sizing: content-box;
box-sizing: border-box;
box-sizing: padding-box;

在默认情况下,设置的widthheight属性都是指元素内容(content box)的高度和宽度,如果这个元素设置了borderpadding的话,那么整个元素的高度和宽度就是:

1
2
totalWidth = border-left + padding-left + width + padding-right + border-right
totalHeight = border-top + padding-top + height + padding-bottom + border-bottom

所以,这个在做相应式设计的时候还是比较复杂的,现在,有了box-sizing属性,就可以根据不同的属性值计算元素的高度和宽度。

  • content-box:这是默认情况,根据这个属性值的名字也能大概猜出会是什么情况,整个元素的高度和宽度其实就是上面的两个公式
  • border-box:这种情况下,你设置的widthheight属性值就是针对整个元素,包括了border,padding,和元素内容。

简单的例子

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
.box {
width: 150px;
height: 150px;
padding: 50px;
border: 5px solid blue;
background-color: orange;
}
.box1 {
box-sizing: content-box;
}
.box2 {
box-sizing: border-box;
}
HTML
1
2
3
4
5
6
<div class="box box1">
content-box
</div>
<div class="box box2">
border-box
</div>

代码中,我们对两个div设置了相同的height、width、border和padding,可是现实效果却完全不同:

demo

我们仔细分析下,两个div不同的地方在于box-sizing属性,第一个是content-box,第二个是border-box,针对第一个div,

第一个div

我们发现,整个元素的高度和宽度是260x260,而元素的内容的高度和宽度是150x150,正好是我们想要的,对于260这个大小是怎么来的,我们不妨计算一下:

1
2
5+50+150+50+5=260  // 高度
5+50+150+50+5=260 // 宽度

正好是260,符合最上面的两个公式,所以最后元素的尺寸是260x260,并不是我们设置的150x150

对于第二个div:

第二个div

很明显可以看到,第二个div里面的内容已经被挤了换行了,这个div的真实的高度和宽度和我们设置的一样,可以它的内容部分的尺寸只有40x40,远小于150,可以看到,这就是content-boxborder-box的区别了,再来计算一下:

1
2
150 = 5+50+40+50+5 // 高度
150 = 5+50+40+50+5 // 宽度

可知,整个元素的高度其实是包括了border、padding和内容的高度,宽度也是如此。

浏览器的兼容性

  • 桌面端

  • 手机端

可以看到,不管是手机端还是桌面端大部分都是不支持padding-box的,所以建议实际开发中避免使用padding-box

跟多详细内容请参考:https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing

博客迁移到Github啦^ _ ^

新的博客,新的起点,新的征程

博客地址先甩上来:http://xydida.com

echo "Welcome to my Blog"

先说明一下,由于博客之前一直是放在OpenShift上面的,不过由于OpenShift最近更新了V3版本,这个版本的更新还挺大的,已经完全是一个容器云服务的平台,但感觉在上面搭一个wordpress比较麻烦,而且受限于国内的网络,之前早就想换到GitHub了,正好趁此机会,尝试一下Hexo,哈哈😄。下图是最新版本的OpenShift的控制台:

openshift-manager
由于之前博客上并没有写多少有深度的文章,我也就没有备份,以后将会多输出优质文章,记录生活点滴。