<div>之定位

標籤：

在使用盒子模型的過程中，如何放置各種類型的“盒子”，就存在定位、浮動等問題。下面就日常運用過程中出現過的情況總結如下（陸續加入中....）

一、圖片直接做<div>的背景

 在<div>配合使用<img>的過程中，如果在<div>中直接使用<img>，就不存在指定<div>的高度及寬度的問題，因為<img>作為行級元素，根據其自身的情況（高度及寬度）能夠佔有一部分空間，這樣就能夠正常顯示。如果圖片不做為一個單獨的元素，而是做為<div>的一個屬性——背景圖片來進行處理，就必須指定高度及寬度（此時的高度及寬度均為0px）。

二、浮動元素的定位

元素通過float後，雖然脫離了文檔流（也就是不受html的從上到下、從左至右的一個文檔順序），但是它還是存在一個顯示、定位的問題。特徵一：浮動元素的定位與普通元素的定位一樣，還是基於正常的文檔流，從文檔流抽出後儘可能的移動至左邊或者右邊；特徵二：文字內容會圍繞在它周圍（其它區塊層級元素會處在它的下面，行級元素圍繞在它的周圍）；特徵三：在文檔流中的其它元素會填補它的位置。

基於以上特徵,在進行float後，再進行positoin定位，根據需要，選擇absolute、fix、relative中的一種方式。

<div>之定位