浮动元素面试题WEB前端开发

最新推荐文章于 2022-04-25 19:54:08 发布

xsh118

最新推荐文章于 2022-04-25 19:54:08 发布

阅读量173

点赞数

文章标签： title margin 在此

这道题是阿里巴巴的WEB前端开收面试题，主要观察的是浮动布局以及IE6的3像素兼容问题

今天给班里孩子们出这道题，孩子们有点想疯的欲望，自己还是写一下吧

想实现的效果图如下

<!DOCTYPE HTML>
<html>
	<hdnfead>
		<meta charset="UTF-8">
		<title>浮动元素 面试题 WEB前端开收</title>
		<meta author='独行冰海' />
		<link rel="stylesheet" type="text/css" href="reset.css">
		<style>
			div{background:#fcc;}
			.first{float:left;width:100px; height:150px}/*第一个块收生浮动*/
			.second{clear:left;float:left;margin-top:10px;width:100px;height:150px}/*第二个块先清除浮动再收生浮动*/
			.third{zoom:1; width:200px;height:310px;margin-left:110px;_margin-left:107px; }
		</style>
	</head>
	<body>
		<div class="first">1</div>
		<div class="second">2</div>
		<div class="third">3</div>
	</body>
</html>