CSS盒子模型学习记录1

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

代码试验：

html代码：

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title>无标题文档</title>
 6 <link rel="stylesheet" type="text/css" href="mycss.css">
 7 </head>
 8 
 9 <body>
10 <div class="mainBox">
11 <h3>前言</h3>
12 <p>正文内容</p>
13 </div>
14 <div class="mainBox">
15 <h3>CSS盒子模式</h3>
16 <p>正文内容 </p>
17 </div>
18 <div class="mainBox">
19 <h3>转变思想</h3>
20 <p>正文内容 </p></div>
21 <div class="mainBox">
22 <h3>熟悉步骤</h3>
23 <p>正文内容 </p>
24 </div>
25 </body>
26 </html>

css代码：

 1 @charset "utf-8";
 2 /* CSS Document */
 3 * {margin:0px; padding:0px;}
 4 body {
 5 font-size: 12px; 
 6 margin: 0px auto;
 7 height: auto;
 8 width: 805px;
 9 }
10 .mainBox {
11 border: 1px dashed #0099aC;
12 margin: 3px;
13 padding: 0px;
14 float: left;
15 height: 300px;
16 width: 192px;
17 }
18 .mainBox h3 {
19 float: left;
20 height: 20px;
21 width: 179px;
22 color: #FFFFFF;
23 padding: 6px 3px 3px 10px;
24 background-color: #0099CC;
25 font-size: 16px;
26 }
27 .mainBox p {
28 line-height: 1.5em;
29 text-indent: 2em;
30 margin: 35px 5px 5px 5px;
31 }

运行效果：

盒子模型的各种属性：

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

百度百科：

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