一分钟让你明白CSS中的盒模型

           想必初学者对CSS盒模型总是很困惑吧。下面一分钟让你彻底明白盒模型:

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
 2 "http://www.w3.org/TR/html4/strict.dtd">
 3 
 4 <html xmlns="http://www.w3.org/1999/xhtml" lang="en">
 5     <head>
 6         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 7         <title>3</title>
10         <style type="text/css">
11             .simple{
12                 width: 500px;
13                 margin: 20px auto;
14                 border-style:solid;
15                 border-color: #0073CC;
16                 background-color: red;
17             }
18             .fancy{
19                 width: 500px;
20                 margin: 20px auto;
21                 padding:50px;
22                 border-width: 10px;
23                 border-style:solid;
24                 border-color: #0068C9;
25                 background-color: #10B722;
26             }
27         </style>
28     </head>
29     <body>
30         <div class="simple">
31             我小一些
32         </div>
33         <div class="fancy">
34             我大一些
35         </div>
36     </body>
37 </html>

　　下面我们来看显示效果:

 

 

再看FireFox的盒模型:

下面我们结合起来看:

看完这几张图之后，想必已经明白了吧。width,heigh代表内容(content)的长度和高度,padding是content与border的的距离.background-color的作用范围是 content+padding

posted on 2013-11-11 10:04  Arts&Crafts  阅读(161)  评论(0)  编辑  收藏  举报

导航