每个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>