第八篇、盒子模型和距中的设置方法

<!--
    1.外边距 margin
    2.边框 border solid(线的类型) 
    --border-width 
    --border-style
    --border-color
    3.内边距 padding（四个值（上右下左） 三个值（上 左右 下）两个值（上下 左右））
    4.content（内容）
    
    IE浏览器的适配很麻烦
    
    居中：
        margin:0px auto;
        text-align:center;
        line-height:0px;
    
-->
<html>
    <head>
        <meta charset="UTF-8">
        <title>盒子模型</title>
        
        <style>
            div{
                background-color:red;
                width:500px;
                height:40px;
                margin:15px;
                padding:15px;
                overflow:auto;
                border:10px solid green;
            }
            
            .test1{
                
            }
            span{
                background-color:purple;
                margin:0px auto;
            }
        </style>
    </head>
    <body>
        <div>22222222222222222222222222222222222</div>
        
        <div class="test1">
            <span>22222222222222222</span>
        </div>
    </body>
</html>
posted on 2016-09-02 09:58 久冬不雨阅读(273) 评论(0) 收藏举报