盒模型之margin讲解

  • 924

盒模型之margin讲解

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    
    <title>盒模型之margin讲解</title>
    <meta http-equiv="Conrent-type" content="text/html;charset=gbk">
<meta name="description" content="实战首页布局">
    
    <style>
          #content{
           width:1000px;
height:600px;
background:green;
}
 div{
           width:400px;
                    height:200px;
                    background:blue;
                    float:left;
}
 #test{
     /*
 margin:10px;
 */
 /*
 margin-top:10px;
 margin-right:20px;
 margin-bottom:30px;
 margin-left:40px;
 */
 /*
 margin:10px 20px;
 */
 margin:10px 20px 30px 40px;
 background:red;
 }
 #test2{
    background:orange;
 
 
 }
 #test3{
    width:1000px;
    background:blue;
 
 }   
</style>
         
</head>
      <body>
         <div id="content">
     <div id="test"></div>
     <div id="test2"></div>
     <div id="test3"></div>
               </div>
     
     </body>
</html>

 

weinxin
我的微信
这是我的微信扫一扫
开拓者博主
  • 本文由 发表于 2016年6月3日21:49:04
  • 转载请务必保留本文链接:https://www.150643.com/32.html
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: