css定位

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就沒有縫隙了，想要有文字，在子元素中設置） }