css盒子就是它的盒模型，所有css的布局都是以此作为基础的，很有必要来详细记录一下。
1、盒子的尺寸就是margin+padding+border+content的总和，这很好理解，但令人迷惑的可能就是四个顶角是怎样产生的，可以由两个例子来看一下：
1 <div style="width:10px; height:10px; border:30px solid; border-color:#ff3300 #0000ff #339966 #00ff00;"></div>
2 <div style="width:10px; height:10px; border-width:20px 30px;border-style:solid; border-color:#ff3300 #0000ff #339966 #00ff00;"></div> 效果如图：
和
。从这两幅图可以看出：四个顶角的矩形是由相邻两个边框各分一半形成的。
此时如果将某些边框的颜色设为背景色或者透明，则可以形成梯形；如果在将宽和高设为0，就可以产生三角形，
1 <div style="width:10px;height:10px;border:15px solid #000; border-color:#f00 #fff #fff #fff;"></div>
2 <div style="width:0;height:0;border:15px solid #000; border-color:#f00 transparent transparent transparent;"></div> 效果如图：
和
。
2、如果没有显式的设置盒子大小，其尺寸该怎样确定呢，还是看几个例子吧：
1 <div style=" margin: 20px auto;width:300px; background: gray; padding: 10px;">
2 <p style=" background-color: Orange;">
3 上官云野</p>
4 </div>
5 <div style=" margin: 20px auto; width: 300px; background: gray; padding: 10px;">
6 <p style=" background-color: Orange; margin: 0 -20px;">
7 上官云野</p>
8 </div>
9 <div style=" margin: 20px auto; width: 300px; background: gray; padding: 10px;">
10 <p style=" background-color: Orange; width:100px">
11 上官云野上官云野</p>
12 </div> 效果如图：
、
、
。由图可以看出：未设置的盒子的宽度由包含它的盒子确定，原则为填满包含盒子的content。而它的高由内含的盒子确定。
3、有了以上两点知识就可以做一个圆角框了：
1 <div style="width: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="width:300px;height:200px;padding-top:10px;background-color:#ccc;padding-left:10px;display:inline;">
26 框模型
27 </div>
28 <div style="width:300px;height:200px;padding-top:10px;background-color:#999;padding-left:10px;display:inline-block">
29 框模型
30 </div>
31 <div style="width:300px;height:200px;padding-top:10px;background-color:#999;padding-left:10px;display:inline-block">
32 框模型
33 </div>
34 <div style="width:300px;height:200px;padding-top:10px;background-color:#ccc;padding-left:10px;">
35 框模型
36 </div>
37 <div style="width:300px;height:200px;padding-top:10px;background-color:#999;padding-left:10px;">
38 框模型
39 </div>
40 <p style="width:300px;height:200px;padding-top:10px;background-color:#ccc;padding-left:10px;">
41 框模型
42 </p>
43 <!--p为段落，所以前后有换行+空一行(16px;由margin指定的);而div只换行不空行-->
44 <p style="width: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> 块级盒模型
转载于:https://www.cnblogs.com/songfeilong2325/p/3403684.html