css盒子模型的简单应用

来源：互联网发布：js中引用java变量编辑：程序博客网时间：2024/05/21 17:17

以某个网站的总体框架为例，学习css盒子模型的思想，可以为以后我们进行网站框架构思的时候提供帮助。

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="heading">    <div class="heading_content"></div></div><div class="body">    <div class="body_image"></div>    <div class="body_notice"></div>    <div class="boty_content"></div></div><div class="footing">    <div class="footing_guide"></div>    <div class="footing_reference"></div></div></body></html>

css代码：注意margin属性设置为auto自动，这样系统自动的为块分配在最适合界面的中间位置

*{    margin: 0px;    padding: 0px;}.heading{    width: 100%;    height: 50px;    background-color: black;}.heading_content{    width: 75%;    height: 50px;    background-color: blue;    margin: auto;}.body{    width: 75%;    margin: 20px auto;    background-color: aqua;    height: 400px;}.body_image{    width: 100%;    height: 100px;    background-color: aliceblue;}.body_notice{width: 100%;    height: 50px;    background-color: yellow;}.boty_content{width: 100%;    height: 250px;    background-color: chocolate;}.footing{    width: 75%;    height: 200px;    margin: 20px auto;    background-color: brown;}.footing_guide{    width: 100%;    height: 130px;    background-color: dimgray;}.footing_reference{width: 100%;    height: 70px;    background-color: black;}

盒子模型：

0 0