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