CSS之定位 一，課程導入； 正常文檔流：指的是HTML文檔在進行內容布局時所遵循的從左到右，從上到下的表現方式。HTML中的大多數元素都處在正常的文檔流中，而一個元素要脫離正常流的唯一途徑就是浮動或定位。 二，定位的常見幾種形式； 1，CSS有三種基本的定位機制：普通流，浮動和絕對定位； a,普通流demo：

1.普通流

b,相對定位demo：

2.相對定位

總結：1，上面例子可以看出，對藍色div進行相對定位，分別右移，下移20px后綠色div位置并沒有相應變化，而是在原位置，藍色div遮擋住了部分綠色div。 c,絕對定位demo：

絕對定位

（＊＊總結2的解釋＊＊加上：position:relative）

總結： 1，相對定位可以看作特殊的普通流定位，元素位置是相對于他在普通流中位置發生變化，而絕對定位使元素的位置與文檔流無關，也不占據文檔流空間。 2，絕對定位的元素的位置是相對于距離他最近的非static祖先元素位置決定的。如果元素沒有已定位的祖先元素，那么他的位置就相對于初始包含塊兒（body或html神馬的）元素。 d,固定定位demo：

4.固定定位

e,浮動定位demo： 1，基本知識： 浮動模型也是一種可視化格式模型，浮動的框可以左右移動（根據float屬性值而定），直到它的外邊緣碰到包含框或者另一個浮動元素的框的邊緣。浮動元素不在文檔的普通流中，文檔的普通流中的元素表現的就像浮動元素不存在一樣. 1，）不浮動：

5.浮動之不浮動

6.右浮動

7.左浮動

8.整體左浮動

9.寬度不夠時

10.高度不夠時

f.行框清理demo： 1. 理解：前面指出浮動會讓元素脫離文檔流,不影響不浮動元素.實際上并不完全如此,如果浮動的元素后面有一個文檔流中元素,那么這個元素的框會表現的像浮動元素不存在,但是框的文本內容會受到浮動元素的影響,會移動以留出空間.用術語說就是浮動元素旁邊的行框被縮短,從而給浮動元素流出空間,因而行框圍繞浮動框。 2.代碼：

11.行框和清理:不浮動時

11111111111 11111111111

浮動時

11111111111 11111111111

三，display:inline-block； 1.由于div是塊級元素，所以框會以縱向形式排列。在實際操作中往往需要將框橫向排列。所以可以使用：display:inlin-block; 2.代碼： 1）：

框框1

框框2

框框3

2）： 3.總結： 1.至于中間的縫隙，追溯到本質原因是元素之間的空白符引起的，所以在父元素設置fone-size的大小，可以調節空白縫隙的大小。 2.代碼： .boxBg{ margin: 0 auto; width:500px; height:200px; border:2px solid #ccc; font-size:34px;（文字的大小影響縫隙，為0就沒有縫隙了，想要有文字，在子元素中設置） }

'?9=?=w