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>