css盒子模型实例

最新推荐文章于 2024-02-07 11:35:12 发布

yayun0516

最新推荐文章于 2024-02-07 11:35:12 发布

阅读量2.1k

点赞数

分类专栏： css 文章标签：盒子模型 html css div

本文链接：https://blog.csdn.net/yayun0516/article/details/41477445

版权

css 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

.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>

效果如下：