http://www.blueidea.com/tech/web/2007/4545.asp

代码试验:

html代码:

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<link rel="stylesheet" type="text/css" href="mycss.css">
</head> <body>
<div class="mainBox">
<h3>前言</h3>
<p>正文内容</p>
</div>
<div class="mainBox">
<h3>CSS盒子模式</h3>
<p>正文内容 </p>
</div>
<div class="mainBox">
<h3>转变思想</h3>
<p>正文内容 </p></div>
<div class="mainBox">
<h3>熟悉步骤</h3>
<p>正文内容 </p>
</div>
</body>
</html>

css代码:

 @charset "utf-8";
/* CSS Document */
* {margin:0px; padding:0px;}
body {
font-size: 12px;
margin: 0px auto;
height: auto;
width: 805px;
}
.mainBox {
border: 1px dashed #0099aC;
margin: 3px;
padding: 0px;
float: left;
height: 300px;
width: 192px;
}
.mainBox h3 {
float: left;
height: 20px;
width: 179px;
color: #FFFFFF;
padding: 6px 3px 3px 10px;
background-color: #0099CC;
font-size: 16px;
}
.mainBox p {
line-height: 1.5em;
text-indent: 2em;
margin: 35px 5px 5px 5px;
}

运行效果:
CSS盒子模型学习记录1-LMLPHP

盒子模型的各种属性:

CSS盒子模型学习记录1-LMLPHP

内容(content)、填充(padding)、边框(border)、边界(margin), CSS盒子模式都具备这些属性。

百度百科:

http://baike.baidu.com/linkurl=aaQpP1xVynen7E_MA1Ys0Y9ZsrVw_Ne3jPDPWxy76EkVntsZAMYJ5ct9ku2Aok7yhMAChNWTGfdZv_EhUdalFU0x5PHq7oiNVB5KSs54NgUhgrSalRZFqLyc12Mw4dtn

05-08 08:01