div,margin,padding 

<!-- 类比礼品盒里装方块月饼。月饼的食用部分（我们把它称之为月饼肉身）要装在小包装盒里，月饼肉身即为content。月饼肉身与直接包裹它的小包装盒（我们把它叫做月饼的衣服）之间的距离叫padding。其中月饼的衣服厚度叫border。月饼的衣服与月饼礼品盒之间的距离叫margin。-->
<!-- css中的width和height指的是content的宽度和高度 -->

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">    
<html xmlns="http://www.w3.org/1999/xhtml">    
    <head>    
        <meta http-equiv="Content-type" content="text/html; charset=UTF-8" />    
        <style type="text/css">    
            body{    
                margin:0px;    
            }    
    
            .test1{    
                width:150px;    
                height:150px;    
                border:6px solid red;    
            }    
    
            .test2{    
                margin-top:40px;    
                padding-top:40px;    
                width:150px;    
                height:150px;    
                border:6px solid gray;    
            }    
    
            .test2_son{    
                width:80px;    
                height:50px;    
                border:12px solid blue;    
            }    
        </style>    
    </head>    
    <body>    
        <div class="test1">test1</div>    
        <div class="test2">    
            <div class="test2_son">test2_son</div>    
        </div>    
    </body>    
</html>

 

test1
test2_son
posted @ 2017-05-18 01:07  Rainyn  阅读(428)  评论(0)  编辑  收藏  举报