请高手帮我用HTML写一个盒子模型图出来！
DIV不要用绝对定位！样式解析写详细点！
<html>
<head>
<title></title>
<style type="text/css">
<!--
#div {
background-color:#CCCCCC; /*这是div背景色！可以不要~这里仅便于你区别消薯*/
margin-top: 20px; /*div离页面面顶部的距离为20像素*/
margin-left: 50px; /*div离页面面左端的距离为50像素*/
/*这里若设置了顶部和左部就不用设置右和下了~因为2个位置就能把div定位
margin-right: 30px;
margin-bottom: 40px; */
border:#0099FF 10px solid; /*div边框为10像素*/
padding-top: 20px; /*内容与div边框顶部的距离为20像素！这里“内容”的位置=20+10+20的像素*/
padding-left: 90px; /*内容与div边框左边的距亏型离为90像素！这里“内容”的位置=50+10+90的像素*/
padding-right: 30px; /*同上*/
padding-bottom: 50px; /*同上*/
}
-->
</style>
</head>
<body>
<div id="div">此处显销桥猜示 id "div" 的内容这些内容！其实是显示在div的center里！是个隐藏的框框~需要去理解</div>
</body>
</html>
网页盒子模型存在两种：
1：标准W3C盒子模型； 2：IE盒子模型（IE浏览器默认的模型）。
在两销芦种不同模型网页里，定义了相同CSS属性的元素显示效果是不一样的，下面就用公式来区分举斗凯这两种不同的盒子模型。
1：标准W3C盒子模型
宽=width+(padding-left)+(padding-right)+(margin-left)+(margin-right)+(border-left)+(border-right)
高=height+(padding-top)+(padding-bottom)+(margin-top)+(margin-bottom)+(border-top)+(border-bottom)
2： IE盒子模型
宽=width+(border-left)+(border-right)
高=height+(border-top)+(border-bottom)
该模型是IE浏览器默认的盒子模型，当然也正唤可以对其进行更改，在页面最上方加如下代码：
1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<style>闹尘肢
#box {height:50px;width:50px;border:1px solid #dedede;}
</style>
<div id="box"></div>
这就是一个宽高50像素,1像素边框的盒液世兄没子了..