所有HTML元素可以看作盒子，在CSS中，"box model"這一術語是用來設計和佈局時使用。
CSS盒模型本質上是一個盒子，封裝周圍的HTML元素，它包括：內容(content)、填充(padding)、邊框(border)、邊界(margin)；
盒模型允許我們在其它元素和周圍元素邊框之間的空間放置元素。
1.1 Static定位
HTML元素定位屬性的默認值，即沒有定位，元素出現在正常的流中。注意：靜態定位的元素不會受到top, bottom, left, right影響。
1.2 Fixed(固定)定位
元素的位置相對於瀏覽器窗口是固定位置。即使窗口是滾動的它也不會移動。
注意：
Fixed 定位在 IE7 和IE8下需要描述!DOCTYPE才能支持。
Fixed定位使元素的位置與文檔流無關，因此不佔據空間。
Fixed定位的元素可能會和其他元素重疊。
1.3 Relative（相對）定位
相對定位元素的定位是相對其正常位置（如果是流式佈局這個元素應該在什麼位置）。
窗口滾動會移動。
注意：
使用相對定位移動的元素，它原本所佔的空間不會改變。
相對定位元素經常被用來作爲絕對定位元素的容器塊。
1.4 Absolute（絕對） 定位
絕對定位的元素的位置相對於最近的已定位父元素，如果元素沒有已定位的父元素，那麼它的位置相對於<html>。
注意：
Absolute定位使元素的位置與文檔流無關，因此不佔據空間。
Absolute定位的元素可能會和其他元素重疊。
子絕父相
1.5重疊的元素
元素的定位與文檔流無關，所以它們可以覆蓋頁面上的其它元素
z-index屬性指定了一個元素的堆疊順序（哪個元素應該放在前面，或後面）。一個元素可以有正數或負數的堆疊順序。
具有更高堆疊順序的元素總是在較低的堆疊順序元素的前面。
注意： 如果兩個定位元素重疊，沒有指定z - index，最後在HTML代碼中定位的元素將被顯示在最前面。
CSS 的 float（浮動），會使元素向左或向右移動，其周圍的元素也會重新排列。
Float（浮動），往往是用於圖像，但它在佈局時一樣非常有用。
2.1元素怎樣浮動
元素的水平方向浮動，意味着元素只能左右移動而不能上下移動。
一個浮動元素會盡量向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動元素的邊框爲止。
浮動元素之前的元素將不會受到影響，浮動元素之後的元素將圍繞它。
如果圖像是右浮動，下面的文本流將環繞在它左邊。
2.2彼此相鄰的浮動元素
如果你把幾個浮動的元素放到一起，如果有空間的話，它們將彼此相鄰。
2.3清除浮動- 使用clear
元素浮動之後，周圍的元素會重新排列，爲了避免這種情況，使用 clear屬性。
clear 屬性指定元素兩側不能出現浮動元素。
3.1隱藏元素
display:none或visibility:hidden
隱藏一個元素可以通過把display屬性設置爲"none"，或visibility屬性設置爲"hidden"。但是請注意，這兩種方法會產生不同的結果。
3.1.1 visibility:hidden可以隱藏某個元素，但隱藏的元素仍需佔用與未隱藏之前一樣的空間。也就是說，該元素雖然被隱藏了，但仍然會影響佈局。
3.1.2 display:none可以隱藏某個元素，且隱藏的元素不會佔用任何空間。也就是說，該元素不但被隱藏了，而且該元素原本佔用的空間也會從頁面佈局中消失。
3.2 CSS Display -塊和內聯元素
塊元素是一個元素，佔用了全部寬度，在前後都是換行符。
塊元素的例子：
· <h1>
· <p>
· <div>
內聯元素只需要必要的寬度，不強制換行。
內聯元素的例子：
· <span>
· <a>
3.3如何改變一個元素顯示
可以更改內聯元素和塊元素，反之亦然，可以使頁面看起來是以一種特定的方式組合，並仍然遵循web標準。
3.3.1 把塊元素顯示爲內聯元素:{display:inline;}
3.3.2 把內聯元素顯示爲塊元素：{display:block;}
scroll無論內容是否超出層大小都添加滾動條
auto 超出時自動添加滾動條
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>盒模型</title>
<style type="text/css">
span{
border-style: solid;
border-width: 10px;
border-color: green;
padding:0px;
margin-top:100px;
margin-left: 100px;
}
</style>
</head>
<body>
<span>內容</span>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>DIV盒模型</title>
<style type="text/css">
#div{
width: 500px;
height: 500px;
background-color:black;
margin: 0px auto;
}
#div1{
width: 200px;
height: 200px;
background-color: yellow;
border-style: solid;
border-width: 10px;
border-color: deepskyblue;
padding: 5px;
margin: 10px;
float: left;
}
#div2{
width: 200px;
height: 200px;
background-color: red;
border-style: solid;
border-width: 10px;
border-color:slateblue;
padding:5px;
margin: 10px;
float: left;
}
#div3{
width: 200px;
height: 200px;
background-color:deeppink;
border-style: solid;
border-width: 10px;
border-color: chartreuse;
padding: 5px;
margin: 10px;
float: left;
}
#div4{
width: 200px;
height: 200px;
background-color: darkgreen;
border-style: solid;
border-width: 10px;
border-color:gold;
padding:5px;
margin: 10px;
float: left;
}
</style>
</head>
<body>
<div id="div">
<div id="div1">
這是第一個div
</div>
<div id="div2">
這是第二個div
</div>
<div id="div3">
這是第三個div
</div>
<div id="div4">
這是第四個div
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>佈局</title>
<style type="text/css">
h4{
position: absolute;
top:40px;
left:50px;
}
</style>
</head>
<body>
<p>這是一些文本</p>
<p>這是一些文本這是一些文本這是一些文本這是一些文本這是一些文本這是一些文本這是一些文本</p>
<h4>Fixed佈局</h4>
<p>這是一些文本</p>
<p>這是一些文本</p>
<p>這是一些文本</p>
<p>這是一些文本</p>
<p>這是一些文本</p>
<p>這是一些文本</p>
<p>這是一些文本</p>
<p>這是一些文本</p>
<p>這是一些文本</p>
<p>這是一些文本</p>
<p>這是一些文本</p>
<p>這是一些文本</p>
<p>這是一些文本</p>
<p>這是一些文本</p>
<p>這是一些文本</p>
<p>這是一些文本</p>
<p>這是一些文本</p>
<p>這是一些文本</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>DIV-Fixed佈局</title>
<style type="text/css">
.div1{
width: 200px;
height: 400px;
background-color:royalblue;
border: solid;
border-width: 10px;
border-color: yellow;
position: fixed;
top:50px;
left: 500px;
}
.div2{
width: 200px;
height: 400px;
background-color: green;
border: solid;
border-width: 10px;
border-color: yellow;
position: absolute;
top:100px;
left: 200px;
}
.div3{
width: 200px;
height: 400px;
background-color: deeppink;
border: solid;
border-width: 10px;
border-color: yellow;
position: relative;
top:200px;
left: 800px;
}
</style>
</head>
<body>
<div class="div1">
這是第一個DIV-Fixed
</div>
<div class="div2">
這是第二個DIV-Absolute
</div>
<div class="div3">
這是第三個DIV-Relative
</div>
<div style="background-color: red; width: 300px;height: 500px;" >
這是第四個DIV-static
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>顯示效果</title>
<style type="text/css">
/*img{
visibility: hidden;
}*/
</style>
</head>
<body>
<p>這是一些文本</p>
<p>這是一些文本</p>
<img src="img/timg.jpg"/>
<p>這是一些文本</p>
<p>這是一些文本</p>
</body>
</html>
首先,static定位就是我們html中默認的定位方式，就是元素就是從上到下，從左到右。
相對定位（relative），相對定位。元素設置了相對定位後，元素是相對於他原來的位置發生偏移，但是元素並沒有脫離標準文檔流，也就是他原來的位置還是存在的，其他元素不能移到他的原來位置（相當於雖然他原來位置沒有東西了，但是位置還是佔着的，其他元素不可以移到該位置上）。
絕對定位（absolute）。絕對定位比較複雜了，首先我們結合絕對定位和固定定位一起來講解
首先，相同點。
絕對定位不是相對於自己原來位置的偏移。
兩者都會脫離標準文檔流，這句話是什麼意思？其實估計大家都不是很清楚，也就是說他移動後他原來的位置就空了，後面的元素會自動移動上去，其次，他現在的位置也不再標準文檔流當中，也就是說他現在的相當於浮動在標準文檔流之上。
不同點：
首先分兩種情況來討論
一，設置了偏移量
舉一個例子： postition:absolute ;left:23px;top:12px;或者postition:fixed ;left:23px;top:12px;這樣的話設置absolute方式的是相對於距離他最近的祖先元素，且該祖先元素也設置了定位方式。來偏移的。而fixed則是相對於body元素的位子來偏移的。
第二種情況：設置了定位，但是沒有設置偏移量時，兩者都是相對於父類來說的，他們都會移動到父類的左上角。
第二個不同點：
設置了fixed的定位方式的元素是不會隨着滾動條的滾動而發生位置的變化的，而設置abslute的定位方式的會發生未知的變化。
