一，文檔流的概念指什么？有哪種方式可以讓元素脫離文檔流?
答：文檔流
W3C規范中并沒有document flow這個概念，只有normal-flow，那么什么是普通流呢，普通流就是html文檔中的元素如塊級元素、行內元素依據他們的顯示屬性按照在html文檔中的先后次序依次顯示。其中塊級元素會自上而下依次排列，行內元素會從左至右依次排布。
有三種方式可以讓元素脫離文檔流
絕對定位：position: absolute
固定定位：position: fixed
浮動：float:left/right
二，有幾種定位方式，分別是如何實現定位的，使用場景如何？
答：資料顯示定位有6種方式，包括inherit(繼承)、static（默認）、relative、absolute、fixed和sticky。以下我們著重介紹后四種定位方式
| position值 | 語義 | 使用場景 |
|---|---|---|
| relative | 讓這個元素"相對于"他自己的位置移動,但是還占居普通流中原來的位置 | 和absolute一起使用，用于文本框或者圖片等的定位 |
| absolute | 絕對定位脫離了文檔流，位置是相對于距離他最近的那個已定位的祖先元素確定的，祖先元素往往使用relative定位。 | 用于文本框或者圖片等的定位 |
| fixed | 懸浮，生成絕對定位的元素，相對于瀏覽器窗口進行定位。元素的位置通過 left, top, right以及 bottom屬性進行規定，它不隨滾動條滾動。 | 廣告窗口 |
| sticky | 這是CSS3新屬性，表現類似position:relative和position:fixed的合體。當在目標區域在屏幕中可見時，它的行為就像position:relative; 而當頁面滾動超出目標區域時，它的表現就像position:fixed，它會固定在目標位置。 | 搜索框 |
三，absolute, relative, fixed偏移的參考點分別是什么？
答：
- relative：相對于自己在文檔流中的位置進行偏移。
- absolute：相對于距離他最近的那個已定位的祖先元素確定的，如果沒有已定位的祖先元素，那么就相對于body或者html。
- fixed：相對于瀏覽器窗口（viewport）進行定位。
四，z-index 有什么作用? 如何使用?
答：，Z-index 屬性用來設置元素的堆疊順序，擁有更高堆疊順序的元素總是會處于堆疊順序較低的元素的前面（Z軸：垂直于顯示器屏幕。）
1、CSS樣式表中Z-index屬性的一些特征：
- Z-index屬性的默認值是0
- 元素可擁有負的 z-index 屬性值，如z-index:-1
- Z-index屬性無繼承性
- Z-index屬性JavaScript 使用語法：object.style.zIndex="1"
- 幾乎所有主流瀏覽器都支持 Z-index 屬性
2、CSS樣式表中Z-index屬性的使用方法：
樣式代碼：.box {position:absolute; left:0px; top:0px; z-index:12}
CSS樣式表中Z-index屬性使用的注意事項：
（1）Z-index僅對定位元素有效（如position:relative\absolute\float）；
（2）Z-index只可比較同級元素。這也許是大家很容易忽視的問題。也就是說，Z-index只能對同級元素進行分層展示；
（3）Z-index的作用域：假設A和B兩個元素都設置了定位（相對定位、絕對定位、一個相對一個絕對定位都可以），且是同級元素，樣式為：.boxA{z-index:4}.boxB{z-index:5}于是，不難看出，元素B的層級要高于元素A，在此需要指出的是，A元素下面的子元素的層級也同樣都低于B元素里的子元素，即使你將A元素里的子元素設為z-index:9999；同理元素B里的子元素，即使是設的z-index:1它照樣比元素A的層級要高；
（4）這個屬性不會作用于窗口控件，如select對象.
（5）在父元素的子元素中設置Z-index的值，可以改變子元素之間的層疊關系;
（6）子元素的Z-index值不管是高于父元素還是低于父元素，只要他們的z-index值是大于等于0的數，他們都會顯示在父元素之上，即壓在父元素上。只要他們的值是小于0的數，則顯示在父元素之下！
（7）相同z-index誰上誰下
相同的z-index其實有兩種情況
a. 如果兩個元素都沒有定位發生位置重合現象或者兩個都已定位元素且z-index相同發生位置重合現象，那么按文檔流順序，后面的覆蓋前面的。
<div style="position:relative;width:200px;height:200px;background-color:#0e0;"></div><div style="position:relative; top:-50px; width:100px;height:100px;background-color:#00e;"><div>
b. 如果兩個元素都沒有設置z-index，使用默認值，一個定位一個沒有定位，那么定位元素覆蓋未定位元素
<div style="position:relative;top:50px;width:200px;height:200px;background-color:#0e0;"></div><div style=" width:100px;height:100px;background-color:#00e;"><div>
五，position:relative和負margin都可以使元素位置發生偏移?二者有什么區別？
答：
-
position:relative：只有元素本身會發生偏移，它還占據著原來的位置，后面的元素不會受到影響。 - 負margin：
當把元素的margin-top、margin-left設為負數的時候，不僅元素本身會上移、左移，也會影響到后面的元素發生位置偏移。
當把元素的margin-right、margin-bottom設為負值的時候，元素本身不發生偏移，但是后面的元素會受其影響。
參考資料1參考資料2
六，如何讓一個固定寬高的元素在頁面上垂直水平居中?
答：
- 絕對定位top left各50%。
- 負margin top left 二分之一元素寬 高。
使用以下代碼模板
.test{ width: X px; height: Y px; position:absolute; top: 50%; left: 50%; margin-top:-X/2 px; margin-left: -Y/2 px; }
舉例說明：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>normal flow</title>
<style>
.div1{
width: 200px;
height: 200px;
background-color: red;
position:absolute;
top: 50%;
left: 50%;
margin-top:-100px;
margin-left: -100px;
}
</style>
</head>
<body>
<div class="div1">我是在哪里都居中居中</div>
</body>
</html>
七，浮動元素有什么特征？對其他浮動元素、普通元素、文字分別有什么影響?
答：浮動可以理解為讓某個div元素脫離標準流，漂浮在標準流之上，和標準流不是一個層次。元素浮動之前，也就是在標準流中，是豎向排列的，而浮動之后可以理解為橫向排列。
浮動元素可以向左或向右移動，直到它的外邊緣碰到一個元素（塊級元素或者行內元素）的邊框或另一個浮元素的邊框為止。
由于浮動框不在文檔的普通流中，所以文檔的普通流中的塊框表現得就像浮動框不存在一樣。
綜上：可以細說對其他浮動元素，普通元素，和文字的影響
- 浮動元素之間總是緊緊靠在一起橫向排列（按照順序從左往右，或者是從右向左）。如果父容器寬度有限，就會換行繼續橫向排列。
- 普通元素會無視浮動元素，按照普通流的順序繼續排列（塊級元素從上往下，行內元素從左向右），頁面顯示時，浮動元素會在普通元素的上方。
- 不管是塊級元素的文字還是行內元素的文字，文本都會會環繞浮動元素排列。
參考資料1參考資料2
八，清除浮動指什么? 如何清除浮動?
答：.clear : none/left/right/both用于清除浮動所帶來的影響;定義了元素的哪邊上不允許出現浮動元素.
一定要牢記：這個規則只能影響使用清除的元素本身，不能影響其他元素。
