CSS布局

1.<div> 是divsion（分割）的缩写，其实就是一个“CSS-layer”

2.<span> 这也是一个非常常用的标签，这个标签可以说与div很像，没有什么特定的意义，只是他是一个级联元素，不是块级元素。我一直把它看作是一个袋子，他不像箱子那样可以有自己的宽高，他的宽高只能随着内容的多少而定，所以很像是袋子。这个标签与div正好互补

3.<div>是可以嵌套的，而这样的嵌套加上布局的float属性，这样一来，就有点类似于java里的布局器了，这是一个很强大的功能，几乎是无敌的

4.在布局的过程中，一般会用到以下几个属性：clear,float,position,其中clear用来设置某个对象的左右两边是否允许有浮动对象，而float属性则用来设置某个对象是如何浮动的，是浮动在左边还是右边，position则用来设置某个对象是绝对定位还是相对定位，不管是绝对还是相对，都要用left,right,top,bottom来设置一个周边值

5.如何将多个小控件排成一排？其实就是将每个控件的float都设置为left就可以了

6.如果不想让这些东西都排成一排，怎么办？ 那也很简单，只要设置他们的clear:both就可以了；

总的来说，就是要充分利用float和clear；还有就是widht,height这几个属性，就能够很好的对界面元素进行定位；

示例：

<!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=gb2312" />
<title>XHTML+CSS简单布局</title>
<style type="text/css">
  *{margin:0px;
    padding:0px;}
  #all{width:400px;
	   margin:0px auto;
	   color:#f00;	   }
  #top,#bt{height:20px;
           background-color:#ccc;
		   color:#00f;
		   font-weight:bold;}
  #list{width:25%;
        height:120px;
        float:left;
		background-color:#eee;}
  #content{width:75%;
        height:120px;
		background-color:#f7f7f7;}
</style>
</head>
<body>
<div id="all">
  <div id="top">顶部</div>
  <div id="mid">
      <div id="list">列表</div>
	  <div id="content"> 内容</div>	  
  </div>
  <div id="bt">底部</div>
</div>
</body>
</html>

选自《网页开发手记》第10章