面试经过
今天去了某家面试。之前公司打电话通知面试时，问我：“你简历上写你是xx软件学院的，这是xx大学下设的三本吗？”，我：“……”。
一个大写的服！
去了面试地点，看到会议室里早已坐满大半，还稍有点方。一共两位面试官，一位面技术，一位面……面……不知道怎么形容，面人品？
大家先笔试，7道题，还比较简单。经过前面两次面试的划范围（Excuse me？！），我下笔如有小神，速度答完~
等待面试
然而，之后画风突变……
之前的两次面试，都是我一个人面对面试官，基本上是笔试完直接面试（然后直接走人= =）；而这次是大家笔试之后挨个面试，于是我看到了很多画风诡异的哥们儿：
- 退役小哥
- 淘宝店主
- 培训机构学员*N
- 经理/项目助理*N
面试人品环节，这些哥们儿被问了诸如：“你高中是体育生啊，喜欢运动吗？”、“你之前做经理助理，酒量怎么样啊？”这样的问题。
已方
总之，之前没有被问过非技术问题我，见到这样的style感觉有点新奇。
面试题
面试题比较简单，有七道：
- 写出html的行内元素和块级元素，并说明它们有什么区别。可以对内联元素设置margin和padding吗？
- 如何实现垂直居中
- 什么是优雅降级和渐进增强
- 清除浮动有哪些方式，有什么优缺点
- 写一个函数，返回文件名的类型
- 实现一个可自定义样式的下拉列表的jQuery插件
- 用原生JS实现深拷贝对象的Clone方法
面试题解答
回学校后，我照例整理了面试题，查了查答案。以下答案经网上搜索而来：
- 写出html的行内元素和块级元素，并说明它们有什么区别。可以对内联元素设置margin和padding吗？
行内元素/内联元素(inline element)：a abbr acronym b do big cite code don em font i img input kdb label q s samp select small span strike strong sub sub sup texture tt u var
块元素(block element)：address block quote center dir div dl fieldset form h1/2/3/4/5/6 hr isindex menu noframe noscript ol p pre table ul
可变元素（根据上下文语境决定该元素为块元素或内联元素）：applet button del iframe ins map object script
区别：块元素一般都从新行开始，可以容纳行内元素和其他块元素；没有css作用的情况下，块元素会以每次另起一行的方式一直往下排；内联元素只能容纳文本或其他内联元素。
对内联元素设置margin和padding并不会有效果，因为元素的line-hight并未变化。
- 如何实现垂直居中（以下方法还没来得及测试）
<--! 方法1: 对居中的元素 !-->
.verticle-centered {
position: relative;
top: 50%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
}
<--! 方法2: 对居中的元素的父元素 !-->
.wrapper {
min-height: 10em;
display: table-cell;
vertical-align: middle;
}
- 什么是优雅降级和渐进增强
优雅降级：根据最高级、最完善的浏览器设置网站。一开始就构建站点的完整功能，然后针对浏览器测试和修复。
渐进增强：关注内容本身。一开始只构建站点的最少属性，然后不断针对各浏览器追加功能。
补充——自适应和响应式：自适应布局主要是宽度自适应，后来开始用CSS hack技术适应各种浏览器；放弃hack技术，使用渐进增强的开发方式，就发展成了流式布局。
- 清除浮动有哪些方式，有什么优缺点(详见我的博文)
- 对兄弟元素：直接clear: both;
- 对父子元素：
1. 在子元素最后添加一个HTML节点：
``` html
<div style="clear:both"></div>
```
2. 对父元素使用overflow属性
3.使用:after伪类
4.使用:before :after
- 写一个函数，返回文件名的类型
function getFileType(fileName) {
return fileName.substring(fileName.lastIndexOf('.')+1);
}
- 实现一个可自定义样式的下拉列表的jQuery插件
这道题！答应我！一定要看这个！一定要感谢下原作者！
好吧这道题我不太会，为了加深记忆还是手动敲一遍（Excuse me？！）
<ul class="list">
<li>导航列表1
<ul class="nav">
<li>导航列表1.1</li>
<li>导航列表1.2</li>
<li>导航列表1.3</li>
</ul>
</li>
<li>导航列表2
<ul class="nav">
<li>导航列表2.1</li>
<li>导航列表2.2</li>
<li>导航列表2.3</li>
</ul>
</li>
</ul>
;(function($){
$.extend({
"nav": function(color) {
$('.nav').css({
"list-style" : "none",
"margin" : 0,
"padding" : 0,
"display" : "none",
"color" : color
});
$('.nav').parent().hover(
function() {
$(this).find('.nav').stop().slideDown("down");
}, function() {
$(this).find('.nav').stop().slideUp("normal");
});
}
});
})(jQuery);
- 用原生JS实现深拷贝对象的Clone方法
（……Zzzzzzz，不行太困了，明天早晨面试完再补充）
网友评论