一、文檔流的概念指什么？有哪種方式可以讓元素脫離文檔流?
1、文檔流指的是元素在排列布局中所占用的位置，具體的說是將窗體自上而下分為一行行，并在每行中按從左到右的順序排放元素。
每個非浮動的塊級元素都獨(dú)占一行，若設(shè)置了浮動，它就會按照設(shè)置的規(guī)則浮動在行的一端，如果當(dāng)前行放置不下，則另起新行再浮動。內(nèi)聯(lián)元素不會獨(dú)占一行。
2、有三種方法可以讓元素脫離文檔流，分別是浮動：float，絕對定位：position：absolute，固定定位：position：fixed。
3、拓展：文檔流和文本流的區(qū)別
①文檔流是相對于盒模型的概念，而文本流是相對于段落文字的概念。
②元素浮動之后，會脫離文檔流，它后面的塊級元素感知不到浮動元素的存在，就會無視它原來占據(jù)的區(qū)域，直接在它上面布局。
但是文字卻會認(rèn)同浮動元素所占據(jù)的區(qū)域，圍繞它布局，所以浮動元素沒有脫離文本流。
③如果使用絕對定位之后，元素既會脫離文檔流，也會脫離文本流。那么后面元素的文本就不會在認(rèn)同它占據(jù)的區(qū)域，會直接在它上面布局，就不會環(huán)繞。
例如：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<style>
.box1{
height: 100px;
width: 100px;
background:red;
float: left;
}
.ct{
height: 200px;
width:200px;
background:#ccc;
margin-top: 40px
}
.box2{
height: 100px;
width: 100px;
background:blue;
position: absolute;
}
.footer{
position: fixed;
bottom: 10px;
left: 10px;
height: 100px;
width: 200px;
background:yellow;
}
</style>
</head>
<body>
<div class="ct">
<div class="box1"></div>
<p>
比如網(wǎng)頁的div標(biāo)簽它默認(rèn)占用的寬度位置是一整行
，p標(biāo)簽?zāi)J(rèn)占用寬度也是一整行，因為div標(biāo)簽和p標(biāo)
簽是塊狀對象。 網(wǎng)頁中大部分對象默認(rèn)是占用文檔流，
也有一些對象是不占文檔流的，
</p>
</div>
<div class="ct">
<div class="box2"></div>
<p>
比如網(wǎng)頁的div標(biāo)簽它默認(rèn)占用的寬度位置是一整行
，p標(biāo)簽?zāi)J(rèn)占用寬度也是一整行，
因為div標(biāo)簽和p標(biāo)簽是塊狀對象。 網(wǎng)頁中大部分對象默
認(rèn)是占用文檔流，也有一些對象是不占文檔流的，
</p>
</div>
<div class="footer">jirengu</div>
</body>
</html>
二、有幾種定位方式，分別是如何實現(xiàn)定位的，使用場景如何？
答：有四種定位方式。分別是：靜態(tài)定位、相對定位、絕對定位和固定定位。對應(yīng)position屬性有四個值：static、relative、absolute、fixed，默認(rèn)值為static。
除了static以外，其他的定位方式都可以設(shè)定“top、right、bottom、left”屬性，指明元素相對于另一個元素所移動的位置。
1.在靜態(tài)定位的情況下，每個元素處在常規(guī)文檔流中。塊級元素會在頁面中自上而下地堆疊起來，行內(nèi)元素會相互并列，直到空間不足以并列的情況下才會折到下一行顯示。
2.相對定位的盒子的位置常以標(biāo)準(zhǔn)流的排版方式為基礎(chǔ)，然后使盒子相對于它在原本的標(biāo)準(zhǔn)位置偏移指定的距離。相對定位的盒子仍在標(biāo)準(zhǔn)流中，它后面的盒子仍以標(biāo)準(zhǔn)流方式對待它。使用relative，即相對定位，除了將position屬性設(shè)置為relative之外，還需要指定一定的偏移量，水平方向通過left或者right屬性來指定，豎直方向通過top和bottom來指定。
3.絕對定位會把元素徹底從文檔流中拿出來，不占據(jù)它原本該占據(jù)的位置。它需要參考它的定位上下文來移動位置。絕對定位元素的任何祖先元素都可以成為它的定位上下文，只需要把相應(yīng)祖先元素的position設(shè)為relative即可。 如果沒有相對定位的祖先元素可以參考，則以默認(rèn)的定位上下文body作為參照，相對于它進(jìn)行定位。
4.固定定位也是完全移出文檔流，但它的定位上下文是視口（瀏覽器窗口或手持設(shè)備的屏幕），它的特點是不會隨頁面滾動而滾動。最常見的情況是用它創(chuàng)建不隨頁面滾動而移動的導(dǎo)航元素。（乍一看很像絕對定位，但它不隨著頁面滾動而移動，絕對定位會移動）
示意圖可以參考 CSS中的絕對定位與相對定位
三、absolute, relative, fixed 偏移的參考點分別是什么？
- absolute偏移參考點是static定位以外最近的一個祖先（父）元素,如果沒有則相對于原始的容器body。
- relative偏移參考點是自己在文檔流中原來的位置。
- fixed偏移參考點是瀏覽器窗口。
參考：關(guān)于CSS定位中的位置
四、z-index 有什么作用? 如何使用?
1、z-index的作用：頁面顯示的是一個二維平面，用x軸和y軸來表示位置屬性。為了表示三維立體的概念比如顯示元素的上下層的疊加順序，所以引入了z-index屬性來表示z軸的區(qū)別。比如說頁面的x軸向右，y軸向下那么z軸就是垂直于xy平面里。
表示一個元素在疊加順序上的上下立體關(guān)系。
2、使用：z-index值較大的元素將疊加在z-index值較小的元素之上。對于未指定此屬性的定位對象，z-index 值為正數(shù)的對象會在其之上，而 z-index 值為負(fù)數(shù)的對象在其之下。
參考z-index
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<style>
.container{
height: 127px;
width: 300px;
background:#ccc;
position: relative;
}
.container .box{
height: 100px;
width: 100px;
background:red;
position: inherit;
}
.container .box:nth-child(1){
background:red;
z-index: 1;
}
.container .box:nth-child(2){
background:yellow;
z-index: -1;
}
</style>
</head>
<body>
<div class="container">3
<div class="box">1</div>
<div class="box">2</div>
</div>
</body>
</html>
使用z-index要注意下面幾點：
1、只對定位元素有效。
z-index屬性適用于定位元素（position屬性值為 relative 或 absolute 或 fixed的元素），用來確定定位元素在垂直于頁面方向（稱為Z軸）上的層疊順序，也就是說如果元素沒有設(shè)置定位，對其設(shè)置的z-index是無效的。
2、相同z-index誰上誰下
①如果兩個元素都沒有定位或者兩個都是定位元素且z-index相同發(fā)生位置重合現(xiàn)象，那么按文檔流順序，后面的覆蓋前面的。
②如果兩個元素都沒有設(shè)置z-index（使用默認(rèn)值，默認(rèn)不設(shè)置z-index時值是0），一個定位一個沒有定位，那么定位元素覆蓋未定位元素。
3、父子關(guān)系處理
①如果定位父元素z-index設(shè)置值除了默認(rèn)值外，那么定位子元素?zé)o論是否設(shè)置z-index或設(shè)置多少值，z-index都會不起作用，定位子元素都會在定位父元素上面。
②如果父元素z-index未定位或者使用默認(rèn)值，那么定位子元素設(shè)置z-index會起作用，子元素可以在父元素的下面或下面。
4、兄弟之間子元素
①如果定位兄弟元素的z-index生效，那么它們的子元素覆蓋關(guān)系由父元素層級決定，不管它們子元素z-index的各自大小。
參考:z-index應(yīng)用總結(jié)
五、position:relative和負(fù)margin都可以使元素位置發(fā)生偏移?二者有什么區(qū)別？
- 用position:relative使元素偏移時，它自身位置并未改變，仍然處在文檔流的原始位置，偏移的元素不會對下面元素位置產(chǎn)生影響，只是該元素自己相對于原來位置偏移。
- 設(shè)負(fù)margin的時候，偏移的元素自身位置改變,不再占據(jù)初始空間，還會對其他元素位置產(chǎn)生影響。
- 設(shè)置margin的時候是相鄰元素之間的偏移，相對于相鄰元素的border，否則設(shè)置的margin將無效。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<style type="text/css">
body{
margin:0px;
padding: 0px;
}
.container{
display: inline-block;
height: 300px;
width: 200px;
border: 1px solid;
}
.box{
height: 100px;
width: 100px;
border: 1px solid;
}
.container .box:nth-child(1){
background:red;
}
.container .box:nth-child(2){
background:blue;
}
.container .box:nth-child(3){
background:yellow;
}
.margin{
margin-top: -30px;
margin-left:30px;
}
.relative{
position: relative;
left: 30px;
top: -30px;
}
</style>
</head>
<body>
<div class="container">
<div class="box">1</div>
<div class="box normal">這是正常的box</div>
<div class="box">2</div>
</div>
<div class="container">
<div class="box">1</div>
<div class="box margin">這是負(fù)margin的box</div>
<div class="box">2</div>
</div>
<div class="container">
<div class="box">1</div>
<div class="box relative">這是relative的box</div>
<div class="box">2</div>
</div>
</body>
</html>
可以看出，設(shè)置負(fù)margin時，元素的原來的空間被1占據(jù)，元素好像沒有偏移，而container整體向下偏移，而且container內(nèi)部的底部出現(xiàn)了空白。
這里還有些模糊，搞不清楚？
六、如何讓一個固定寬高的元素在頁面上垂直水平居中?
1、可以使用absolute和負(fù)margin實現(xiàn)。
首先在父元素上設(shè)置定位，提供一個坐標(biāo)的參考點，然后對元素設(shè)置position：absolute；top：50%;left：50%；，此時元素的左上角在正中心的位置，再設(shè)置負(fù)margin偏移該元素寬高的一半margin-left：-a；(a為該元素寬高的一半)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<style>
body{
margin:0px;
padding: 0px;
}
.container{
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
background:#ccc;
}
/*這樣設(shè)置容器等于body，相對于頁面*/
.box{
position: absolute;
top: 50%;
left: 50%;
/*box左上角的位置偏移到父元素寬度和高度的一半，也就是父元素的正中心*/
margin-left: -50px;
margin-top: -50px;
/*box偏移本身寬高的一半，也就是整個都在頁面正中心*/
height: 100px;
width: 100px;
background:red;
}
</style>
</head>
<body>
<div class="container">
<div class="box"></div>
</div>
</body>
</html>
七、浮動元素有什么特征？對其他浮動元素、普通元素、文字分別有什么影響?
1、浮動元素的特征:
①浮動的框可以向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動框的邊框為止。浮動框脫離了文檔流，所以文檔流中的塊框表現(xiàn)得就像浮動框不存在一樣。
②浮動元素如果沒有設(shè)置寬高，會自動“收縮”，那它的寬高就是自身的內(nèi)容。
③無論什么元素設(shè)置浮動后都會變成塊級元素。
④浮動元素對于其他浮動元素，先浮動的元素不會被后浮動的元素超過，浮動元素不會彼此重疊。
⑤浮動元素對于文字，則是“可見”的，會把文字給“頂開”，形成文字包圍浮動元素。
⑥當(dāng)行框沒有足夠空間，浮動元素會被擠到新的一行
⑦浮動重疊規(guī)則：
行內(nèi)框與浮動元素重疊時，其邊框、背景、內(nèi)容均位于浮動元素之上；塊框與浮動元素重疊時，其邊框、背景在浮動元素之下，而內(nèi)容不在浮動元素之下顯示。參考：浮動元素
2、對其他浮動元素、普通元素、文字的影響
①對其它浮動元素的影響：后面的浮動元素會會跟隨其浮動，直到遇到前面浮動元素的邊框。如果父容器放不下，它會自動下移到新的一行。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<style>
.container{
width:250px;
height:300px;
border:1px solid;
}
.box{
height:100px;
width:100px;
border:1px solid;
}
.container .box:nth-child(1){
background:red;
float:right;
}
.container .box:nth-child(2){
background:blue;
float:right;
}
.container .box:nth-child(3){
background:green;
float:right;
}
.container .box:nth-child(4){
background:yellow;
}
</style>
</head>
<body>
<div class="container">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
</div>
</body>
</html>
②對普通元素的影響:同級關(guān)系的普通塊級元素會忽略浮動元素的存在,占據(jù)它的位置；父子級關(guān)系的子元素浮動的話，父容器的高度會塌陷。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<style>
.box{
height: 100px;
width: 100px;
border: 1px solid;
}
.container{
border: 1px solid red;
width: 300px;
}
.box1{
background:red;
float: left;
}
.box2{
background:blue;
width: 200px;
}
.container .box:nth-child(1){
background:gray;
/*float: left;*/
}
.container .box:nth-child(2){
background:yellow;
float: left;
}
</style>
</head>
<body>
<div class="box box1">1</div>
<div class="box box2">2</div>
<div class="container">
<div class="box">3</div>
<div class="box">4</div>
</div>
</body>
</html>
說明：父容器塌陷的原因是子元素浮動后就是脫離文檔流，然后不占據(jù)原來空間，所以父容器的高度會收縮。
** ③對文字的影響**:浮動元素脫離了文檔流，塊級元素感知不到浮動元素的存在，但浮動元素對塊級元素里的文字產(chǎn)生影響，文字會環(huán)繞著浮動元素布局。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<style>
.container{
height: 300px;
width: 300px;
border: 1px solid;
}
.box{
height: 100px;
width: 100px;
border: 1px solid;
background:blue;
float: left;
}
p{
border: 1px solid red;
}
</style>
</head>
<body>
<div class="container">
<div class="box"></div>
<p>這樣會得到我們希望的效果。不幸的是，
下一個元素會受到這個浮動元素的影響。
為了解決這個問題，有些人選擇對布局中的所有東西進(jìn)行浮動
，然后使用適當(dāng)?shù)挠幸饬x的元素（常常是站點的頁腳）
對這些浮動進(jìn)行清理。這有助于減少或消除不必要的標(biāo)記。
</p>
</div>
</body>
</html>
八、清除浮動指什么? 如何清除浮動?
1、清除浮動是指清除浮動帶來的影響。主要有對上級元素和同級元素的影響。對上級元素的影響比如浮動元素不會撐起父元素的高度，影響與父元素的同級元素。對同級元素的影響比如同級元素會占據(jù)浮動元素原來的空間，而我們需要這個空間不被占用。
2、另外的說法，在非IE瀏覽器下，當(dāng)容器的高度為auto，且容器的內(nèi)容中有浮動的元素，在這種情況下，容器的高度不能自動伸長以適應(yīng)內(nèi)容的高度，使得內(nèi)容溢出到容器外面而影響（甚至破壞）布局的現(xiàn)象。這個現(xiàn)象叫浮動溢出，為了防止這個現(xiàn)象的出現(xiàn)而進(jìn)行的CSS處理，就叫CSS清除浮動。
3、注意：清除浮動是針對元素本身的，只能對自己有效果，不能夠影響到別的元素
4、 清除浮動常用的方法：
①使用clear屬性
clear 屬性規(guī)定元素的哪一側(cè)不允許其他浮動元素
Paste_Image.png
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<style>
.container{
border: 1px solid;
width: 400px;
}
.box{
height: 100px;
width: 100px;
border: 1px solid;
}
.container .box:nth-child(1){
background:red;
float: left;
}
.container .box:nth-child(2){
background:blue;
clear:left;
}
.ct{
border: 1px solid;
width: 400px;
}
.ct .box:nth-child(1){
background:yellow;
float:right;
}
.ct .box:nth-child(2){
background:gray;
float: right;
clear: right;
}
.clearfix{
clear: both;
}
</style>
</head>
<body>
<div class="container">
<div class="box">1</div>
<div class="box">2</div>
</div>
<div class="ct">
<div class="box">1</div>
<div class="box">2</div>
<div class="clearfix"></div>
</div>
</body>
</html>
②使用偽元素(其實本質(zhì)上就是用clear)
給浮動元素的容器添加一個clearfix的class，然后給這個class添加一個:after偽元素實現(xiàn)元素末尾添加一個看不見的塊元素（Block element）清理浮動.
③父級div定義 overflow:hidden
對父級CSS選擇器加overflow:hidden樣式，可以清除父級內(nèi)使用float產(chǎn)生浮動。
overflow:hidden 的意思是超出的部分要裁切隱藏掉，那么如果 float 的元素不占普通流位置，普通流的包含塊要根據(jù)內(nèi)容高度裁切隱藏，如果高度是默認(rèn)值auto，那么不計算其內(nèi)浮動元素高度就裁切，就有可能會裁掉float，這是違反布局常識的。
所以如果沒有明確設(shè)定容器高情況下，它要計算內(nèi)容全部高度才能確定在什么位置hidden，浮動的高度就要被計算進(jìn)去，順帶達(dá)成了清理浮動的目標(biāo)。
參考：
清除浮動
BFC
深入理解BFC和Margin Collapse
