1.W3C盒子模型
内容区->padding->border->margin
1 <!doctype html> 2 <html> 3 <head> 4 <title>盒子模型</title> 5 <meta charset='utf-8'/> 6 <style> 7 #box{ 8 width:200px; 9 height:200px; 10 border:5px solid red; 11 padding:10px; 12 margin:20px; 13 } 14 </style> 15 </head> 16 <body> 17 <div id="box"> 18 内容区 19 </div> 20 21 </body> 22 </html>
2.常见CSS属性
position ：absolute(绝对)、relative(相对)、static(静态)、fixed(固定)
top、left、text-align、line-height、z-index、display、visibility、overflow、float、clear
#box{ /*ID选择器*/
position:absolute; /*设置层为绝对定位*/
top:30px; /*层距离顶点纵坐标30像素*/
left:100px; /*层距离顶点横坐标100像素*/
200px; /*层宽200px*/
height:200px; /*层高200px*/
border:5px solid red; /*边框5像素 实线 红色*/
padding:10px; /*内补白10像素*/
margin:20px; /*外补白20像素*/
overflow:auto; /*当内容超出层的范围显示滚动条*/
z-index:1; /*设置层的先后顺序为覆盖关系*/
visibility:visible; /*无论父层可不可见，子层可见*/
}
3.盒子定位
1>相对定位：相对定位通常会被看做普通流定位的一部分，因为元素的位置相对于它本身的普通流中的位置定位并不是布局常用方式
1 a:hover{ 2 position:relative; 3 top:1px; 4 left:1px; 5 }
2>绝对定位：相对定位是在普通流中的位置移动，绝对定位使元素位置与文档的普通流无关，它的位置是相对于已经定位的包含它的上层元素中上下左右移动。如果没有已定位的上层元素那么它的位置相对于最初的包含区块。
#box{ position:absolute; width:300px; heigh:300px; top:100px; left:100px; background:#f00; z-index:1; }
4.设置浮动☆☆☆☆☆
在CSS中通过float属性实现盒子区块的向左或向右浮动。
例子1：盒子浮动与清除浮动
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <title>DIV+CSS</title> 5 <meta charset='utf-8' /> 6 <style> 7 div{ 8 margin:10px; 9 width:200px; 10 height:300px; 11 border:solid 1px; 12 } 13 #d1,#d2{ 14 float:left; /*左浮动*/ 15 } 16 #d3{ 17 clear:both; /*清除浮动*/ 18 background:#f00; 19 } 20 </style> 21 </head> 22 <body> 23 <div id='d1'>1111</div> 24 <div id='d2'>222222222</div> 25 <div id='d3'>33333333333333333333</div> 26 </body> 27 </html>
例子2：三列浮动设计
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <title>DIV+CSS</title> 5 <meta charset='utf-8' /> 6 <style> 7 body{ 8 margin:0; 9 padding:0; 10 text-align:center; 11 } 12 #container{ 13 width:966px; 14 margin:0 auto; 15 text-align:left; 16 } 17 #left_mian{ 18 float:left; 19 width:256px; 20 height:400px; 21 border:1px solid; 22 } 23 #right_content{ 24 float:right; 25 width:200px; 26 height:400px; 27 border:1px solid; 28 } 29 #zj{ 30 float:left; 31 width:500px; 32 height:400px; 33 border:1px solid; 34 } 35 </style> 36 </head> 37 <body> 38 <div id='container'> 39 <div id='left_mian'>主导航区</div> 40 <div id='zj'>中间</div> 41 <div id='right_content'>内容区</div> 42 </div> 43 </body> 44 </html>
例子3：导航栏
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <title>DIV+CSS</title> 5 <meta charset='utf-8' /> 6 <style> 7 body{ 8 margin:0; 9 padding:0; 10 text-align:center; 11 } 12 #menu{ 13 width:800px; 14 margin:0 auto; 15 text-align:left; 16 background:red; 17 } 18 #menu ul { 19 float:left; 20 margin:0px; 21 padding:0px; 22 list-style:none; 23 } 24 #menu ul li { 25 float:left; 26 width:99px; 27 display:block; 28 line-height:30px; 29 text-align:center; 30 } 31 #menu .menudiv{ 32 float:left; 33 width:1px; 34 height:20px; 35 background:#888; 36 margin-top:5px; 37 } 38 </style> 39 </head> 40 <body> 41 <div id='menu'> 42 <ul> 43 <li><a href='#'>1</a></li> 44 <li class='menudiv'></li> 45 <li><a href='#'>2</a></li> 46 <li class='menudiv'></li> 47 <li><a href='#'>3</a></li> 48 <li class='menudiv'></li> 49 <li><a href='#'>4</a></li> 50 <li class='menudiv'></li> 51 <li><a href='#'>5</a></li> 52 <li class='menudiv'></li> 53 <li><a href='#'>6</a></li> 54 <li class='menudiv'></li> 55 <li><a href='#'>7</a></li> 56 <li class='menudiv'></li> 57 <li><a href='#'>8</a></li> 58 59 </ul> 60 </div> 61 </body> 62 </html>