一.文檔流的概念指什么？有哪種方式可以讓元素脫離文檔流?
1.窗體自上而下分成一行行, 并在每行中按從左至右的順序排放元素,即為文檔流.
2.脫離文檔流：使用定位或浮動(dòng)
二.有幾種定位方式，分別是如何實(shí)現(xiàn)定位的，使用場(chǎng)景如何？
三種基本的定位機(jī)制：普通流（文檔流）、浮動(dòng)和絕對(duì)定位
- 普通流：
除非專門指定，否則所有框都在普通流中定位。也就是說(shuō)，普通流中的元素的位置由元素在 (X)HTML 中的位置決定。
塊級(jí)框從上到下一個(gè)接一個(gè)地排列，框之間的垂直距離是由框的垂直外邊距計(jì)算出來(lái)。
行內(nèi)框在一行中水平布置?？梢允褂盟絻?nèi)邊距、邊框和外邊距調(diào)整它們的間距。但是，垂直內(nèi)邊距、邊框和外邊距不影響行內(nèi)框的高度。由一行形成的水平框稱為行框（Line Box），行框的高度總是足以容納它包含的所有行內(nèi)框。不過(guò)，設(shè)置行高可以增加這個(gè)框的高度。 - 定位：通過(guò)使用 position 屬性，我們可以選擇 4 種不同類型的定位
| 屬性 | 描述 |
|---|---|
| static | 默認(rèn)值。沒(méi)有定位，元素出現(xiàn)在正常的流中（忽略 top, bottom, left, right 或者 z-index 聲明）。 |
| relative | 相對(duì)定位是“相對(duì)于”元素在文檔中的初始位置進(jìn)行定位，使用相對(duì)定位時(shí)，無(wú)論是否進(jìn)行移動(dòng)，元素仍然占據(jù)原來(lái)的空間。因此，移動(dòng)元素會(huì)導(dǎo)致它覆蓋其它框 |
| absolute | 相對(duì)于 static 定位以外的第一個(gè)父元素進(jìn)行定位。元素的位置通過(guò) "left", "top", "right" 以及 "bottom" 屬性進(jìn)行規(guī)定，絕對(duì)定位使元素的位置與文檔流無(wú)關(guān)，因此不占據(jù)空間 |
| fixed | 生成絕對(duì)定位的元素，相對(duì)于瀏覽器窗口進(jìn)行定位。元素的位置通過(guò) "left", "top", "right" 以及 "bottom" 屬性進(jìn)行規(guī)定。對(duì)于定位元素，z-index值越大優(yōu)先級(jí)越高 |
三.absolute, relative, fixed偏移的參考點(diǎn)分別是什么
- absolute：相對(duì)于 static 定位以外的第一個(gè)父元素進(jìn)行定位， 前提是父元素是定位元素，如果父元素不是定位元素，那么就按照嵌套關(guān)系逐級(jí)向上尋找，直到根節(jié)點(diǎn)（視窗）進(jìn)行定位。
如圖，灰色盒子沒(méi)有設(shè)置相對(duì)定位時(shí)，2號(hào)盒子相對(duì)于頁(yè)面定位，.box設(shè)置相對(duì)定位時(shí)，2號(hào)盒子相對(duì)于灰色盒子定位
- fixed：fixed屬性值相對(duì)于瀏覽器視窗進(jìn)行定位
如圖，紅色邊框盒子設(shè)置fixed屬性，相對(duì)于瀏覽器定位
-
relative：相對(duì)定位是“相對(duì)于”元素在文檔中的初始位置進(jìn)行定位
如圖，2號(hào)盒子相對(duì)于它的初始位置進(jìn)行定位
四.z-index 有什么作用? 如何使用?
- z-index 屬性設(shè)置元素的堆疊順序。擁有更高堆疊順序的元素總是會(huì)處于堆疊順序較低的元素的前面。
- 元素可擁有負(fù)的 z-index 屬性值。
-
Z-index 僅能在定位元素上奏效（例如 position:absolute;）
如圖，原先3號(hào)盒子覆蓋2號(hào)盒子，3號(hào)盒子默認(rèn)z-index值為0，設(shè)置2號(hào)盒子z-index屬性為1時(shí),2號(hào)盒子覆蓋了3號(hào)盒子
五.position:relative和負(fù)margin都可以使元素位置發(fā)生偏移?二者有什么區(qū)別
position:relative元素發(fā)生偏移時(shí)，初始空間還被占據(jù)著。而負(fù)margin不再占據(jù)初始空間。也就是說(shuō)，margin設(shè)置負(fù)值，不但改變了元素本身，還改變了周圍其他元素的布局。
如圖，設(shè)置2號(hào)盒子的position:relative屬性，left為20px，1號(hào)盒子和3號(hào)盒子不受影響
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style media="screen">
.box {
width: 550px;
height: 550px;
border: 1px solid;
background-color: #ccc;
}
.box1 {
width: 50px;
height: 50px;
border: 1px solid red;
background-color: red;
}
.box2 {
width: 50px;
height: 50px;
border: 1px solid blue;
background-color: blue;
position: relative;
left: 20px;
}
.box3 {
width: 50px;
height: 50px;
border: 1px solid green;
background-color: green;
}
</style>
</head>
<body>
<div class="box">
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
</div>
</body>
</html>
如圖，設(shè)置2號(hào)盒子margin：-20px，1號(hào)盒子和3號(hào)盒子均受影響
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style media="screen">
.box {
width: 550px;
height: 550px;
border: 1px solid;
background-color: #ccc;
}
.box1 {
width: 50px;
height: 50px;
border: 1px solid red;
background-color: red;
}
.box2 {
width: 50px;
height: 50px;
border: 1px solid blue;
background-color: blue;
margin: -20px;
}
.box3 {
width: 50px;
height: 50px;
border: 1px solid green;
background-color: green;
}
</style>
</head>
<body>
<div class="box">
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
</div>
</body>
</html>
六.如何讓一個(gè)固定寬高的元素在頁(yè)面上垂直水平居中?
.box1 {
width: 50px;
height: 50px;
border: 1px solid ;
background-color:red;
position: absolute;
left: 50%; top: 50%;
margin-left: -25px;
margin-top: -25px;
}
利用position: absolute;將元素脫離文本流，然后設(shè)置left: 50%; top: 50%;從而使元素的左上角點(diǎn)位于頁(yè)面中點(diǎn)，最后通過(guò)調(diào)節(jié)元素的margin值（左上各負(fù)一半）將元素居中。
七.浮動(dòng)元素有什么特征？對(duì)其他浮動(dòng)元素、普通元素、文字分別有什么影響?
- 浮動(dòng)的框可以左右移動(dòng)，直至它的外邊緣遇到包含框或者另一個(gè)浮動(dòng)框的邊緣
- 浮動(dòng)框不屬于文檔中的普通流，顧名思義，就是漂浮于普通流之上，像浮云一樣，但是只能左右浮動(dòng)，文檔中的普通流就會(huì)表現(xiàn)得和浮動(dòng)框不存在一樣
- 當(dāng)一個(gè)元素浮動(dòng)之后，不會(huì)影響到塊級(jí)框的布局而只會(huì)影響內(nèi)聯(lián)框（通常是文本）的排列
-
當(dāng)浮動(dòng)框高度超出包含框的時(shí)候，也就會(huì)出現(xiàn)包含框不會(huì) 自動(dòng)伸高來(lái)閉合浮動(dòng)元素（“高度塌陷”現(xiàn)象）
如圖，1號(hào)盒子（紅色）設(shè)置浮動(dòng)后不占據(jù)原有空間，2號(hào)和3號(hào)盒子向上移動(dòng)
如圖，設(shè)置所有的盒子左浮動(dòng)，將按順序從左開(kāi)始排列
如圖，設(shè)置浮動(dòng)對(duì)文字造成影響，形成文字環(huán)繞
八.清除浮動(dòng)指什么? 如何清除浮動(dòng)?
浮動(dòng)元素引起的問(wèn)題：
- 父元素的高度無(wú)法被撐開(kāi)，影響與父元素同級(jí)的元素
- 與浮動(dòng)元素同級(jí)的非浮動(dòng)元素會(huì)跟隨其后
- 若非第一個(gè)元素浮動(dòng)，則該元素之前的元素也需要浮動(dòng)，否則會(huì)影響頁(yè)面顯示的結(jié)構(gòu)
使用CSS中的clear:both;屬性來(lái)清除元素的浮動(dòng)可解決2、3問(wèn)題。
如圖，對(duì) p標(biāo)簽設(shè)置clear:right，清除浮動(dòng)，這時(shí)文字不再環(huán)繞圖片
