文檔流的概念，如何讓元素脫離文檔流

• 文檔流指的是瀏覽器按照html的內(nèi)容按順序解析并呈現(xiàn)，遇到行內(nèi)元素就往行內(nèi)放，遇到塊級(jí)元素就空一行放置，依次排列；
• 定位中的fixed、定位中的absolute、浮動(dòng)都可以讓元素脫離文檔流。

定位方式簡(jiǎn)介

• 有static、fixed、absolute、relative這四種定位方式；
• static是靜止，不進(jìn)行定位，元素還是處于正常的文檔流中，忽略上下左右的偏移和z-index聲明，是默認(rèn)值。
• fixed是把元素固定住，是相對(duì)于瀏覽器來(lái)定位的，會(huì)脫離文檔流，可以使用left、right、top、bottom來(lái)改變固定的位置；一般用于廣告、一些固定提示欄等你想要固定持續(xù)顯示的內(nèi)容。
• absolute是相對(duì)于上一個(gè)使用定位（static除外）的祖先元素進(jìn)行定位的，如果沒(méi)有使用定位的祖先元素，就相對(duì)于html文檔頁(yè)面進(jìn)行定位，會(huì)脫離文檔流，同樣使用left、right、top、bottom來(lái)設(shè)定偏移的位置；一般用于使用相對(duì)位置的場(chǎng)景，在父元素上加個(gè)relative，在給子元素設(shè)定absolute進(jìn)行相對(duì)偏移。
• relative是相對(duì)于元素自身在文檔流中的位置進(jìn)行偏移的，注意它并不會(huì)脫離文檔流，使用left、right、top、bottom來(lái)設(shè)定相對(duì)偏移的位置，一般用于微調(diào)整元素自身位置。

absolute, relative, fixed 偏移的參考點(diǎn)

• absolute, relative, fixed偏移的參考點(diǎn)分別是上一個(gè)使用除static以外定位的祖先元素（若沒(méi)有找到，則相對(duì)于html元素即文檔）、元素自身原本在文檔流中的位置、瀏覽器窗口。

z-index 的使用

• 可以設(shè)定元素的堆疊順序（可以理解為Z軸高度，越高離我們視野就越近，高度比它小的就被蓋住了），值越大，堆疊優(yōu)先級(jí)越高；使用時(shí)將你所要展示出來(lái)的元素的z-index值設(shè)得比其他遮擋它的元素的值大就可以。

position:relative和負(fù)margin使元素位置發(fā)生偏移的區(qū)別

• position:relative是單單把作用到的元素進(jìn)行一個(gè)位置偏移，而其他的元素不會(huì)因此發(fā)生位置的改變；而負(fù)margin是調(diào)整外邊距，這樣會(huì)影響到它周?chē)夭季趾臀恢谩?/li>

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

• 用position: absolute設(shè)置這個(gè)元素相對(duì)于頁(yè)面的top和left為50%，此時(shí)該元素的左上角這個(gè)點(diǎn)就垂直水平居中了，之后再用-margin讓其往左、往上分別移動(dòng)其寬高的一半，達(dá)到垂直水平居中的目的。
  

浮動(dòng)元素的特征及對(duì)其他元素的影響

• 浮動(dòng)元素會(huì)脫離文檔流，不占據(jù)空間；
• 其他浮動(dòng)元素跟它處于同一層，會(huì)緊挨著它的邊框放置，如果有其他元素有清除浮動(dòng)，則會(huì)另起一行放置；
• 普通元素因它脫離文檔流，所以會(huì)認(rèn)為它不存在，會(huì)頂上它的位置，所以普通元素的一部分會(huì)被擋住；
• 文字遇到浮動(dòng)元素邊框會(huì)避開(kāi)另起一行有環(huán)繞效果。

清除浮動(dòng)

• 清除浮動(dòng)指的是用clear屬性來(lái)設(shè)置是否允許它自身周?chē)嬖诟?dòng)元素，這樣可以讓浮動(dòng)元素因被排斥或排斥其他浮動(dòng)元素而再往下占據(jù)一行，從而消除對(duì)其他元素的影響；可以設(shè)置clear：left、right、both來(lái)選擇不允許哪一邊存在浮動(dòng)元素。