css-盒子模型

css的盒子模型

　　** 在进行布局前需要把数据封装到一块一块的区域内（div）

　　（1）边框

　　border:2px solid blue;
　　border：统一设置
　　上：border-top
　　下：border-bottom
　　左：border-left
　　右：border-right

<html>
    <head>
        <title>World</title>
        <style type="text/css">        
            div {
                border:2px solid blue;
                width:200px;
                height:100px;
            }
            #div12 {
                border-right:10px dashed orange;
            }
        </style>
    </head>
    <body>
        
        <div id="div11">AAAAAAAAAAA</div>
        <div id="div12">BBBBBBBBBBB</div>
        <div id="div13">CCCCCCCCCCC</div>
    </body>
</html>

　　效果如下：

（2）内边距
　　padding:20px;
　　padding：统一设置
　　上：padding-top
　　下：paddingr-bottom
　　左：padding-left
　　右：padding-right
　　上下左右四个内边距

<html>
    <head>
        <title>World</title>
        <style type="text/css">            
            div {
                border:2px solid blue;
                width:200px;
                height:100px;
            }

            #div12 {
                padding:20px;
            }
            #div13 {
                padding-left:50px;
            }
        </style>
    </head>
    <body>
        <div id="div11">AAAAAAAAAAA</div>
        <div id="div12">BBBBBBBBBBBBBBBBBBBBBBBBb</div>
        <div id="div13">CCCCCCCCCCC</div>
    </body>
</html>

　　效果如下：

　　（3）外边距
　　margin:20px;
　　margin：统一设置
　　上：margin-top
　　下：margin-bottom
　　左：margin-left
　　右：margin-right
　　上下左右四个外边距

<html>
    <head>
        <title>World</title>
        <style type="text/css">    
            div {
                border:2px solid blue;
                width:200px;
                height:100px;
            }
            #div12 {
                margin:30px;
            }
            #div13 {
                margin-left:30px;
            }
        </style>
    </head>
    <body>
        <div id="div11">AAAAAAAAAAA</div>
        <div id="div12">BBBBBBBBBBB</div>
        <div id="div13">CCCCCCCCCCC</div>
    </body>
</html>

　　效果如下：