- 盒子模型:margin(边界),可被占位;border(边框);padding(填充);content(内容)
- 块元素:
- 默认占据一行,前后换行。
- 作为容器,装载块元素和行内元素,被装载元素的位置,会都受到容器的限制。
- 在CSS(display/float/position)作用下,块元素和行内元素无异。
- position可以改变位置受容器的限制:
- top/left/bottom/right 只有在设置了定位属性的元素中有效
- 相对定位(relative):是相对于自己的原始位置进行位置偏移,偏移后,原始空间仍然会被占据,不以父级作为参考。
- 绝对定位(absolute):相对于自己父级(必须具有定位属性的)进行位置偏移,偏移后,原始空间不被占用,脱离原有容器。若所有父级都没有定位属性,则选择浏览器作为父级。
- 层级次序:如由于定位(相对或绝对)而引起元素之间的遮掩,则可以通过设置 z-index:###调整层级位置,值越大就越在上层。
- 行内元素:
- 默认不占据一行,行内元素,前后不换行。
- 通常不作为容器,只装载内容。
- float:设置浮动属性时,如本身没有宽高属性时,元素将会自动占据最小的空间;如相邻元素没有使用margin(left/right)属性,相邻元素则会象磁贴一样紧紧地粘上自己。
- 横向与纵向布局:
- 横向五级菜单
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script src="http://common.cnblogs.com/script/jquery.js" type="text/javascript"></script><script type="text/javascript"> <![CDATA[ $(document).ready( function() { $("li") .bind("mouseover",function(){$(this).attr("class","normal");}) .bind("mouseout",function(){$(this).romoveAttr("class");}); }); ]]> </script> <style type="text/css"> body { font-family: Arial, Helvetica, sans-serif; font-size: 12px; line-height: 1.5; } a { color: #808080; text-decoration: none; } a:hover { color: #000080; } #menu { width: 360px; } #menu ul { list-style: none; margin: 0px; padding: 0px; z-index:0; } #menu ul li { margin-top:-2px; background: #eee; padding: 2px 10px; height: 20px; line-height: 20px; border: 1px solid #ccc; position:relative;display:inline; } #menu ul li ul { display:none; position: absolute; left: 0px; top: 20px; width:180px; border:1px solid #ccc; border-bottom:none;z-index:100; } #menu ul li ul li { background: #eee; padding: 2px 10px; height: 20px; line-height: 20px; border-bottom: 1px solid #ccc; position:relative;display:block; } #menu ul li ul li ul{ display:none; margin-left:-2px; position: absolute; left: 180px; top: 0px; width:180px; border:1px solid #ccc; border-bottom:none;z-index:100; } #menu ul li.normal > ul { display:block;} #menu ul li:hover > ul { display:block;} </style> </head> <body> <div id="menu"> <ul> <li><a href="#">第一级菜单 1</a></li> <li><a href="#">第一级菜单 2</a> <ul> <li><a href="#">第二级菜单 2-1</a></li> <li><a href="#">第二级菜单 2-2</a> <ul> <li><a href="#">第三级菜单 2-2-1</a> <ul> <li><a href="#">第四级菜单 2-2-1-1</a></li> <li><a href="#">第四级菜单 2-2-1-2</a> <ul> <li><a href="#">第五级菜单 2-2-1-2-1</a></li> <li><a href="#">第五级菜单 2-2-1-2-2</a></li> </ul> </li> <li><a href="#">第四级菜单 2-2-1-3</a></li> </ul> </li> <li><a href="#">第三级菜单 2-2-2</a></li> </ul> </li> <li><a href="#">第二级菜单 2-3</a></li> </ul> </li> </ul> </div> </body> </html>
- 纵向五级菜单:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script src="http://common.cnblogs.com/script/jquery.js" type="text/javascript"></script> <script type="text/javascript"> <![CDATA[ $(document).ready( function() { $("li") .bind("mouseover",function(){$(this).attr("class","normal");}) .bind("mouseout",function(){$(this).romoveAttr("class");}); }); ]]> </script> <style type="text/css"> body { font-family: Arial, Helvetica, sans-serif; font-size: 12px; line-height: 1.5; } a { color: #808080; text-decoration: none; } a:hover { color: #000080; } #menu { width: 180px; border: 1px solid #ccc; border-bottom:none;} #menu ul { list-style: none; margin: 0px; padding: 0px; z-index:0; } #menu ul li { background: #eee; padding: 2px 10px; height: 20px; line-height: 20px; border-bottom: 1px solid #ccc; position:relative;} #menu ul li ul { display:none; position: absolute; left: 180px; top: 0px; width:180px; border:1px solid #ccc; border-bottom:none;z-index:100; } #menu ul li.normal > ul { display:block;} #menu ul li:hover > ul { display:block;} </style> </head> <body> <div id="menu"> <ul> <li><a href="#">第一级菜单 1</a></li> <li><a href="#">第一级菜单 2</a> <ul> <li><a href="#">第二级菜单 2-1</a></li> <li><a href="#">第二级菜单 2-2</a> <ul> <li><a href="#">第三级菜单 2-2-1</a> <ul> <li><a href="#">第四级菜单 2-2-1-1</a></li> <li><a href="#">第四级菜单 2-2-1-2</a> <ul> <li><a href="#">第五级菜单 2-2-1-2-1</a></li> <li><a href="#">第五级菜单 2-2-1-2-2</a></li> </ul> </li> <li><a href="#">第四级菜单 2-2-1-3</a></li> </ul> </li> <li><a href="#">第三级菜单 2-2-2</a></li> </ul> </li> <li><a href="#">第二级菜单 2-3</a></li> </ul> </li> </ul> </div> </body> </html>
-
float 布局
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> <style type="text/css">
body{
margin:0;
padding:0;
text-align:center
} #container{ margin:0 auto; width:1024px; height:600px;
text-align:left; background:aqua; } #left{ background:#ccc; float:left; width:10%; height:100%; } #middle{ background:gray; width:80%; margin:0 10%; height:100%; } #right{ background:#ccc; float:right; width:10%; height:100%; } } </style> <title>无标题 1</title> </head> <body> <div id="container"> <div id="left">left</div> <div id="right">right</div> <div id="middle">middle</div> </div> </body> </html>
- 横向五级菜单