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