使用纯css代码实现div的“回”字型“叠放”效果
正如大家所知道的那样，div是一个块级元素，也是网页编写过程中使用频率最高的一个元素，通过不同的样式控制可以实现一些最常见的页面效果，当然也可以实现一些比较复杂的页面效果，这里就展示一个本人面试过程中遇到的一个问题，如何使用最简单css样式通过div实现“回”字型图样？父类div必须设置的属性是什么？当然实现方法很多很多，下面就和大家分享一下我自己的方法（兼容Trident,Gecko,Presto,WebKit等内核浏览器），先看效果：
再看详细的代码：
<html>
<head>
<title>Test</title>
<style type="text/css">
#bigcontent {
width: 400px;
height: 400px;
margin: 50px 0 0 50px;
position: absolute;
background: yellow;
text-align: center;//这个是父类元素必须设置的样式，目的是让所有子元素都水平居中摆放
}
#precontent {
width: 350px;
height: 350px;
margin-top: 30px;
display: inline-block;//这个是子元素必须设置的样式，否则其他浏览器不兼容
background: blue;
}
#middlecontent {
width: 300px;
height: 300px;
background: red;
margin-top: 25px;
display: inline-block;
}
#premidcontent{
width: 250px;
height: 250px;
display: inline-block;
background: lime;
margin-top: 25px;
}
#smallcontent {
width: 200px;
height: 200px;
display: inline-block;
background: green;
margin-top: 25px;
}
#finalcontent{
width: 150px;
height: 150px;
display: inline-block;
background:orange;
margin-top: 25px;
text-align: center;
}
</style>
</head>
<body>
<div id="bigcontent">
<div id="precontent">
<div id="middlecontent">
<div id="premidcontent">
<div id="smallcontent">
<div id="finalcontent">
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
