盒子模型 

 1 <!--
 2     盒子模型
 3         <div></div>    区分（块）
 4         div属于一个大盒子，可以将h1至h6,p这些标签包进去，不能相反去做。
 5         <div>
 6             <h2></h2>
 7             <ul><li></li></ul>
 8             <p></p>
 9             <dl></dl>
10         </div>    
11     边框属性：
12         类型：border-style
13            颜色:border-color
14         粗细:border-width<br
15     边框属性的简写：
16         boreder边框
17         border-top:顶部边框
18         border-right:右边框
19         border-bottom:底边框
20         border-left:左边框
21         border:1px solid #fc0;
22     如果想让一个DIV（大盒子）在浏览器里水平居中显示，那么给这个DIV加margin:0 auto;
23     div本身不带任何属性。
24     当前div宽度是980px，边框是1px，那么这个div的总宽度是982
25     如果我的div宽度就必须固定为980px，但是又加1px的边框，那么div宽度就应该写成978px
26     
27     大盒子总宽度=第一个盒子宽+间距（第一个到第二个之间的距离）+第二个盒子宽度+间距+第三个盒子宽度+左右的边框。
28      大盒子总高度=第一个盒子高度+间距（第一个到第二个之间的距离）+第二个盒子高度+间距+第三个盒子高度+上下的边框
29 -->
30 
31 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
32 <html xmlns="http://www.w3.org/1999/xhtml">
33 <head>
34 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
35 <title>盒子模型</title>
36 <style type="text/css">
37     div{width:300px;height:200px;border:1px solid #A5CDEE;text-align:center;line-height:200px;margin:0 auto;}
38     .two{border:1px solid red;}
39 </style>
40 </head>
41 
42 <body>
43     <div class="one">我是一个盒子,我是大banner</div>
44     <p>我是一个段落</p>
45     <div class="two">我是一个盒子,我是大banner</div>
46 </body>
47 </html>

 

posted on 2013-08-12 14:34  大钢  阅读(240)  评论(0)    收藏  举报

导航