盒子模型

最新推荐文章于 2020-09-30 16:53:00 发布

飛￡揚

最新推荐文章于 2020-09-30 16:53:00 发布

阅读量113

点赞数

本文链接：https://blog.csdn.net/feiyangmystyle/article/details/86653972

版权

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>盒子模型</title>
  <style type="text/css">
   *{
    padding: 0px;
    margin: 0px;
   }
   .box{
    height: 100px;
    background: lightblue;
    border: 10px dashed red;
    /*padding内容与边框之间的距离 */
    /*padding: 10px 50px 80px 100px;顺时针旋转*/
    padding: 10px 50px 80px 100px;
    padding-bottom: 80px;
    padding-left: 10px;
    /*margin元素与元素/body之间的距离*/
    /*margin: 10px 50px 80px 100px;顺时针旋转*/
    /*margin: 10px 50px 80px 100px;*/
    /*margin-bottom: 30px;
    margin-top: 50px;
    margin-left: 50px;
    margin-right: 100px;*/
    /*块级元素居中显示*/
    width: 1200px;
    margin: 0px auto;
   }
   .box2{
    height: 100px;
    background: lightcoral;
   }

   .box3{
    background: red;
    /*border-top: 1px solid gold;*/
    /*padding-top: 1px;*/
    padding-top: 30px;
    margin-bottom: 30px;
   }
   .box3-inner{
    width: 200px;
    height: 200px;
    background: green;
    margin-left: 200px;
    /*margin-top: 29px;*/
   }
   .spn{
    background: lightgreen;
    margin-top: 30px;
   }
   .box4{
    height: 100px;
    background: lightblue;
    margin-bottom: 30px;
   }
   .box5{
    height: 80px;
    background: red;
    /*margin-top: 30px;*/
   }
  </style>
</head>
<body>
  <div class="box">asasas</div>
  <div class="box2"></div>
  
  <div class="box3">
   <div class="box3-inner"></div>
  </div>
  
  <span class="spn">我是span</span>
  
  <div class="box4"></div>
  <div class="box5"></div>

</body>
</html>