CSS中的float、display、position屬性介紹

這期內容當中小編將會給大家帶來有關CSS中的float、display、position屬性介紹，以專業的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

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 :此元素會作為塊級表格來顯示（類似 <table>），表格前后帶有換行符。

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

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

您可以使用 display 屬性改 變生成的框的類型。這意味著，通過將 display 屬性設置為 block，可以讓內聯元素（比如 <a> 元素）表現得像塊級元素一樣。還可以通過把 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中的float、display、position屬性就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。