網頁排版中的浮動和定位（學習筆記）

標籤：lis   zoom   float   否則   分享   ges   位置   www   hid   

在瞭解CSS中的浮動和定位之前有必要先瞭解清楚標準流和脫離標準流的特性

雖然浮動和定位很重要，但是在以後的網頁寫作中，還是盡量少用，最好別亂用，不然後面問題很大，特別是對初學者。最好要把浮動和定位要搞清楚在使用。

標準流的預設特性

1、分行、區塊層級元素，並且能夠dispay轉換。

2、區塊層級元素（block）：預設獨佔一行，不能並列顯示，能夠設定寬、高，寬度為父盒子的100%。例如：div、p、標題元素（h1-h6）、列表元素（ul li、dl dt dd）

3、行內元素（inline）：預設並排顯示，不能設定寬、高，寬度為內容的寬度。例如：span、a、b、i

4、margin-bottom 和margin-top 塌陷，以最大值為準。

脫標的元素的特性

只要是脫離了標準流，元素都是不區分行、塊的，體現在任何元素都可以設定寬、高了。都有了收縮的 性質，就是不設定寬度，就自動縮減為裡面內容的寬度。

浮動的元素有貼邊的性質，絕對位置的元素可以自由定位。

浮動float

浮動可以使區塊層級元素並排顯示，用於頁面配置。

注意：某個元素設定了浮動，則同級元素都需要設定浮動。

有高度的父盒子不用清除浮動，否則都需要清除浮動：

1）給父盒子加 { overflow: hidden;_zoom:0 /*IE6 的相容性問題*/}

2）隔牆法：給浮動元素的父盒子下加牆.clear{ clear: both;height: 10px;_font-size: 0; /*IE6 的相容性問題*/}

定位position

• position:relative; 相對定位
• position:absolute; 絕對位置
• position:fixed; 固定定位
• position:static;預設，沒有定位

1、position: relative;

相對定位不脫標，僅設定position: relative 沒有任何效果

相對定位是相對自己原來的位置進行移動，原位置保留，margin 將作用在原位置上

相對定位的用途非常的小，就是微調元素的位置

2、position:absolute;

絕對位置top left 是以頁面左上方作為參考。在實際應用中很少單獨使用，通常會“子絕父相”給父盒子設定position: relative;（相對定位），這樣子盒子會以父盒子作為參考。

1）絕對位置的盒子，不能以任何方式用margin 影響別的盒子

2）父盒子的padding 不會影響絕對位置的子盒子

3、position:fixed;

相對於瀏覽器視窗為參考定位

CSS中能夠脫標的屬性有3個：

• float:left/right
• position:absolute; 絕對位置
• position:fixed; 固定定位

 

時刻鼓勵自己：

 

       埋頭讀書，抬頭做人!

 

　　不登高山不知天之高也，不臨深溪不知地之厚也

 

　　懦弱的人只會裹足不前，莽撞的人只能引為燒身，只有真正勇敢的人才能所向披靡

 

　　我們這個世界，從不會給一個傷心的落伍者頒發獎牌。

 

　　海浪的品格,就是無數次被礁石擊碎又無數閃地撲向礁石、

 

　　鞋底磨穿了，不等於路走到了頭。

 

　　松馳的琴弦，永遠奏不出時代的強音。

 

　　躺在被窩裡的人，並不感到太陽的溫暖。

 

　　不安於現狀，不甘於平庸，就可能在勇於進取的奮鬥中奏響人生壯美的樂間。

 

　　不去耕耘，不去播種，再肥的沃土也長不出莊稼，不去奮鬥，不去創造，再美的青春也結不出碩果。

網頁排版中的浮動和定位（學習筆記）