CSS的position/float/display

CSS的position/float/display

1、position

1. position屬性取值：static(默認)、relative、absolute、fixed、inherit。
2. postision：static；始終處於文檔流給予的位置。它能夠快速取消定位，讓top，right，bottom，left的值失效。在切換的時候能夠嘗試這個方法。除了static值，在其餘三個值的設置下，z-index纔會起做用。（確切地說z-index只在定位元素上有效）
3. position：relative和 absolute均可以用於定位，區別在於前者的div還屬於正常的文檔流，後者已是脫離了正常文檔流，不佔據空間位置，不會將父類撐開。定位原點 relative是相對於它在正常流中的默認位置偏移，它本來佔據的空間任然保留；absolute相對於第一個position屬性值不爲static 的父類。因此設置了position：absolute，其父類的該屬性值要注意，並且overflow：hidden也不能亂設置，由於不屬於正常文檔 流，不會佔據父類的高度，也就不會有滾動條。
4. position:fixed;舊版本IE不支持，倒是頗有用，定位原點相對於瀏覽器窗口，並且不能變。經常使用於header，footer，或者一些固定的懸浮div，隨滾動條滾動又穩定又流暢，比JS好多了。fixed能夠有不少創造性的佈局和做用，兼容性是問題。
5. position：inherit。規定從父類繼承position屬性的值，因此這個屬性也是有繼承性的，@一絲yisi 前輩注意下。可是任何版本的IE都不支持該屬性值。

2、float

1. float屬性取值：none(默認)、left、right、inherit。
2. float：left(或right)，向左（或右）浮動，直到它的邊緣碰到包含框或另外一個浮動框爲止。且脫離普通的文檔流，會被正常文檔流內的塊框忽略。不佔據空間，沒法將父類元素撐開。
3. 任何元素均可以浮動，浮動元素會生成一個塊級框，不論它自己是何種元素。所以，沒有必要爲浮動元素設置display：block。
4. 若是浮動非替換元素，則要指定一個明確的width，不然它們會盡量的窄。（什麼叫替換元素？根據元素自己的特色定義的， (X)HTML中的img、input、textarea、select、object都是替換元素，這些元素都沒有實際的內容。 (X)HTML 的大多數元素是不可替換元素，他們將內容直接告訴瀏覽器，將其顯示出來。）

3、display

1. display屬性取值：none、inline、inline-block、block、table相關屬性值、inherit。
2. display屬性規定元素應該生成的框的類型。文檔內任何元素都是框，塊框或行內框。
3. display：none和visiability：hidden均可以隱藏div，區別有點像absolute和relative，前者不佔據文檔的空間，後者仍是佔據文檔的位置。
4. display：inline和block，又叫行內元素和塊級元素。表現出來的區別就是block獨佔一行，在瀏覽器中一般垂直佈局，能夠用margin來控制塊級元素之間的間距；而inline以水平方式佈局，垂直方向的margin和padding都是無效的，大小跟內容同樣，且沒法設置寬高。inline就像塑料袋，內容怎麼樣，就長得怎麼樣；block就像盒子，有固定的寬和高。
5. nline-block就介於二者之間。
6. table相關的屬性值能夠用來垂直居中，效果通常。