您的位置：首页 > 职场人生

#第一站#阿里巴巴前端面试总结-死于一面（2014-9-17）

2014-09-18 14:17 267 查看

#写给自己的话#是时候记录大四这上半年来找工作的各种经历，在挫败中不断认清自己的缺点和不足，然后不断的改进与超越，让一路走过来的我有个回忆和感慨！昨天是我的第一次大型企业的面试，虽然终结在一面，无缘玉伯，但还是感谢有这一次的机会，让我深刻的强烈的意识到，学不好js，别想在前端混。

阿里的面试官真的和传说中的那样温柔和气，你一点都不会感到有压力，前半部涉及到html/html5、css/css3的时候回答的都好好的，可是后半部到原生的js和jquery时几乎都答不上来，最终还是死在js上，加油，干掉它！通过这次的面试总结了几个回答不好的问题:

<1>背景透明度为60%的解决方法

{想起自己的回答，想死的心都有了，opacity和filter的数字搞混淆了，切记，opacity：0.6；filter：alpha（opacity=60）；}

回来赶紧的补补，不过css不透明的主要问题是，除了对背景生效以外，应用它的元素的内容也会继承它，而rgba和hsla就是为了解决这个问题而出现的。

.div1{
background-color:rgb(34, 73, 233);
opacity: 0.6;/*<=ie8的不支持，而且切记是0-1之间，不是百分比*/
filter:alpha(opacity=60);/*ie低版本的*/
}

<2>两栏布局，左栏200px，右栏自适应

{当时只想到到一种，而忘了用绝对定位，真是败给自己了}

第一种用绝对定位的方法：

<style type="text/css">
body{
padding: 0;
margin: 0;
}
.nav{
width: 200px;
height: 600px;
position: absolute;
left: 0;
top: 0;
background-color: #ddd;
}
.main{
margin-left: 200px;
height: 600px;
background-color:#333;
color: #fff;
}
</style>
</head>
<body>
<div class="nav">左栏固定200px</div>
<div class="main">右栏自适应</div>
</body>

但是这种方法的唯一缺陷是当左栏的高度大于右栏，而且下面有个footer时，由于绝对定位会脱离正常文档流，所以左栏会覆盖掉底部的内容，因此这种方法只适合两栏布局，而且底部没有其他内容！

第二种是使用负margin的方法，也解决了上面出现的问题：

<style type="text/css">
body{
padding: 0;
margin: 0;
}
.content{
margin-left: 200px;
_zoom:1;/*防止ie6及以下左栏消失*/
}
.nav{
width: 200px;
height: 400px;
float: left;
margin-left: -200px;
background-color: #ddd;
position: relative;/*防止ie6及以下左栏消失*/
}
.main{
height: 600px;
background-color: #ccc;
}
.footer{
clear: both;
width: 100%;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<div class="content">
<div class="nav">左栏固定200px</div>
<div class="main">右栏自适应</div>
</div>
<div class="footer">底部内容</div>

这种方法的思路主要是利用外层content的margin-left：200px使内容宽度少了200px，以致左侧的内容用margin-left：-200px去填补。

<3>盒模型的宽度计算，说真的这个都答不好真的无脸说自己是学前端的，错误的理解成背景色的延伸处。

####宽度计算

ie6以上及其他浏览器的盒模型计算方式：margin+padding+border+width；

而ie6及以下的定义的width属性不是内容的宽度，而是包括内容+padding+border之和，所以定宽width以后，padding或者border越大，留给内容的空间就越小，为了避免这种情况，最好的方法是不要给元素添加具有指定宽度的内边距，而是尝试将内边距或外边距添加到父元素或是子元素上。

####背景色的延伸，在我之前的文章《关于盒子的背景色》上有出现过，地址：关于盒子的背景色。

<4>图片响应式

参考了不少的文章，还是觉得taobaoUED分享的这篇文章最好了，地址：css3与html5响应式图片

<5>其他的都是javascript和jquery相关的问题，没能答上，现在赶紧补补。。。加油，女孩子也可以学好编程的，不要怕！

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： web前端阿里巴巴面试

相关文章推荐

新的分享

章节导航