一炫欺，文檔流的概念指什么得问？有哪種方式可以讓元素脫離文檔流?
答：文檔流
W3C規(guī)范中并沒有document flow這個概念，只有normal-flow局冰，那么什么是普通流呢吊洼，普通流就是html文檔中的元素如塊級元素茧痒、行內(nèi)元素依據(jù)他們的顯示屬性按照在html文檔中的先后次序依次顯示。其中塊級元素會自上而下依次排列融蹂，行內(nèi)元素會從左至右依次排布。
有三種方式可以讓元素脫離文檔流
絕對定位：position: absolute
固定定位：position: fixed
浮動：float:left/right
二弄企，有幾種定位方式超燃，分別是如何實現(xiàn)定位的，使用場景如何拘领？
答：資料顯示定位有6種方式意乓，包括inherit(繼承)、static（默認）、relative届良、absolute笆凌、fixed和sticky。以下我們著重介紹后四種定位方式
| position值 | 語義 | 使用場景 |
|---|---|---|
| relative | 讓這個元素"相對于"他自己的位置移動,但是還占居普通流中原來的位置 | 和absolute一起使用士葫，用于文本框或者圖片等的定位 |
| absolute | 絕對定位脫離了文檔流乞而，位置是相對于距離他最近的那個已定位的祖先元素確定的，祖先元素往往使用relative定位慢显。 | 用于文本框或者圖片等的定位 |
| fixed | 懸浮爪模，生成絕對定位的元素，相對于瀏覽器窗口進行定位荚藻。元素的位置通過 left, top, right以及 bottom屬性進行規(guī)定屋灌，它不隨滾動條滾動。 | 廣告窗口 |
| sticky | 這是CSS3新屬性应狱，表現(xiàn)類似position:relative和position:fixed的合體共郭。當在目標區(qū)域在屏幕中可見時，它的行為就像position:relative; 而當頁面滾動超出目標區(qū)域時疾呻，它的表現(xiàn)就像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的數(shù)缴允，他們都會顯示在父元素之上荚守，即壓在父元素上。只要他們的值是小于0的數(shù)练般，則顯示在父元素之下矗漾！
（7）相同z-index誰上誰下
相同的z-index其實有兩種情況
a. 如果兩個元素都沒有定位發(fā)生位置重合現(xiàn)象或者兩個都已定位元素且z-index相同發(fā)生位置重合現(xiàn)象，那么按文檔流順序薄料，后面的覆蓋前面的敞贡。
<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都可以使元素位置發(fā)生偏移?二者有什么區(qū)別谷市？
答：
-
position:relative：只有元素本身會發(fā)生偏移蛔垢，它還占據(jù)著原來的位置，后面的元素不會受到影響迫悠。 - 負margin：
當把元素的margin-top鹏漆、margin-left設為負數(shù)的時候，不僅元素本身會上移创泄、左移艺玲，也會影響到后面的元素發(fā)生位置偏移。
當把元素的margin-right鞠抑、margin-bottom設為負值的時候板驳，元素本身不發(fā)生偏移，但是后面的元素會受其影響碍拆。
參考資料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元素脫離標準流，漂浮在標準流之上庭呜，和標準流不是一個層次滑进。元素浮動之前，也就是在標準流中募谎，是豎向排列的扶关，而浮動之后可以理解為橫向排列。
浮動元素可以向左或向右移動数冬，直到它的外邊緣碰到一個元素（塊級元素或者行內(nèi)元素）的邊框或另一個浮元素的邊框為止节槐。
由于浮動框不在文檔的普通流中，所以文檔的普通流中的塊框表現(xiàn)得就像浮動框不存在一樣拐纱。
綜上：可以細說對其他浮動元素铜异，普通元素，和文字的影響
- 浮動元素之間總是緊緊靠在一起橫向排列（按照順序從左往右秸架，或者是從右向左）揍庄。如果父容器寬度有限，就會換行繼續(xù)橫向排列东抹。
- 普通元素會無視浮動元素蚂子，按照普通流的順序繼續(xù)排列（塊級元素從上往下，行內(nèi)元素從左向右）府阀，頁面顯示時缆镣，浮動元素會在普通元素的上方。
- 不管是塊級元素的文字還是行內(nèi)元素的文字试浙，文本都會會環(huán)繞浮動元素排列董瞻。
參考資料1參考資料2
八，清除浮動指什么? 如何清除浮動?
答：.clear : none/left/right/both用于清除浮動所帶來的影響;定義了元素的哪邊上不允許出現(xiàn)浮動元素.
一定要牢記：這個規(guī)則只能影響使用清除的元素本身田巴，不能影響其他元素钠糊。
