2.3 CSS盒子模型

1. 盒子模型

　　

 

2. CSS边框

　　border-radius 圆角边框

　　box-shadow 边框阴影

 

3. CSS外边距合并

　　

　　遵循 选取两个margin较大的 的原则

 

4. 基本应用

　　

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>盒子模型</title>
    <link rel="stylesheet" type="text/css" href="mycss.css">
</head>
<body>
    <div class="top">
        <div class="top_content"></div>
    </div>
    <div class="body">
        <div class="body_img"></div>
        <div class="body_content"></div>
    </div>
    <div class="footing"></div>
</body>
</html>
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>盒子模型</title>
    <link rel="stylesheet" type="text/css" href="mycss.css">
</head>
<body>
    <div class="top">
        <div class="top_content"></div>
    </div>
    <div class="body">
        <div class="body_img"></div>
        <div class="body_content"></div>
    </div>
    <div class="footing"></div>
</body>
</html>
*{
    /*通配符*/
    margin: 0px;
    padding: 0px;
}
.top{
    width: 100%;
    height: 50px;
    background-color: black;
}
.top_content{
    width: 75%;
    height: 50px;
    margin: 0px auto;
    background-color: blue;
}
.body{
    margin: 10px auto;
    width: 75%;
    height: 500px;
    background-color: blanchedalmond;
}
.body_img{
    width: 100%;
    height: 200px;
    background-color: darkorange;
}
.body_content{
    width: 100%;
    height: 300px;
    background-color: blueviolet;
}
.footing{
    width: 75%;
    height: 110px;
    background-color: indigo;
    margin: 0px auto;
}

 

posted @ 2015-02-10 21:41  Mirrorhanman  阅读(134)  评论(0)  编辑  收藏  举报