浅析阿里巴巴前端招聘考题
作者：zbm2001z 来源：蓝色理想 时间：2008-01-19 09:52:00
1.用CSS实现布局
让我们一起来做一个页面，首先，我们需要一个布局。
请使用CSS控制3个div，实现如下图的布局。
考察应试者的基本布局知识——浮动或绝对定位（显然，后者在流体布局各区块自适应内容高度的情况下并不适用）。
这里给一个通常的布局方案：
<style type="text/css">
div{background:#ccc;}
h2{margin:0;}
#firstly{
float:left;
width:200px;
}
#secondly{
clear:left;
float:left;
margin-top:10px;
width:200px;
}
#thirdly{
margin-left:210px;
}
</style>
<div id="firstly"></div>
<div id="secondly"></div>
<div id="thirdly"></div>
然而在IE6-中，当：
<style type="text/css">
div{background:#ccc;}
h2{margin:0;}
#firstly{
float:left;
width:200px;
}
#secondly{
clear:left;
float:left;
margin-top:10px;
width:200px;
}
#thirdly{
margin-left:210px;
width:400px; /* 然而在IE6-中，当width设定为除auto（默认值）以外的值时，触发Layout特性，会整体向右产生3像素偏移bug */
}
</style>
<div id="firstly"></div>
<div id="secondly"></div>
<div id="thirdly"></div>
或是：
<style type="text/css">
div{background:#ccc;}
h2{margin:0;}
#firstly{
float:left;
width:200px;
}
#secondly{
clear:left;
float:left;
margin-top:10px;
width:200px;
}
#thirdly{
margin-left:210px;
height:200px; /* 然而在IE6-中，当height设定为除auto（默认值）以外的值时，触发Layout特性，左边缘会向右产生3像素偏移bug */
}
</style>
<div id="firstly"></div>
<div id="secondly"></div>
<div id="thirdly"></div>
最终调整为一个比较健壮的流体布局方案：
<style type="text/css">
div{background:#ccc;}
h2{margin:0;}
#firstly{
float:left;
width:200px;
}
#secondly{
clear:left;
float:left;
margin-top:10px;
width:200px;
}
#thirdly{
-zoom:1; /* 在IE6-中，初始化触发Layout */
margin-left:210px;
-margin-left:207px; /* 修正IE6-中触发Layout后3像素偏移bug */
}
</style>
<div id="firstly"></div>
<div id="secondly"></div>
<div id="thirdly"></div>
标签：阿里巴巴,招聘,css,javascript,布局
0
投稿猜你喜欢
SQL Server如何插入数据示例代码
2024-01-13 16:42:33
javascript中传统事件与现代事件
2024-04-10 11:02:57
pycharm无法安装第三方库的问题及解决方法以scrapy为例(图解)
2022-11-01 20:53:28
python 并发编程 非阻塞IO模型原理解析
2022-03-11 06:55:54
python防止栈溢出的实例讲解
2022-07-31 17:17:15
Python设计模式之单例模式实例
2023-06-02 12:43:02
基于域名的方式访问Istio服务网格中的多个应用程序的方法详解
2022-04-07 11:39:56
SQL Server使用T-SQL进阶之公用表表达式(CTE)
2024-01-17 22:42:32
Perl中的10个操作日期和时间的CPAN模块介绍
2023-07-27 10:04:41
三行代码使用Python将视频转Gif的方法示例
2021-02-28 13:53:39
分享JavaScript 中的几种继承方式
2024-06-18 03:47:10
Python 静态方法和类方法实例分析
2021-07-08 19:25:37
巧妙的Sql函数日期处理方法
2009-05-25 17:59:00
解决Tensorflow 使用时cpu编译不支持警告的问题
2023-12-30 07:28:01
SQL实战演练之网上商城数据库用户信息数据操作
2024-01-15 10:26:39
Python实现读取大量Excel文件并跨文件批量计算平均值
2023-10-21 06:53:12
TensorFlow的reshape操作 tf.reshape的实现
2022-03-31 01:14:13
vue项目中常用解决跨域的方法总结(CORS和Proxy)
2024-04-28 09:33:05
在tensorflow中实现屏蔽输出的log信息
2023-02-27 17:41:21
Python动态强类型解释型语言原理解析
2021-12-24 08:09:27