css - 浮動和定位

標籤：相對   ack   自己的   作用   position   after   round   網頁導航   display   

 

浮動

 

　　Float: left | right　　 特點：

　　　　◆浮動的元素不佔位置（脫標）

　　　　◆可以將行內元素轉化為行內塊元素

　　　　◆區塊層級元素在一行上顯示

　　　　◆置了浮動的元素，影響其後面的元素

　　作用：

　　　　◆解決文字文繞圖問題

　　　　◆製作網頁導覽列

　　　　◆網頁布局

　　清除浮動：

　　　　清除浮動的影響。

　　　　.clearfix:after{                 content:"";                 height: 0;                 line-height:0;                 display:block;                 clear:both;                 visibility: hidden;            }            .clearfix{                 zoom: 1;   /* IE */            }

 

 

 

定位　　position：static  | absolute | relative | fixed　　靜態定位（static）　　絕對位置（absolute）

　　　　◆絕對位置絕對脫標（不佔位置）

　　　　◆行內元素轉化為行內塊元素

　　　　◆如果父盒子沒有設定定位，以瀏覽器左上方為基準設定定位

　　　　◆如果父盒子設定定位，  以父容器左上方為基準設定定位

　　相對定位（relative）

　　　　◆看自己的位置設定定位

　　　　◆相對定位沒有脫標，佔位置

　　　　子絕父相（子項目設定絕對位置，父元素設定相對定位）

　　一般情況下會使用子絕父相。

　　固定定位（fixed）

　　　　◆固定定位也脫標了（不佔位置）

　　　　◆行內元素轉化為行內塊元素

 

css - 浮動和定位