css盒子模型实例

时间:2022-12-13 20:29:41

css盒子模型实例css盒子模型实例

.html代码如下:

 <!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     <title>CSS Box Model</title>
 5     <style type="text/css">
 6         body
 7         {
 8             background: #333;
 9         }
10         div
11         {
12             height: 240px;
13             width: 360px;
14             border: 5px solid yellow;
15             background: blue;
16             margin: 0 auto;
17         }
18         span
19         {
20             display: block;
21             width: 50%;
22             height: 50%;
23             background: red;
24             border: 5px solid yellow;
25             color: White;
26             font-size: 14px;
27             font-weight: bold;
28             margin: auto;
29             margin-top: 60px;
30             line-height: 120px;
31             text-align: center;
32             vertical-align: middle;
33         }
34     </style>
35 </head>
36 <body>
37     <div>
38         <span>Box Model的内容</span>
39     </div>
40 </body>
41 </html>

效果如下:

css盒子模型实例