2.3 CSS盒子模型

最新推荐文章于 2023-06-26 17:20:51 发布

HERO_1990

最新推荐文章于 2023-06-26 17:20:51 发布

阅读量82

点赞数

原文链接：http://www.cnblogs.com/iMirror/p/4284973.html

版权

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;
}