1.文檔流的概念指什么？有哪種方式可以讓元素脫離文檔流?
答：文檔流指元素在文檔中的位置由元素在html里的位置決定，塊級(jí)元素獨(dú)占一行，自上而下排列；內(nèi)聯(lián)元素從左到右排列
脫離文檔流的方式：
- 浮動(dòng)，通過(guò)設(shè)置float屬性
- 絕對(duì)定位，通過(guò)設(shè)置position:absolute
- 固定定位，通過(guò)設(shè)置position:fixed
2.有幾種定位方式，分別是如何實(shí)現(xiàn)定位的，使用場(chǎng)景如何？
- 要想了解CSS元素定位就需要了解position屬性了，position屬性有幾個(gè)常用值如下：
| 值 | 屬性 |
|---|---|
| inherit | 規(guī)定應(yīng)該從父元素繼承 position 屬性的值 |
| static | 默認(rèn)值,沒(méi)有定位，元素出現(xiàn)在正常的流中（忽略 top, bottom, left, right 或者 z-index 聲明） |
| relative | 生成相對(duì)定位的元素，相對(duì)于元素本身正常位置進(jìn)行定位,因此，left:20px會(huì)向元素的 left 位置添加20px |
| absolute | 生成絕對(duì)定位的元素，相對(duì)于static定位以外的第一個(gè)祖先元素（offset parent）進(jìn)行定位,元素的位置通過(guò) left, top, right以及 bottom屬性進(jìn)行規(guī)定 |
| fixed | 生成絕對(duì)定位的元素，相對(duì)于瀏覽器窗口進(jìn)行定位。元素的位置通過(guò) left, top, right以及 bottom屬性進(jìn)行規(guī)定 |
| sticky | CSS3新屬性，表現(xiàn)類似position:relative和position:fixed的合體，在目標(biāo)區(qū)域在屏幕中可見(jiàn)時(shí)，它的行為就像position:relative; 而當(dāng)頁(yè)面滾動(dòng)超出目標(biāo)區(qū)域時(shí)，它的表現(xiàn)就像position:fixed，它會(huì)固定在目標(biāo)位置 |
- 示例圖：
效果圖.png
3、absolute, relative, fixed偏移的參考點(diǎn)分別是什么？
- absolute參考點(diǎn)是離其最近設(shè)置了fixed、relative的父級(jí)（祖先）元素，如果父級(jí)元素沒(méi)有，則一層一層往上找，最終到body元素
- relative的參考點(diǎn)是其原來(lái)自身的位置
- fixed的參考點(diǎn)是瀏覽器的窗口
4、z-index 有什么作用? 如何使用?
答：因?yàn)榻^對(duì)定位與文檔流無(wú)關(guān)，所以絕對(duì)定位的元素可以覆蓋頁(yè)面上的其他元素，可以通過(guò)z-index屬性控制疊放順序，z-index越高，元素位置越靠上。
z-index只有在使用了定位屬性即positon的元素上才可使用；有較高z-index值的元素比z-index值較低的元素離讀者更近；z-index值是正負(fù)整數(shù)
示例圖.png
如上圖所示，我最后一個(gè)div雖然設(shè)置了z-index為2，比第二個(gè)div的z-index還高，但是因?yàn)闆](méi)有設(shè)置position，所以還是第二個(gè)div遮擋了最后一個(gè)。
5、position:relative和負(fù)margin都可以使元素位置發(fā)生偏移?二者有什么區(qū)別
- position: relative;是單獨(dú)對(duì)元素本身進(jìn)行渲染，不影響其他元素的布局；
1.png
- 而給margin設(shè)置負(fù)值，不但改變了元素本身，還改變了周圍其他元素的布。
2.png
6、如何讓一個(gè)固定寬高的元素在頁(yè)面上垂直水平居中?
可以利用position: absolute;將元素脫離文本流，然后設(shè)置left: 50%; top: 50%;從而使元素的左上角點(diǎn)位于頁(yè)面中點(diǎn)，最后通過(guò)調(diào)節(jié)元素的margin值（左上各負(fù)一半）將元素居中。如下圖：
3.png
更多垂直居中方法參考：CSS制作水平垂直居中對(duì)齊
7、浮動(dòng)元素有什么特征？對(duì)其他浮動(dòng)元素、普通元素、文字分別有什么影響?
答：在 CSS 中，我們通過(guò) float 屬性實(shí)現(xiàn)元素的浮動(dòng)。
特征：
- 浮動(dòng)元素脫離文檔流，原位置不繼續(xù)占用空間；
- 浮動(dòng)的框可以向左或向右移動(dòng)，直到它的外邊緣碰到包含框或另一個(gè)浮動(dòng)框的邊框?yàn)橹?/li>
- 浮動(dòng)元素表現(xiàn)類似于有不同的z-index值，即“浮”在頁(yè)面，使得其他塊框元素不受其影響。
- 雖然塊框不受其影響，但是浮動(dòng)框旁邊的行框被縮短，從而給浮動(dòng)框留出空間，行框圍繞浮動(dòng)框，造成文字環(huán)繞浮動(dòng)元素顯示。
對(duì)浮動(dòng)元素的影響.png
由上圖可看出，對(duì)其它浮動(dòng)元素的影響：浮動(dòng)元素會(huì)依次排在其之前浮動(dòng)元素左邊或右邊，直到其父元素不能放下，將會(huì)被擠到新的一行
對(duì)普通元素的影響.png
由上圖可看出，對(duì)普通元素的影響：浮動(dòng)元素將會(huì)浮在頁(yè)面上，其后的普通元素將會(huì)占據(jù)其原來(lái)位置
對(duì)文字的影響.png
由上圖可看出，對(duì)文字的影響：塊級(jí)元素會(huì)忽略浮動(dòng)元素，但塊級(jí)元素內(nèi)的內(nèi)聯(lián)則會(huì)留意浮動(dòng)元素的邊界，環(huán)繞著浮動(dòng)元素
8、清除浮動(dòng)指什么? 如何清除浮動(dòng)?
- 清除浮動(dòng)是指清除浮動(dòng)所帶來(lái)的影響，比如由于浮動(dòng)，父元素?zé)o法撐起高度，影響與父元素同級(jí)的元素；與浮動(dòng)元素同級(jí)的非浮動(dòng)元素會(huì)緊隨其后；若非第一個(gè)元素浮動(dòng)，則該元素之前的元素也需要浮動(dòng)，否則會(huì)影響布局
- 如何清除浮動(dòng)：可以通過(guò)clear屬性來(lái)清除浮動(dòng)（清除浮動(dòng)只能針對(duì)元素本身）CSS中的屬性是 clear：left | right | both | none；
清除浮動(dòng).png
更多清除浮動(dòng)方法參考：知乎
