您的位置：首页 > Web前端 > CSS

CSS盒子模型

2015-07-26 17:12 561 查看

CSS 框模型 (Box Model) 规定了元素框处理元素内容、内边距、边框和外边距的方式。

HTML代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>盒子模型的应用</title>
    <link href="mycss.css" type="text/css" rel="stylesheet">
</head>
<body>
     <div class = "top">
         <div class = "top_center">
             </div>
     </div>
<div class="body">
    <div class = "body_image"></div>
    <div class = "body_title"></div>
    <div class = "body_content"></div>

</div>

</body>
</html>

CSS代码如下：

*{
    margin: 0px;
    padding: 0px;
}
.top{
    width: 100%;
    height: 50px;
    background-color: black;
}
.top_center{
    width: 75%;
    height: 45px;
    margin-top: 0px;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 0px;
    background-color: darkgray;
}
.body{

    margin: 20px auto;
    width: 75%;
    height: 1000px;
    background-color: aqua;
}
.body_image{
    margin: 10px auto;
    width: 75%;
    height: 400px;
    background-color: blue;
}
.body_title{
    margin:10px auto;
    width: 75%;
    height: 200px;
    background-color: cadetblue;
}
.body_content{
    margin: 10px auto;
    width: 75%;
    height: 350px;
    background-color: darkcyan;
}

效果如下：
http://localhost:63342/page/Pagemodel.html
点击链接即可查看

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航