div第二课 margin外边框px大小 border边框的设置

<!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>
<title>盒模型</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="布尔教育 http://www.itbool.com" />
<style>
    #container{
        width: 1002px;
        height: 800px;
        background: blue;
    }
    #header{
        height: 100px;
        background: green;
    }
    #main{
        height: 500px;
        background: purple;
    }
    #lside{
        width: 700px;
        background: pink;
    }

    .four{
        width: 300px;
        height: 200px;
        background: black;
        float: left;

//margin设置外边框大小

        margin: 10px;
    }

    #rside{
        width: 302px;
        background: red;
    }
    #footer{
        height: 200px;
    }
</style>
</head>
    <body>
        <div id="container">
        <div id="header"></div>
        <div id="main">
        <div id="lside">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
        <div id="rside"></div>        
        </div>
        <div id="footer"></div>
            
        </div>
    </body>
</html>



border边框设置:

<!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>
<title>新建网页</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="布尔教育 http://www.itbool.com" />
<style>
    #container{
        width: 800px;
        background: black;
    }
    #header{
        width: 300px;
        height: 300px;
        background: blue;
        border: 20px rdige green;
        /*border 边框 solid 实线  背景绿色*/
    }
</style>
</head>
    <body>
        <div id="container">
            border三要素  宽,形状,颜色 ,画一个三角形
            <div id="header"></div>
            <div id="main"></div>
            <div id="footer"></div>
        </div>
    </body>
</html>

你可能感兴趣的:(div第二课 margin外边框px大小 border边框的设置)