CSS框模型、定位和浮動(dòng)

1、CSS框模型、定位和浮動(dòng)框模型、定位和浮動(dòng)框模型(Box Model) 一、元素內(nèi)容、內(nèi)邊距、邊框和外邊距二、水平、垂直屬性簡(jiǎn)介三、外邊距合并的概念及意義框模型框模型(Box Model) 元素內(nèi)容、內(nèi)邊距、邊框和外邊距元素內(nèi)容、內(nèi)邊距、邊框和外邊距元素框的最內(nèi)部分是實(shí)際的內(nèi)容，直接包圍內(nèi)容的是內(nèi)邊距。內(nèi)邊距呈現(xiàn)了元素的背景。內(nèi)邊距的邊緣是邊框。邊框以外是外邊距，外邊距默認(rèn)是透明的，因此不會(huì)遮擋其后的任何元素。提示：提示：背景應(yīng)用于由內(nèi)容和內(nèi)邊距、邊框組成的區(qū)域?？蚰Ｐ涂蚰Ｐ?Box Model) 水平、垂直屬性水平、垂直屬性水平格式化：margin-left、border-left、padd

2、ing-left、width、padding-right、border-right、margin-right垂直格式化：margin-top、border-top、padding-top、height、padding-bottom、border-bottom、margin-bottom使用autoauto的屬性會(huì)確定所需的長(zhǎng)度，從而使用元素框的寬度等于父元素的width框模型框模型(Box Model) 外邊距合并外邊距合并外邊距合并指的是，當(dāng)兩個(gè)垂直外邊距相遇時(shí)，它們將形成一個(gè)外邊距。合并后的外邊距的高度等于兩個(gè)發(fā)生合并的外邊距的高度中的較大者。元素之間會(huì)發(fā)生外邊距合并元素自身會(huì)發(fā)生外邊距合

3、并框模型框模型(Box Model) 元素之間的外邊距合并元素之間的外邊距合并當(dāng)一個(gè)元素出現(xiàn)在另一個(gè)元素上面時(shí)，第一個(gè)元素的下外邊距與第二個(gè)元素的上外邊距會(huì)發(fā)生合并。框模型框模型(Box Model) 元素之間的外邊距合并元素之間的外邊距合并當(dāng)一個(gè)元素包含在另一個(gè)元素中時(shí)（假設(shè)沒(méi)有內(nèi)邊距或邊框把外邊距分隔開(kāi)），它們的上和/或下外邊距也會(huì)發(fā)生合并?？蚰Ｐ涂蚰Ｐ?Box Model) 元素自身的外邊距合并元素自身的外邊距合并假設(shè)有一個(gè)空元素，它有外邊距，但是沒(méi)有邊框或填充。在這種情況下，上外邊距與下外邊距就碰到了一起，它們會(huì)發(fā)生合并：框模型框模型(Box Model) 元素自身的外邊距合并元素自身

4、的外邊距合并如果這個(gè)外邊距遇到另一個(gè)元素的外邊距，它還會(huì)發(fā)生合并：?？蚰Ｐ涂蚰Ｐ?Box Model) 外邊距合并的意義外邊距合并的意義以由幾個(gè)段落組成的典型文本頁(yè)面為例。第一個(gè)段落上面的空間等于段落的上外邊距。如果沒(méi)有外邊距合并，后續(xù)所有段落之間的外邊距都將是相鄰上外邊距和下外邊距的和。這意味著段落之間的空間是頁(yè)面頂部的兩倍。如果發(fā)生外邊距合并，段落之間的上外邊距和下外邊距就合并在一起，這樣各處的距離就一致了。定位和浮動(dòng)定位和浮動(dòng)定位的思想和機(jī)制定位的思想和機(jī)制定位的基本思想很簡(jiǎn)單，它允許你定義元素框相對(duì)于其正常位置應(yīng)該出現(xiàn)的位置，或者相對(duì)于父元素、另一個(gè)元素甚至瀏覽器窗口本身的位置。CSS

5、 有三種基本的定位機(jī)制：普通流、浮動(dòng)和絕對(duì)定位。除非專門(mén)指定，否則所有框都在普通流中定位。也就是說(shuō)，普通流中的元素的位置由元素在 (X)HTML 中的位置決定。塊級(jí)框從上到下一個(gè)接一個(gè)地排列，框之間的垂直距離是由框的垂直外邊距計(jì)算出來(lái)定位和浮動(dòng)定位和浮動(dòng)position屬性屬性static元素框正常生成。塊級(jí)元素生成一個(gè)矩形框，作為文檔流的一部分，行內(nèi)元素則會(huì)創(chuàng)建一個(gè)或多個(gè)行框，置于其父元素中。relative元素框偏移某個(gè)距離。元素仍保持其未定位前的形狀，它原本所占的空間仍保留。定位和浮動(dòng)定位和浮動(dòng)position 屬性屬性absolute元素框從文檔流完全刪除，并相對(duì)于其包含塊定位。包含塊

6、可能是文檔中的另一個(gè)元素或者是初始包含塊。元素原先在正常文檔流中所占的空間會(huì)關(guān)閉，就好像元素原來(lái)不存在一樣。元素定位后生成一個(gè)塊級(jí)框，而不論原來(lái)它在正常流中生成何種類型的框。fixed元素框的表現(xiàn)類似于將 position 設(shè)置為 absolute，不過(guò)其包含塊是視窗本身。提示：相對(duì)定位實(shí)際上被看作普通流定位模型的一部分，因?yàn)樵氐奈恢孟鄬?duì)于它在普通流中的位置。定位和浮動(dòng)定位和浮動(dòng)相對(duì)定位相對(duì)定位如果對(duì)一個(gè)元素進(jìn)行相對(duì)定位，它將出現(xiàn)在它所在的位置上。然后，可以通過(guò)設(shè)置垂直或水平位置，讓這個(gè)元素“相對(duì)于”它的起點(diǎn)進(jìn)行移動(dòng)。在使用相對(duì)定位時(shí)，無(wú)論是否進(jìn)行移動(dòng)，元素仍然占據(jù)原來(lái)的空間。因此，移動(dòng)元素

7、會(huì)導(dǎo)致它覆蓋其它框。例:如果將 top 設(shè)置為 20px，那么框?qū)⒃谠恢庙敳肯旅?20 像素的地方。如果 left 設(shè)置為 30 像素，那么會(huì)在元素左邊創(chuàng)建 30 像素的空間，也就是將元素向右移動(dòng)。定位和浮動(dòng)定位和浮動(dòng)相對(duì)定位相對(duì)定位例:如果將 top 設(shè)置為 20px，那么框?qū)⒃谠恢庙敳肯旅?20 像素的地方。如果 left 設(shè)置為 30 像素，那么會(huì)在元素左邊創(chuàng)建 30 像素的空間，也就是將元素向右移動(dòng)。定位和浮動(dòng)定位和浮動(dòng)絕對(duì)定位絕對(duì)定位絕對(duì)定位使元素的位置與文檔流無(wú)關(guān)，因此不占據(jù)空間。這一點(diǎn)與相對(duì)定位不同，相對(duì)定位實(shí)際上被看作普通流定位模型的一部分，因?yàn)樵氐奈恢孟鄬?duì)于它在普通流中

8、的位置。絕對(duì)定位的元素的位置相對(duì)于最近的已定位祖先元素最近的已定位祖先元素，如果元素沒(méi)有已定位的祖先元素，那么它的位置相對(duì)于最初的包含塊最初的包含塊（根據(jù)用戶代理的不同，最初的包含塊可能是畫(huà)布或 HTML 元素）。提示：因?yàn)榻^對(duì)定位的框與文檔流無(wú)關(guān)，所以它們可以覆蓋頁(yè)面上的其它元素。可以通過(guò)設(shè)置 z-index 屬性來(lái)控制這些框的堆放次序。定位和浮動(dòng)定位和浮動(dòng)絕對(duì)定位絕對(duì)定位例:#box_relative position: absolute; left: 30px; top: 20px;定位和浮動(dòng)定位和浮動(dòng)CSS浮動(dòng)浮動(dòng)浮動(dòng)的框可以向左或向右移動(dòng)，直到它的外邊緣碰到包含框或另一個(gè)浮動(dòng)框的邊框

9、為止。由于浮動(dòng)框不在文檔的普通流中，所以文檔的普通流中的塊框表現(xiàn)得就像浮動(dòng)框不存在一樣。通過(guò) float 屬性實(shí)現(xiàn)元素的浮動(dòng)。定位和浮動(dòng)定位和浮動(dòng)CSS浮動(dòng)浮動(dòng)當(dāng)把框 1 向右浮動(dòng)時(shí)，它脫離文檔流并且向右移動(dòng)，直到它的右邊緣碰到包含框的右邊緣：定位和浮動(dòng)定位和浮動(dòng)CSS浮動(dòng)浮動(dòng)當(dāng)框 1 向左浮動(dòng)時(shí)，它脫離文檔流并且向左移動(dòng)，直到它的左邊緣碰到包含框的左邊緣。因?yàn)樗辉偬幱谖臋n流中，所以它不占據(jù)空間，實(shí)際上覆蓋住了框 2，使框 2 從視圖中消失。如果把所有三個(gè)框都向左移動(dòng)，那么框 1 向左浮動(dòng)直到碰到包含框，另外兩個(gè)框向左浮動(dòng)直到碰到前一個(gè)浮動(dòng)框。定位和浮動(dòng)定位和浮動(dòng)CSS浮動(dòng)浮動(dòng)如果包含框太窄，無(wú)法容納水平排列的三個(gè)浮動(dòng)元素，那么其它浮動(dòng)塊向下移動(dòng)，直到有足夠的空間。如果浮動(dòng)元素的高度不同，那么當(dāng)它們向下移動(dòng)時(shí)可能被其它浮動(dòng)元素“卡住”：定位和浮動(dòng)定位和浮動(dòng)CSS浮動(dòng)浮動(dòng)浮動(dòng)框旁邊的行框被縮短，從而給浮動(dòng)框留出空間，行框圍繞浮動(dòng)框。定位和浮動(dòng)定位和浮動(dòng)CSS浮動(dòng)浮動(dòng)要想阻止行框圍繞浮動(dòng)框