使用纯css代码实现div的“回”字型“叠放”效果

时间 2019-11-13

标签使用 css 代码实现 div 字型效果栏目 CSS 繁體版

原文原文链接

正如你们所知道的那样，div是一个块级元素，也是网页编写过程当中使用频率最高的一个元素，经过不一样的样式控制能够实现一些最多见的页面效果，固然也能够实现一些比较复杂的页面效果，这里就展现一个本人面试过程当中遇到的一个问题，如何使用最简单css样式经过div实现“回”字型图样？父类div必须设置的属性是什么？固然实现方法不少不少，下面就和你们分享一下我本身的方法（兼容Trident,Gecko,Presto,WebKit等内核浏览器），先看效果：css

再看详细的代码：html

<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>

面试