1.文檔流的概念指什么？有哪種方式可以讓元素脫離文檔流?
答：文檔流指元素在文檔中的位置由元素在html里的位置決定竟稳，塊級元素獨占一行窍霞，自上而下排列；內(nèi)聯(lián)元素從左到右排列
脫離文檔流的方式：
- 浮動边涕，通過設(shè)置float屬性
- 絕對定位，通過設(shè)置position:absolute
- 固定定位褂微，通過設(shè)置position:fixed
2.有幾種定位方式奥吩，分別是如何實現(xiàn)定位的，使用場景如何蕊梧？
- 要想了解CSS元素定位就需要了解position屬性了霞赫，position屬性有幾個常用值如下：
| 值 | 屬性 |
|---|---|
| inherit | 規(guī)定應(yīng)該從父元素繼承 position 屬性的值 |
| static | 默認值,沒有定位，元素出現(xiàn)在正常的流中（忽略 top, bottom, left, right 或者 z-index 聲明） |
| relative | 生成相對定位的元素肥矢，相對于元素本身正常位置進行定位,因此端衰，left:20px會向元素的 left 位置添加20px |
| absolute | 生成絕對定位的元素，相對于static定位以外的第一個祖先元素（offset parent）進行定位,元素的位置通過 left, top, right以及 bottom屬性進行規(guī)定 |
| fixed | 生成絕對定位的元素甘改，相對于瀏覽器窗口進行定位旅东。元素的位置通過 left, top, right以及 bottom屬性進行規(guī)定 |
| sticky | CSS3新屬性，表現(xiàn)類似position:relative和position:fixed的合體十艾，在目標(biāo)區(qū)域在屏幕中可見時抵代，它的行為就像position:relative; 而當(dāng)頁面滾動超出目標(biāo)區(qū)域時，它的表現(xiàn)就像position:fixed忘嫉，它會固定在目標(biāo)位置 |
- 示例圖：
效果圖.png
3荤牍、absolute, relative, fixed偏移的參考點分別是什么案腺？
- absolute參考點是離其最近設(shè)置了fixed、relative的父級（祖先）元素康吵，如果父級元素沒有劈榨，則一層一層往上找，最終到body元素
- relative的參考點是其原來自身的位置
- fixed的參考點是瀏覽器的窗口
4晦嵌、z-index 有什么作用? 如何使用?
答：因為絕對定位與文檔流無關(guān)同辣，所以絕對定位的元素可以覆蓋頁面上的其他元素，可以通過z-index屬性控制疊放順序惭载，z-index越高旱函，元素位置越靠上。
z-index只有在使用了定位屬性即positon的元素上才可使用描滔；有較高z-index值的元素比z-index值較低的元素離讀者更近陡舅；z-index值是正負整數(shù)
示例圖.png
如上圖所示，我最后一個div雖然設(shè)置了z-index為2伴挚，比第二個div的z-index還高，但是因為沒有設(shè)置position灾炭，所以還是第二個div遮擋了最后一個茎芋。
5、position:relative和負margin都可以使元素位置發(fā)生偏移?二者有什么區(qū)別
- position: relative;是單獨對元素本身進行渲染蜈出，不影響其他元素的布局田弥；
1.png
- 而給margin設(shè)置負值，不但改變了元素本身铡原，還改變了周圍其他元素的布偷厦。
2.png
6、如何讓一個固定寬高的元素在頁面上垂直水平居中?
可以利用position: absolute;將元素脫離文本流燕刻，然后設(shè)置left: 50%; top: 50%;從而使元素的左上角點位于頁面中點只泼，最后通過調(diào)節(jié)元素的margin值（左上各負一半）將元素居中。如下圖：
3.png
更多垂直居中方法參考：CSS制作水平垂直居中對齊
7卵洗、浮動元素有什么特征请唱？對其他浮動元素、普通元素过蹂、文字分別有什么影響?
答：在 CSS 中十绑，我們通過 float 屬性實現(xiàn)元素的浮動。
特征：
- 浮動元素脫離文檔流酷勺，原位置不繼續(xù)占用空間本橙；
- 浮動的框可以向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動框的邊框為止
- 浮動元素表現(xiàn)類似于有不同的z-index值脆诉，即“浮”在頁面甚亭，使得其他塊框元素不受其影響贷币。
- 雖然塊框不受其影響，但是浮動框旁邊的行框被縮短狂鞋，從而給浮動框留出空間片择，行框圍繞浮動框，造成文字環(huán)繞浮動元素顯示骚揍。
對浮動元素的影響.png
由上圖可看出字管，對其它浮動元素的影響：浮動元素會依次排在其之前浮動元素左邊或右邊，直到其父元素不能放下信不，將會被擠到新的一行
對普通元素的影響.png
由上圖可看出嘲叔，對普通元素的影響：浮動元素將會浮在頁面上，其后的普通元素將會占據(jù)其原來位置
對文字的影響.png
由上圖可看出抽活，對文字的影響：塊級元素會忽略浮動元素硫戈，但塊級元素內(nèi)的內(nèi)聯(lián)則會留意浮動元素的邊界，環(huán)繞著浮動元素
8下硕、清除浮動指什么? 如何清除浮動?
- 清除浮動是指清除浮動所帶來的影響丁逝，比如由于浮動，父元素?zé)o法撐起高度梭姓，影響與父元素同級的元素霜幼；與浮動元素同級的非浮動元素會緊隨其后；若非第一個元素浮動誉尖，則該元素之前的元素也需要浮動罪既，否則會影響布局
- 如何清除浮動：可以通過clear屬性來清除浮動（清除浮動只能針對元素本身）CSS中的屬性是 clear：left | right | both | none；
清除浮動.png
更多清除浮動方法參考：知乎
