网页的盒子模型 

<head>
<style type="text/css">

/*
    盒子模型: 盒子模型就是把一个html边框比作成了一个盒子的边框，盒子模型要做用于操作数据与边框之间的距离或者 是边框与边框之间的距离。
    
    
    盒子模型主要是用于操作内边距(padding)与外边距（margin）
    
*/    
    div{
        border-style:solid;
        width:100px;
        height:100px;
        /* 内边距 */
        padding-left:10px; //设置内边距的左半部分的宽度
        padding-top:20px;        
    }
    
    .one{
        margin-bottom:30px; //设置外边距的底部的宽度
    } 


    .two{
        margin-left:700px;
    }



</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
    <div class="one">
        这个是一个div
    </div>
    
    <div class="two">
        这个是二个div
    </div>
</body>
</html>

 

 

posted @ 2017-02-25 13:38  mslog  阅读(225)  评论(0)  编辑  收藏  举报