1、 文檔流的概念指什么嗜桌？有哪種方式可以讓元素脫離文檔流?
文檔流是文檔中可顯示對象在排列時所占用的位置奥溺。比如網(wǎng)頁的div標簽它默認占用的寬度位置是一整行，p標簽 默認占用寬度也是一整行骨宠，因為div標簽和p標簽是塊狀對象浮定。 網(wǎng)頁中大部分對象默認是占用文檔流，也有一些對象是不占文檔流的层亿，比如表單中隱藏域桦卒。
浮動和定位可以讓元素脫離文檔流
浮動通過設(shè)置
float屬性定位通過設(shè)置
position屬性為absolute或fixed
2、 有幾種定位方式匿又，分別是如何實現(xiàn)定位的方灾，使用場景如何？
| 值 | 描述 | 使用場景|
| ------------- |:-------------|
| static|默認值。沒有定位裕偿，元素出現(xiàn)在正常的流中（忽略 top, bottom, left, right 或者 z-index 聲明）洞慎。 | 默認不設(shè)置|
| absolute| 生成絕對定位的元素，相對于** static 定位以外的第一個父元素進行定位嘿棘。元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規(guī)定劲腿。會脫離文檔流。 | 根據(jù)需求需要定位在某個參考點的某個相對位置時 |
| fixed| 生成絕對定位的元素鸟妙，相對于瀏覽器窗口進行定位焦人。元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規(guī)定。 | 廣告窗口或底部菜單圆仔，用于固定位置顯示的地方 |
|relative | 生成相對定位的元素垃瞧，相對于其正常位置進行定位。占用空間坪郭，相當于原元素的位置移動，不會脫離文檔流脉幢。** |其它元素定位時需要把它作為參考點 |
3歪沃、 absolute, relative, fixed偏移的參考點分別是什么
absolute, relative, fixed都是postion屬性的值。
- absolute的參考點是離其最近的元素postion設(shè)置了fixed嫌松、relative的父級或祖先元素沪曙，如果父級元素沒有，則一層一層往上找萎羔，最終到body元素液走。
- relative的參考點是其原來自身的位置
- fixed的參考點是瀏覽器的窗口
4、 z-index 有什么作用? 如何使用?
z-index的作用是當兩個或n個元素重疊在一起的時候贾陷，其決定哪個元素顯示在上層
z-index只有在使用了定位屬性（positon且值為relative\absolute\fixed)上才可使用缘眶；有較高z-index值的元素比z-index值較低的元素離讀者更近；z-index值是正負整數(shù)髓废，
5巷懈、 position:relative和負margin都可以使元素位置發(fā)生偏移?二者有什么區(qū)別
- position:relative使元素偏移時，其自身位置并未改變慌洪，處在文檔流的原始位置
- 負margin使元素偏移時顶燕，自身位置改變并且會影響周邊元素
6、 如何讓一個固定寬高的元素在頁面上垂直水平居中?
可以利用position定位的absolute值和負margin使寬高固定的元素在頁面上水平居中
7冈爹、 浮動元素有什么特征涌攻？對其他浮動元素、普通元素频伤、文字分別有什么影響?
浮動元素的特征如下：
元素浮動之后會從文檔的正常流中刪除
元素設(shè)置浮動后恳谎，會盡可能地向左或向右浮動，直到碰到父元素邊框或其余浮動元素
元素浮動后會生成一個塊級框剂买，而不論這個元素是什么
浮動元素不會互相重疊
一個浮動元素的頂端不能比其父元素的內(nèi)頂端更高
浮動元素的頂端不能比之前所有浮動元素或塊級元素的頂端更高
如果沒有足夠空間惠爽，浮動元素會被擠到新的一行
對其它浮動元素的影響：
浮動元素之間是緊跟的關(guān)系癌蓖，碰到同級元素的邊緣或者父元素的邊緣才停止
如果碰到文字文字會圍繞在浮動元素周圍，下一個普通的元素會占據(jù)浮動元素之前的位置婚肆，但是普通元素內(nèi)的元素不會跟著普通元素
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.container{
width: 400px;
border: solid 1px;
}
.container .box{
width: 100px;
height: 100px;
border: solid 1px;
}
.container .box:nth-child(1){
float: left;
background: red;
}
.container .box:nth-child(2){
background: #0000ff;
}
.container .box:nth-child(3){
background: yellow;
}
.container .box:nth-child(4){
background: pink;
}
.ct3{
/*
width: 400px;
height: 400px;
border: solid 1px;
*/
}
.ct3 .box{
width: 100px;
height: 100px;
border: solid 1px;
}
.ct3 .box:nth-child(1){
background: red;
}
.ct3 .box:nth-child(2){
background: #0000ff;
}
.ct3 .box:nth-child(3){
float: right;
background: yellow;
}
.footer{
clear: right;
}
</style>
</head>
<body>
<div class="container">
<div class="box">
1
</div>
<div class="box">
1
</div>
<div class="box">
3
</div>
</div>
<div class="container">
<div class="box"></div>
<p>
生成絕對定位的元素租副，相對于 static 定位以外的第一個父元素進行定位。元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規(guī)定较性。
絕對定位使元素的位置與文檔流無關(guān)用僧，因此不占據(jù)空間。這一點與相對定位不同赞咙，相對定位實際上被看作普通流定位模型的一部分责循，因為元素的位置相對于它在普通流中的位置。普通流中其它元素的布局就像絕對定位的元素不存在一樣攀操。
生成絕對定位的元素院仿，相對于 static 定位以外的第一個父元素進行定位。元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規(guī)定速和。
絕對定位使元素的位置與文檔流無關(guān)歹垫，因此不占據(jù)空間。這一點與相對定位不同颠放，相對定位實際上被看作普通流定位模型的一部分排惨，因為元素的位置相對于它在普通流中的位置。普通流中其它元素的布局就像絕對定位的元素不存在一樣碰凶。
</p>
</div>
<div class="ct3">
<div class="box">
1
</div>
<div class="box">
1
</div>
<div class="box">
3
</div>
</div>
<div class="footer">
生成絕對定位的元素暮芭，相對于 static 定位以外的第一個父元素進行定位。元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規(guī)定欲低。
絕對定位使元素的位置與文檔流無關(guān)辕宏，因此不占據(jù)空間。這一點與相對定位不同伸头，相對定位實際上被看作普通流定位模型的一部分匾效，因為元素的位置相對于它在普通流中的位置。普通流中其它元素的布局就像絕對定位的元素不存在一樣恤磷。
生成絕對定位的元素面哼，相對于 static 定位以外的第一個父元素進行定位。元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規(guī)定扫步。
絕對定位使元素的位置與文檔流無關(guān)魔策，因此不占據(jù)空間。這
</div>
</body>
</html>
8河胎、 清除浮動指什么? 如何清除浮動?
元素浮動之后會使元素脫離正常的文檔流闯袒，對沒有浮動的元素和父元素都會造成影響，也會對文字排版產(chǎn)生影響，所以要清除浮動以解除浮動帶來的負面影響政敢。
** 本教程版權(quán)歸作者和饑人谷所有其徙，轉(zhuǎn)載須說明來源！ **
