一、定位
模型和定位是密不可分的，就像買了傢俱，要找地方放傢俱一樣，要不然沒地方放，放到人家家裏面，是沒有意義的。
下面就介紹一下定位的屬性：
- position 定義元素在頁面的定位方式
- left 指定元素和最近一個具有定位設置的父對象左邊的距離
- right 指定元素和最近一個具有定位設置的父對象右邊的距離
- top 指定元素和最近一個具有定位設置的父對象上邊的距離
- bottom 指定元素和最近一個具有定位設置的父對象下邊的距離
- z-index 設置元素的層疊順序，僅在position屬性爲relative或者是absolute時有效
- width 設置元素的框的寬
- height 設置元素的框的高
- overflow內容溢出控制
- clip 剪切
前六個是定位，後四個是設置區塊，或對其中內容進行控制
下面主要先說一下position的屬性absolute 、relative（相對的）、static （靜態的）、fixed(固定的)
下面是一個absolute的例子 top和left的作用很簡單的體現出來了、
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>cssTest</title>
<style type="text/css">
#box{width:400px;height:500px;border:1px solid #000fff; background-color:Red; padding:10px; position:absolute;top:100px;left:200px;}
</style>
</head>
<body>
<div id="box">我頂部距離是100 左邊是200
</div>
</body>
</html>
下面是一個relative的例子 主要是相對上級模型塊content的位置
<!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>
<title>cssTest</title>
<style type="text/css">
#box{width:400px;height:500px;border:1px solid #000fff; background-color:Red; padding:10px; position:absolute;top:100px;left:200px;}
#content1{ position:relative;top:100px;left:200px; background-color:Blue;}
</style>
</head>
<body>
<div id="box">我頂部距離是100 左邊是200
<p id="content1">relative測試</p>
</div>
</body>
</html>
下面是一個fixed的例子 主要是瀏覽器窗口的位置可以製作懸浮廣告
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>cssTest</title>
<style type="text/css">
#box{width:400px;height:500px;border:1px solid #000fff; background-color:Red; padding:10px; position:absolute;top:100px;left:200px;}
#content1{ position:relative;top:100px;left:200px; background-color:Blue;}
#content2{ position:fixed;top:100px;left:200px; background-color:Blue;}
</style>
</head>
<body>
<div id="box">我頂部距離是100 左邊是200
<p id="content1">relative測試</p>
</div>
<p id="content2">fixed測試可以做懸浮廣告</p>
</body>
</html>
其他幾個屬性暫時不說了，等有時間的話補上。。。。
二、佈局
佈局和定位的作用有點類似，都是將模型塊放置到一個地方
佈局的操作主要是如何安排、排列、和改變區塊的顯示位置、同時處理鄰里糾紛（設置兩個相鄰塊的間距）佈局的主要屬性如下：
- clear 指定元素不允許有浮動對象的邊 取值有none left right both
- float 指定元素是否以及如何浮動，取值是none left right
- clip 指定元素的可視區域，區域外的部分隱藏
- overflow 指定元素的內容超過指定寬度和高度時的處理方式 默認爲visible（隱藏）
- overflow-x超過寬度
- overflow-y超過高度
- display 指定元素如何顯示
- visibility 指定是否顯示元素
看一下屬性就感覺很多是要用到的，在此主要是float和clare的用法，float主要是流向某個地方 clear主要是不讓某個方向流向，
<head>
<title>cssTest</title>
<style type="text/css">
.news {
background-color: gray;
border: solid 1px black;
}
.news img { float: left; }
.news p { float: right; }
.clear { clear:right; }
</style>
</head>
<body>
<div class="news">
<img src="news-pic.jpg" /><div class="clear">candnndnnd</div>
<p>some text</p>
</div>
</body>
</html>
試着把上述clear屬性改成both left right 看看其效果
其他的有時間補上