使用純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>

面試