深入理解CSS中的position、float、display屬性，以及三者的關係

這篇文章主要講了CSS中的position、float、display屬性，以及position、float、display屬性之間的關係，有需要的朋友可以參考一下，希望可以幫助到你。

position屬性：

position屬性指出一個元素的定位方法。有4種可能值：static, relative, absolute or fixed：

static：預設值，元素按照在文檔流中出現的順序渲染
absolute：絕對定位，元素相對於它的第一個被定位的祖先元素（非static）來進行定位
fixed：元素相對於瀏覽器window進行定位
relative：元素相對與它的正常位置進行定位，因此"left:20"就表示在元素正常位置的基礎上，左移20像素的距離。

float屬性：

float 屬性定義元素在哪個方向浮動。以往這個屬性總應用於圖像，使文字圍繞在圖像周圍，不過在 CSS 中，任何元素都可以浮動。浮動元素會產生一個區塊級框，而不論它本身是何種元素。
如果浮動非替換元素，則要指定一個明確的寬度；否則，它們會盡可能地窄。
註解：假如在一行之上只有極少的空間可供浮動元素，那麼這個元素會跳至下一行，這個過程會持續到某一行擁有足夠的空間為止。

none：預設值。元素不浮動，並會顯示在文字中出現的位置。
Left：元素向左浮動。
Right：元素向右浮動。

display屬性：

display屬性指定了一個DOM元素說使用的盒子模型（box）。即元素應該產生的框的類型。

Inline：預設。此元素會被顯示為內聯元素，元素前後沒有換行符號。
None: 此元素不會被顯示。
Block: 此元素將顯示為區塊級元素，此元素前後會帶有換行符號。
inline-block: 行內塊元素。這個值導致一個元素產生一個塊狀盒模型（block box），而本身作為單一的內聯盒模型（inline box）流動排列（flow），類似一個被替代的元素。 Display值為inline-block的元素內部形成一個塊狀盒模型，而本身形成類似一個內聯的被替代元素」。即display為inline-block的元素既可以像塊狀元素一樣定義高度寬度，又可以和內聯元素（例如文字）排列在一行。這個效果在頁面設計的時候，很多地方都可以帶來便利，最常見的莫過於設計導航時，既可以像inline元素那樣實現居中，又可以設置像block元素那樣設定單一選單大小，也可以透過text-indent來隱藏文字顯示背景圖片。
list-item: 此元素會顯示為清單。
table :此元素會以區塊級表格顯示（類似f5d188ed2c074f8b944552db028f98a1），表格前後有換行符號。

CSS框模型（盒子模型） 一切皆為框

div、h1 或p 元素常常被稱為區塊級元素。這意味著這些元素顯示為一塊內容，即“區塊框”。與之相反，span 和strong 等元素稱為“內聯元素”，這是因為它們的內容顯示在行中，即「行內框」。

您可以使用display 屬性改變產生的框的類型。這意味著，透過將display 屬性設為block，可以讓內聯元素（例如3499910bf9dac5ae3c52d5ede7383485 元素）表現得像區塊級元素一樣。也可以透過把display 設定為none，讓產生的元素根本沒有框。這樣的話，該框及其所有內容就不再顯示，不佔用文件中的空間。
但是在一種情況下，即使沒有進行明確定義，也會建立區塊級元素。這種情況發生在把一些文字加入到一個區塊級元素（例如div）的開頭。即使沒有把這些文字定義為段落，它也會被當作段落對待：

<div> 
some text 
<p>Some more text.</p> 
</div>

在這種情況下，這個框稱為無名塊框，因為它不與專門定義的元素相關聯。

Css屬性：display, position和float的關係

如果一個元素的display屬性被設定為none，那麼就不會產生元素對應的box，這種情況下，float和position被忽略
否則（display非none），如果一個元素的position屬性被設定為absolute或fixed（都是絕對定位），在這種情況下，float被忽略（float計算的值為none），display屬性的值會根據下表自動計算。 box的位置取決於屬性top，right，bottom，left以及box的容器
否則（display非none，並且position非absolute、fixed），如果float的值不為null（為left或right），那麼box是浮動的並且display的值根據下表來計算
否則（display非none，並且position非absolute、fixed，float為none），如果元素是根元素，display的值根據下表來計算。 （這種情況下有一個例外：在CSS2.1中定義，當display被指定的值是list-item時，計算結果的display的值為block或list-item）
否則（display非none，且position非absolute、fixed，float為none，不是根元素），那麼就依照被指定的display的屬性值來顯示。

表格display屬性轉換：

指定值inline-table   轉換為table
指定值inline, table-row-group, table-column, table- column-group, table-header-group, table-footer-group, table-row, table-cell, table-caption, inline-block    轉換為block
其他任何的指定值保持不變。

以上是深入理解CSS中的position、float、display屬性，以及三者的關係的詳細內容。更多資訊請關注PHP中文網其他相關文章！