css盒子就是它的盒模型，所有css的布局都是以此作为基础的，很有必要来详细记录一下。
1、盒子的尺寸就是margin+padding+border+content的总和，这很好理解，但令人迷惑的可能就是四个顶角是怎样产生的，可以由两个例子来看一下：
1 <div style="10px; height:10px; border:30px solid; border-color:#ff3300 #0000ff #339966 #00ff00;"></div> 2 <div style="10px; height:10px; border-20px 30px;border-style:solid; border-color:#ff3300 #0000ff #339966 #00ff00;"></div>
效果如图：
和
。从这两幅图可以看出：四个顶角的矩形是由相邻两个边框各分一半形成的。
此时如果将某些边框的颜色设为背景色或者透明，则可以形成梯形；如果在将宽和高设为0，就可以产生三角形，
1 <div style="10px;height:10px;border:15px solid #000; border-color:#f00 #fff #fff #fff;"></div> 2 <div style="0;height:0;border:15px solid #000; border-color:#f00 transparent transparent transparent;"></div>
效果如图：
和
。
2、如果没有显式的设置盒子大小，其尺寸该怎样确定呢，还是看几个例子吧：
1 <div style=" margin: 20px auto;300px; background: gray; padding: 10px;"> 2 <p style=" background-color: Orange;"> 3 上官云野</p> 4 </div> 5 <div style=" margin: 20px auto; 300px; background: gray; padding: 10px;"> 6 <p style=" background-color: Orange; margin: 0 -20px;"> 7 上官云野</p> 8 </div> 9 <div style=" margin: 20px auto; 300px; background: gray; padding: 10px;"> 10 <p style=" background-color: Orange; 100px"> 11 上官云野上官云野</p> 12 </div>
效果如图：
、
、
。由图可以看出：未设置的盒子的宽度由包含它的盒子确定，原则为填满包含盒子的content。而它的高由内含的盒子确定。
3、有了以上两点知识就可以做一个圆角框了：
1 <div style="500px"> 2 <div style="border-bottom:3px solid #cc0000; border-top-color:#cc0000; border-left:3px dotted transparent;border-right:3px dotted transparent"></div> 3 <div style="padding:10px 20px; color:white; font-size:14px; background:#cc0000;">上官云野！</div> 4 <div style="border-top:3px solid #cc0000; border-bottom-color:#cccccc; border-left:3px dotted transparent;border-right:3px dotted transparent;"></div> 5 </div>
。
附录：各种盒模型特点：
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 2 <html> 3 <head> 4 <title> New Document </title> 5 <meta http-equiv="Content-type" content="Text/html;charset=utf-8"> 6 <style type="text/css"> 7 table{ 8 display:inline-block; 9 border-collapse:collapse; 10 width:50px; 11 } 12 13 table, td 14 { 15 border: 1px solid blue; 16 } 17 td{width:15px;} 18 .li1 li{background-color:#ccc;display:inline-block;} 19 .li2{background-color:#ccc;display:inline-block;} 20 .li3 li{background-color:#ccc;} 21 .li4{background-color:#ccc;} 22 </style> 23 </head> 24 <body> 25 <div style="300px;height:200px;padding-top:10px;background-color:#ccc;padding-left:10px;display:inline;"> 26 框模型 27 </div> 28 <div style="300px;height:200px;padding-top:10px;background-color:#999;padding-left:10px;display:inline-block"> 29 框模型 30 </div> 31 <div style="300px;height:200px;padding-top:10px;background-color:#999;padding-left:10px;display:inline-block"> 32 框模型 33 </div> 34 <div style="300px;height:200px;padding-top:10px;background-color:#ccc;padding-left:10px;"> 35 框模型 36 </div> 37 <div style="300px;height:200px;padding-top:10px;background-color:#999;padding-left:10px;"> 38 框模型 39 </div> 40 <p style="300px;height:200px;padding-top:10px;background-color:#ccc;padding-left:10px;"> 41 框模型 42 </p> 43 <!--p为段落，所以前后有换行+空一行(16px;由margin指定的);而div只换行不空行--> 44 <p style="300px;height:200px;padding-top:10px;background-color:#ccc;padding-left:10px;display:inline-block"> 45 框模型 46 </p> 47 <table> 48 <tr> 49 <td>1</td> 50 <td>2</td> 51 <td>3</td> 52 </tr> 53 <tr> 54 <td>4</td> 55 <td>5</td> 56 <td>6</td> 57 </tr> 58 <tr> 59 <td>7</td> 60 <td>8</td> 61 <td>9</td> 62 </tr> 63 </table> 64 <ul class="li1"> 65 <li>春</li> 66 <li>夏</li> 67 <li>秋</li> 68 <li>冬</li> 69 </ul> 70 <ul class="li2"> 71 <li>春</li> 72 <li>夏</li> 73 <li>秋</li> 74 <li>冬</li> 75 </ul> 76 <ul class="li3"> 77 <li>春</li> 78 <li>夏</li> 79 <li>秋</li> 80 <li>冬</li> 81 </ul> 82 <ul class="li4"> 83 <li>春</li> 84 <li>夏</li> 85 <li>秋</li> 86 <li>冬</li> 87 </ul> 88 </body> 89 </html>