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

這期內(nèi)容當(dāng)中小編將會(huì)給大家?guī)?lái)有關(guān)CSS中的float、display、position屬性介紹，以專業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

position屬性：

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

static：默認(rèn)值，元素按照在文檔流中出現(xiàn)的順序渲染
absolute：絕對(duì)定位，元素相對(duì)于它的第一個(gè)被定位的祖先元素（非static）來(lái)進(jìn)行定位
fixed：元素相對(duì)于瀏覽器window進(jìn)行定位
relative：元素相對(duì)與它的正常位置進(jìn)行定位，因此"left:20"就表示在元素正常位置的基礎(chǔ)上，左移20像素的距離。

float屬性：

float 屬性定義元素在哪個(gè)方向浮動(dòng)。以往這個(gè)屬性總應(yīng)用于圖像，使文本圍繞在圖像周圍，不過(guò)在 CSS 中，任何元素都可以浮動(dòng)。浮動(dòng)元素會(huì)生成一個(gè)塊級(jí)框，而不論它本身是何種元素。
如果浮動(dòng)非替換元素，則要指定一個(gè)明確的寬度；否則，它們會(huì)盡可能地窄。
注釋：假如在一行之上只有極少的空間可供浮動(dòng)元素，那么這個(gè)元素會(huì)跳至下一行，這個(gè)過(guò)程會(huì)持續(xù)到某一行擁有足夠的空間為止。

none：默認(rèn)值。元素不浮動(dòng)，并會(huì)顯示在其在文本中出現(xiàn)的位置。
Left：元素向左浮動(dòng)。
Right：元素向右浮動(dòng)。

display屬性：

display屬性指定了一個(gè)DOM元素說(shuō)使用的盒子模型（box）。即元素應(yīng)該生成的框的類型。

Inline：默認(rèn)。此元素會(huì)被顯示為內(nèi)聯(lián)元素，元素前后沒(méi)有換行符。
None: 此元素不會(huì)被顯示。
Block: 此元素將顯示為塊級(jí)元素，此元素前后會(huì)帶有換行符。
inline-block: 行內(nèi)塊元素。這個(gè)值導(dǎo)致一個(gè)元素產(chǎn)生一個(gè)塊狀盒模型（block box），而本身作為單一的內(nèi)聯(lián)盒模型（inline box）流動(dòng)排列（flow），類似一個(gè)被替代的元素。Display值為inline-block的元素內(nèi)部形成一個(gè)塊狀盒模型，而本身形成類似一個(gè)內(nèi)聯(lián)的被替代元素”。即display為inline-block的元素既可以像塊狀元素一樣定義高度寬度，又可以和內(nèi)聯(lián)元素（比如文字）排列在一行。這個(gè)效果在頁(yè)面設(shè)計(jì)的時(shí)候，很多地方都可以帶來(lái)便利，最常見(jiàn)的莫過(guò)于設(shè)計(jì)導(dǎo)航時(shí)，既可以像inline元素那樣實(shí)現(xiàn)居中，又可以設(shè)置像block元素那樣設(shè)置單個(gè)菜單大小，還可以通過(guò)text-indent來(lái)隱藏文字顯示背景圖片。
list-item: 此元素會(huì)作為列表顯示。
table :此元素會(huì)作為塊級(jí)表格來(lái)顯示（類似 <table>），表格前后帶有換行符。

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

div、h2 或 p 元素常常被稱為塊級(jí)元素。這意味著這些元素顯示為一塊內(nèi)容，即“塊框”。與之相反，span 和 strong 等元素稱為“內(nèi)聯(lián)元素”，這是因?yàn)樗鼈兊膬?nèi)容顯示在行中，即“行內(nèi)框”。

您可以使用 display 屬性改 變生成的框的類型。這意味著，通過(guò)將 display 屬性設(shè)置為 block，可以讓內(nèi)聯(lián)元素（比如 <a> 元素）表現(xiàn)得像塊級(jí)元素一樣。還可以通過(guò)把 display 設(shè)置為 none，讓生成的元素根本沒(méi)有框。這樣的話，該框及其所有內(nèi)容就不再顯示，不占用文檔中的空間。
但是在一種情況下，即使沒(méi)有進(jìn)行顯式定義，也會(huì)創(chuàng)建塊級(jí)元素。這種情況發(fā)生在把一些文本添加到一個(gè)塊級(jí)元素（比如 div）的開頭。即使沒(méi)有把這些文本定義為段落，它也會(huì)被當(dāng)作段落對(duì)待：

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

在這種情況下，這個(gè)框稱為無(wú)名塊框，因?yàn)樗慌c專門定義的元素相關(guān)聯(lián)。

Css屬性：display, position和float的關(guān)系

如果一個(gè)元素的display屬性被設(shè)置為none，那么就不會(huì)生成元素對(duì)應(yīng)的box，這種情況下，float和position被忽略
否則（display非none），如果一個(gè)元素的 position屬性被設(shè)置為absolute或者fixed（都是絕對(duì)定位），這種情況下，float被忽略（float計(jì)算的值為 none），display屬性的值根據(jù)下表自動(dòng)計(jì)算。box的位置取決于屬性top，right，bottom，left以及box的容器
否則（display非none，并且position非absolute、fixed），如果float的值不為null（為left或者right），那么box是浮動(dòng)的并且display的值根據(jù)下表來(lái)計(jì)算
否則（display非none，并且position非absolute、fixed，float為none），如果元素是根元素，display的值根據(jù)下表來(lái)計(jì)算。（這種情況下有一個(gè)例外：在CSS2.1中定義，當(dāng)display被指定的值是list-item時(shí)，計(jì)算結(jié)果的display的值為block或者list-item）
否則（display非none，并且position非absolute、fixed，float為none，不是根元素），那么就按照被指定的display的屬性值來(lái)顯示。

表格 display屬性轉(zhuǎn)換：

指定值 inline-table   轉(zhuǎn)成table
指定值 inline, table-row-group, table-column, table-column-group, table-header-group, table-footer-group, table-row, table-cell, table-caption, inline-block    轉(zhuǎn)成block
其他任何的指定值都保持不變。

關(guān)于CSS中的float、display、position屬性就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到。