CSS定位機(jī)制

CSS 有三種定位機(jī)制 普通流(文檔流)、浮動(dòng)和絕對(duì)定位。浮動(dòng)和絕對(duì)定位可以讓一個(gè)元素脫離文檔流。

文檔流

顧名思義，普通流中的元素的位置由在HTML中的位置決定，根據(jù)上下級(jí)和前后的順序，一個(gè)一個(gè)的排列在界面上；當(dāng)然根據(jù)元素的類型不一樣，排列的方式會(huì)不一樣，但先后順序，顯示層次關(guān)系不會(huì)改變；
一般在HTML元素分為兩種：塊級(jí)元素和行內(nèi)元素。像div,p這些的元素屬于塊級(jí)元素；而span,strong等屬于行內(nèi)元素。塊級(jí)元素是從上到下一行一行的排列，默認(rèn)一個(gè)塊級(jí)元素會(huì)占用一行，而跟在后面的元素會(huì)令起一行排列；行內(nèi)元素是在一行中水平布置，從前到后的排列。引用來源

通過POSITION屬性，可以選擇4種不同類型的定位。

• 1.STATIC
  默認(rèn)值。沒有定位，出現(xiàn)在普通流中（忽略top,bottom,left,right或者Z-INDEX。）
• 2.FIXED
  生成絕對(duì)定位元素，相對(duì)于瀏覽器窗口（參考點(diǎn)），脫離文檔流，元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進(jìn)行設(shè)定。
  對(duì)于定位元素（非static）， Z-INDEX用來控制層疊元素的顯示優(yōu)先級(jí)，值越大優(yōu)先級(jí)越高。如果兩個(gè)元素都定位在相同的位置并且沒有使用Z-index，那么后面定義的CSS屬性比前面定義的CSS屬性的層級(jí)高。
• 3.RELATIVE
  生成相對(duì)定位的元素，相對(duì)于其正常位置（參考點(diǎn)是自身）進(jìn)行定位。偏移之后的該元素的原來位置被保留。沒有脫離文檔流。
• 4.ABSOLUTE
  生成絕對(duì)定位的元素，相對(duì)于 static 定位以外的第一個(gè)父元素進(jìn)行定位（參考點(diǎn)）。元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進(jìn)行規(guī)定。

position:relative和負(fù)margin都可以使元素位置發(fā)生偏移?二者有什么區(qū)別

position:relative 是CSS的一種定位機(jī)制，定位之后該元素的原位置被保留，后面的元素不會(huì)跟進(jìn)。
負(fù)margin 是CSS盒子模型中的一個(gè)屬性，使用負(fù)margin之后，該元素原有的空間會(huì)被后面的元素填充。

如何讓一個(gè)固定寬高的元素在頁(yè)面上垂直水平居中?

詳情見CSS各種居中

浮動(dòng)

浮動(dòng)可以向左或向右移動(dòng)，直到它的外邊緣碰到包含框或另一個(gè)浮動(dòng)框的邊框?yàn)橹梗ㄗ⒁猓焊?dòng)的元素不是一直跑，跑到頁(yè)面的最左邊或者最右邊）。 由于浮動(dòng)框不在文檔的普通流中，所以文檔的普通流中的塊框表現(xiàn)得就像浮動(dòng)框不存在一樣。

浮動(dòng)元素有什么特征？對(duì)其他浮動(dòng)元素、普通元素、文字分別有什么影響?

浮動(dòng)元素的特征：脫離文檔流。想要浮動(dòng)（或絕對(duì)定位）元素要設(shè)置寬度，否則浮動(dòng)（或絕對(duì)定位）的寬度會(huì)收縮，收縮成和內(nèi)容一樣的寬度。

清除浮動(dòng)指什么? 如何清除浮動(dòng)?

因?yàn)楦?dòng)的元素會(huì)對(duì)其后面的元素產(chǎn)生如下影響，所以我們要清除浮動(dòng)。

• 1.父元素的高度無法被撐開，影響與父元素同級(jí)的元素
• 2.與浮動(dòng)元素同級(jí)的非浮動(dòng)元素會(huì)跟隨其后
• 3.若非第一個(gè)元素浮動(dòng)，則該元素之前的元素也需要浮動(dòng)，否則會(huì)影響頁(yè)面顯示的結(jié)構(gòu)
  使用CSS中的clear:both;屬性來清除元素的浮動(dòng)可解決2、3問題。

對(duì)于1的情況

.clearfix:before, .clearfix:after{ content: ""; display: table;}

或者BFC

 overflow:hidden; _zoom:1; /* for ie 6*/

以上相關(guān)內(nèi)容來源于饑人谷課件