文檔流的概念指什么？有哪種方式可以讓元素脫離文檔流?

網(wǎng)頁按照HTML排序自上而下，自左到右的排列，塊級元素橫占一行，行級元素由左到右順序排列就是文檔流。
浮動、絕對定位和fixed可以脫離文檔流。脫離文檔流就是不會按照既定的順序排列，會任由自己運動，其他盒子在定位的時候，會當做脫離文檔流的元素不存在而進行定位，使用float脫離文檔流時，其他盒子會無視這個元素，但其他盒子內(nèi)的文本依然會為這個元素讓出位置，環(huán)繞在周圍，而對于使用absolute positioning脫離文檔流的元素，其他盒子與其他盒子內(nèi)的文本都會無視它。

浮動

position:absolute

position:fixed

有幾種定位方式，分別是如何實現(xiàn)定位的，使用場景如何？

position:static：默認值。沒有定位，元素出現(xiàn)在正常的流中（忽略 top, bottom, left, right 或者 z-index 聲明）。
position:relative：生成相對定位的元素，相對于自己正常位置進行定位。用于元素位置不合適需要微調(diào)的時候。

position:relative

position:absolute：絕對定位，相對于position:relative的父或祖先元素，如果沒有會以body來定位元素。元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規(guī)定。
絕對定位使元素的位置與文檔流無關，因此不占據(jù)空間。這一點與相對定位不同，相對定位實際上被看作普通流定位模型的一部分，因為元素的位置相對于它在普通流中的位置。普通流中其它元素的布局就像絕對定位的元素不存在一樣。

position:absolute相對于其他元素的絕對定位

position:absolute相對于body的絕對定位

position:fixed：生成絕對定位的元素，相對于瀏覽器窗口進行定位。元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規(guī)定。

absolute, relative, fixed偏移的參考點分別是什么

absolute：以定位為relative的父或祖先元素為參考點，如果沒有會以body作為參考點偏移。
relative：以自身正常位置為參考點偏移。
fixed：以瀏覽器窗口為參考點偏移。
參看上題圖片。

z-index 有什么作用? 如何使用?

因relative而重疊的元素，可以用z-index來決定優(yōu)先級，數(shù)值大的在前面，覆蓋后面的元素。上圖為未設置z-index，下圖為設置了z-index。

z-index

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

position:relative使元素發(fā)生偏移，雖然能夠覆蓋其他元素，但是只是位置發(fā)生了偏移，對于文檔流沒有影響，其他元素還會以為它還在那個位置。
負margin使元素位置發(fā)生偏移，也能夠覆蓋其他元素，但是其后的元素也會跟著它移動，會影響文檔流。

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

把父元素設置成相對定位relative，子元素設置成絕對定位absolute，上偏移50%，左偏移50%，由于是點到點的偏移，所以元素會錯過居中的位置，需要用上邊距和左邊距的負邊距來回到劇中的位置，負邊距的數(shù)值為被偏移元素寬高的一半。

垂直水平居中

浮動元素有什么特征？對其他浮動元素、普通元素、文字分別有什么影響?

浮動元素會脫離文檔流，會在其他浮動后面繼續(xù)浮動，由于有渲染的先后，所以有時浮動的順序有所變化。
對于普通元素，浮動元素不會占據(jù)文檔流的位置，所以普通元素會認為它不存在而繼續(xù)文檔流，但是塊元素會在浮動元素的下面,行內(nèi)元素和塊元素中的行內(nèi)內(nèi)容會考慮浮動元素的邊界,因此會圍繞著浮動元素。
對于文字，文字會圍繞浮動元素。

清除浮動指什么? 如何清除浮動?

清除浮動是因為浮動會對正常文檔流產(chǎn)生影響，比如文字會圍繞浮動元素，為了消除這種影響，所以要清除浮動。
清除浮動方式：
clear:none：允許兩邊有浮動，默認值。
clear:left：不允許左面有浮動。
clear:right：不允許右面有浮動。
clear:both：兩邊都不允許有浮動，由于太過暴力，所以用的比較少。

****本文章版權屬 饑人谷_張世鈞和饑人谷 所有，如需轉載請務必注明出處。****