HTML的盒子模型

每个HTML元素都可以看作一个装了东西的盒子，盒子具有宽度（width）和高度（height），盒子里面的内容到盒子的边框之间的距离即填充（padding），盒子本身有边框（border），而盒子边框外和其他盒子之间，还有边界（margin）。

布局中的主要样式
font
line-height
color
margin
padding
border
text-align
background

 1 <!--
 2 每个HTML元素都可以看作一个装了东西的盒子，盒子具有宽度（width）和高度（height），盒子里面的内容到盒子的边框之间的距离即填充（padding），盒子本身有边框（border），而盒子边框外和其他盒子之间，还有边界（margin）。
 3 -->
 4 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 5 <html xmlns="http://www.w3.org/1999/xhtml">
 6 <head>
 7 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
 8 <title>盒子模型</title>
 9 <style>
10     #bor{
11         240px;
12         border:1px dashed;
13     }
14     #main{
15         height:200px;
16         200px;
17         margin:20px;
18         padding:20px;
19         border:1px solid $000;
20         background:#eaeaea;
21     }
22     span{
23         100%;
24         height:100%;
25         border:1px dashed red;
26         text-align:center;
27         padding-top:50%;
28     }
29 </style>
30 </head>
31 
32 <body>
33     <div id="bor">
34         <div id="main">
35             <span>内容元素</span>
36         </div>
37     </div>
38 </body>
39 </html>