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

最新推荐文章于 2024-07-23 17:34:00 发布

hoyin_wong

最新推荐文章于 2024-07-23 17:34:00 发布

阅读量1.3k

点赞数

分类专栏：面试文章标签： web前端阿里巴巴面试

本文链接：https://blog.csdn.net/why_fly/article/details/39371431

版权

面试专栏收录该内容

3 篇文章 0 订阅

订阅专栏

#写给自己的话#是时候记录大四这上半年来找工作的各种经历，在挫败中不断认清自己的缺点和不足，然后不断的改进与超越，让一路走过来的我有个回忆和感慨！昨天是我的第一次大型企业的面试，虽然终结在一面，无缘玉伯，但还是感谢有这一次的机会，让我深刻的强烈的意识到，学不好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相关的问题，没能答上，现在赶紧补补。。。加油，女孩子也可以学好编程的，不要怕！