1.文檔流的概念指什么琳袄？有哪種方式可以讓元素脫離文檔流?
文檔流也叫常規(guī)流，其實就是文檔的讀取和輸出順序纺酸，也就是我們通辰讯海看到的由左到右、由上而下的讀取和輸出形式餐蔬。脫離文檔流是指元素被從普通的布局排版中拿走碎紊，其他盒子在定位的時候，會當(dāng)做脫離文檔流的元素不存在而進(jìn)行定位樊诺。
有三種方可以讓元素脫離文檔流仗考。分別是：float（浮動），absolute（絕對定位）词爬，fixed（固定定位）秃嗜。其中，使用float脫離文檔流時顿膨，其他盒子會無視這個元素痪寻，但其他盒子內(nèi)的文本依然會為這個元素讓出位置，環(huán)繞在周圍虽惭。而對于使用absolute橡类，fixed脫離文檔流的元素，其他盒子與其他盒子內(nèi)的文本都會無視它芽唇。
參考:
1.在網(wǎng)頁設(shè)計html中什么是文本流顾画，請大家?guī)兔Γ取劫。。?/a>
2.css脫離文檔流到底是什么意思研侣，脫離文檔流就不占據(jù)空間了嗎谱邪？脫離文檔流是不是指該元素從dom樹中脫離？
2.有幾種定位方式庶诡，分別是如何實現(xiàn)定位的惦银，使用場景如何？
關(guān)于定位末誓，position屬性有幾個常用值如下：
| 值 | 屬性 |
|---|---|
| inherit | 規(guī)定應(yīng)該從父元素繼承 position 屬性的值 |
| static | 默認(rèn)值,沒有定位扯俱，元素出現(xiàn)在正常的流中（忽略 top, bottom, left, right 或者 z-index 聲明） |
| relative | 生成相對定位的元素，相對于元素本身正常位置進(jìn)行定位,因此喇澡，left:20px會向元素的 left 位置添加20px |
| absolute | 生成絕對定位的元素迅栅，相對于static定位以外的第一個祖先元素（offset parent）進(jìn)行定位,元素的位置通過 left, top, right 以及 bottom屬性進(jìn)行規(guī)定 |
| fixed | 生成絕對定位的元素，相對于瀏覽器窗口進(jìn)行定位晴玖。元素的位置通過 left, top, right以及 bottom 屬性進(jìn)行規(guī)定 |
| sticky | CSS3新屬性读存，表現(xiàn)類似position:relative和position:fixed的合體，在目標(biāo)區(qū)域在屏幕中可見時呕屎，它的行為就像position:relative; 而當(dāng)頁面滾動超出目標(biāo)區(qū)域時让簿，它的表現(xiàn)就像position:fixed，它會固定在目標(biāo)位置 |
其中秀睛，sticky這個屬性拜英，從can i use網(wǎng)站看，
完全支持的是firefox瀏覽器和safari瀏覽器琅催，IE和Chrome還在考慮和開發(fā)中居凶。
其中，主要用到的是三種定位方式藤抡，fixed（固定定位）侠碧，relative（相對定位），absolute（絕對定位）缠黍。
- 1.
position: fixed;設(shè)置元素相對于瀏覽器窗口位置固定弄兜，首先設(shè)置position: fixed;`使元素脫離文檔流，然后設(shè)置top瓷式、left替饿、right或者bottom的值，這些設(shè)置了元素距瀏覽器的上贸典、左视卢、右或者下邊距的距離。
舉例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>固定定位</title>
<style>
div {
width: 100px;
height: 100px;
border: 1px solid red;
}
.item1 {
position: fixed;
right: 10px;
top: 10px;
}
.item2 {
position: fixed;
right: 10px;
bottom: 10px;
}
</style>
</head>
<body>
<div class="item1">饑人谷1</div>
<div>饑人谷</div>
<div>饑人谷</div>
<div>饑人谷</div>
<div>饑人谷</div>
<div>饑人谷</div>
<div>饑人谷</div>
<div class="item2">饑人谷2</div>
</body>
</html>
這是設(shè)置class值是item1的div元素在瀏覽器右上角廊驼，距右据过、上都是10px惋砂，class值是item2的div元素在瀏覽器右下角，距右绳锅、下都是10px西饵。
看效果：
圖1到圖2瀏覽器右邊欄向下滑動，item1,item2相對于瀏覽器窗口的位置鳞芙，并沒有變化眷柔。
position: fixed;主要用于固定一個窗口在頁面上，頁面向下滑動時原朝，窗口的位置不變驯嘱，這可以用于顯示強(qiáng)制用戶接收的信息。例如廣告竿拆，推廣消息等。
- 2.
position: relative;設(shè)置元素相對于自身原來的位置移動宾尚。然后利用top丙笋、left、right煌贴、bottom屬性設(shè)置偏移值御板。例如，設(shè)置top :10px;是表示移動后的元素相對于初始位置向下移動10px牛郑。
舉例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>相對定位</title>
<style>
html,body {
margin: 0;
bottom: 0;
}
.content {
display: inline-block;
width: 100px;
height: 100px;
border: 1px solid red;
position: relative;
left: 100px;
top: 80px;
}
</style>
</head>
<body>
<div class="content">
<p>段落</p>
饑人谷
</div>
相對定位脫離文檔流了嗎怠肋？
<p>下面的段落位置有變化嗎？</p>
</body>
</html>
移動前效果：
移動后效果：
從圖中可以看出淹朋，class屬性名是content的div元素笙各，相對于原來的位置是向右移動100px，向下移動80px础芍。還可以看出杈抢，移動前后，它周圍的元素的位置并沒有發(fā)生變化仑性』搪ィ可以看出，元素相對定位后诊杆，一開始占據(jù)的空間還存在歼捐，并沒有脫離文檔流。
相對定位主要用于為絕對定位提供定位的參考祖先元素晨汹。
- 3.
position: absolute;設(shè)置元素相對于static定位以外的第一個祖先元素（offset parent）進(jìn)行定位,元素的位置通過 left, top, right 以及 bottom屬性進(jìn)行規(guī)定豹储。
舉例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>絕對定位</title>
<style>
.content div {
width: 100px;
height: 100px;
border: 1px solid red;
margin: 20px;
}
.content {
width: 500px;
position: relative;
border: 1px solid;
left: 100px;
top: 100px;
}
.item2 {
position: absolute;
right: 20px;
top: 20px;
}
</style>
</head>
<body>
<div class="content">
<div class="item1">饑人谷1</div>
<div class="item2">絕對定位</div>
<div class="item3">饑人谷2</div>
</div>
</body>
</html>
效果：
看圖可知，item2是相對于它的設(shè)置了relative的父元素content進(jìn)行位移的淘这。
絕對定位主要用在邊緣對齊颂翼，九宮格效果等方面晃洒。
3.absolute, relative, fixed偏移的參考點(diǎn)分別是什么
由問題2得出：
absolute偏移的參考點(diǎn)是具有position屬性（除了static屬性）的最近的祖先元素。
relative偏移的參考點(diǎn)是元素本身的初始位置朦乏。
fixed偏移的參考點(diǎn)是瀏覽器窗口球及。
4.z-index 有什么作用? 如何使用?
z-index的作用：為了表示三維立體的概念如顯示元素的上下層的疊加順序引入了z-index屬性。z-index屬性設(shè)置一個定位元素沿 z 軸的位置呻疹，z 軸定義為垂直延伸到顯示區(qū)的軸吃引。數(shù)值越大離用戶越近，顯示在越前面刽锤。
使用：z-index 屬性設(shè)置元素的堆疊順序镊尺。擁有更高堆疊順序的元素總是會處于堆疊順序較低的元素的前面〔⑺迹可以是負(fù)值庐氮。只能用在定位元素上。
舉例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>z-index</title>
<style>
.content div {
width: 100px;
height: 100px;
}
.content {
position: relative;
}
.item1 {
background: #f00;
}
.item2 {
background: #0f0;
position: absolute;
top: 30px;
left: 20px;
}
.item3 {
background: #00f;
position: absolute;
top: 50px;
left: 50px;
}
</style>
</head>
<body>
<div class="content">
<div class="item1"></div>
<div class="item2"></div>
<div class="item3"></div>
</div>
</body>
</html>
此時效果：
默認(rèn)不設(shè)置z-index時值是0宋彼。此時弄砍，三個div透明度一樣，默認(rèn)div后面的顯示覆蓋前面的顯示输涕。item3在最上面音婶，遮住了item1和item2。
首先看莱坎，在沒有定位的元素上設(shè)置z-index衣式，有沒有效果。對item1檐什，添加
z-index: 1;,
.item1 {
background: #f00;
z-index: 1;
}
效果：
item1的紅色方塊并沒有顯示在前面碴卧。
item1加上position（除了static），
代碼：
.item1 {
background: #f00;
position: absolute;
z-index: 1;
}
效果：
item1顯示在前面乃正。
看看數(shù)值大小對位置的影響：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>z-index</title>
<style>
.content div {
width: 100px;
height: 100px;
}
.content {
position: relative;
}
.item1 {
background: #f00;
position: absolute;
z-index: 2;
}
.item2 {
background: #0f0;
position: absolute;
top: 30px;
left: 20px;
opacity: 0.6;
z-index: 3;
}
.item3 {
background: #00f;
position: absolute;
top: 50px;
left: 50px;
z-index: 1;
}
</style>
</head>
<body>
<div class="content">
<div class="item1"></div>
<div class="item2"></div>
<div class="item3"></div>
</div>
</body>
</html>
效果：
可以看出螟深，z-index大的值顯示在外面。
5.position:relative和負(fù)margin都可以使元素位置發(fā)生偏移?二者有什么區(qū)別
position:relative和負(fù)margin都可以使元素位置發(fā)生偏移烫葬。區(qū)別在于界弧，position:relative元素發(fā)生偏移時，初始空間還被占據(jù)著搭综。而負(fù)margin則不再占據(jù)初始空間垢箕。
舉例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>相對定位</title>
<style>
.content {
width: 100px;
height: 100px;
border: 1px solid red;
}
.pa {
width: 100px;
height: 100px;
display: inline-block;
border: 1px solid red;
/*margin-top: -20px;
margin-left: -20px;*/
/*position: relative;
top: -20px;
left: -20px;*/
}
.item {
width: 100px;
height: 100px;
border: 1px solid red;
}
</style>
</head>
<body>
<div class="content">
<p>段落</p>
饑人谷
</div>
<div class="pa">下面的段落位置有變化嗎？</div>
<span>下面的段落位置有變化嗎兑巾？</span>
<div class="item">下面的段落位置有變化嗎条获？</div>
</body>
</html>
未設(shè)置position和負(fù)margin時，效果：
設(shè)置
position: relative;
top: -20px;
left: -20px;
效果：
設(shè)置
margin-top: -20px;
margin-left: -20px;
效果：
可以看出元素設(shè)置position:relative時蒋歌，后面的元素位置不變動帅掘。負(fù)margin時委煤，后面的元素也跟著變動。
6.如何讓一個固定寬高的元素在頁面上垂直水平居中?
可以用absolute和負(fù)margin實現(xiàn)修档。
代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>垂直水平居中</title>
<style>
.content {
position: relative;
height: 300px;
border: 1px solid;
}
.item {
width: 200px;
height: 200px;
border: 1px solid red;
position: absolute;
left: 50%;
top: 50%;
margin-left: -100px;
margin-top: -100px;
}
</style>
</head>
<body>
<div class="content">
<div class="item">饑人谷</div>
</div>
</body>
</html>
效果：
7.浮動元素有什么特征碧绞？對其他浮動元素、普通元素吱窝、文字分別有什么影響?
浮動元素脫離了文檔流讥邻，浮動模型是一種可視化格式模型，浮動的框可以左右移動（根據(jù)float屬性值而定）院峡，直到它的外邊緣碰到包含框或者另一個浮動元素的框的邊緣兴使。
- 對其他浮動元素的影響，一個元素浮動如果碰到另一個浮動元素的邊框照激，會緊貼著那個邊框水平放置发魄，如果父元素寬度不夠則會自動下移。
舉例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>浮動元素</title>
<style>
.nav {
width: 280px;
height: 300px;
border: 1px solid;
}
.box {
width: 100px;
height: 100px;
}
.item1 {
background: #f00;
float: left;
}
.item2 {
background: #0f0;
float: left;
}
.item3 {
background: #00f;
float: left;
}
</style>
</head>
<body>
<div class="nav">
<div class="box item1">1</div>
<div class="box item2">2</div>
<div class="box item3">3</div>
</div>
</body>
</html>
效果：
nav的寬度280px,而item1,item2,item3,分別是100px俩垃，一行放不下三個塊元素励幼。item3下移。
- 對普通元素的影響吆寨，同級的普通塊級元素會忽略浮動元素的存在赏淌。
舉例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>浮動元素</title>
<style>
.nav {
width: 280px;
height: 300px;
border: 1px solid;
}
.item1 {
width: 100px;
height: 100px;
background: #f00;
float: left;
opacity: 0.4;
}
.item2 {
background: #0f0;
height: 120px;
}
.item3 {
width: 100px;
height: 100px;
background: #00f;
float: left;
opacity: 0.6;
}
.item4 {
background: #ccc;
}
</style>
</head>
<body>
<div class="nav">
<div class="item1">1</div>
<div class="item2">
浮動</div>
<div class="item3">3</div>
<div class="item4">饑人谷</div>
</div>
</body>
</html>
效果：
如圖示踩寇，item1啄清，item3浮動碳竟，脫離了文檔流喂柒，item2,item4的位置不受影響，仍是倦春，占據(jù)一行睛榄，從上到下排列荣茫。
浮動元素的父級元素的高不會被自動撐開。
把上面的例子中的nav的高度設(shè)置去掉场靴，則出現(xiàn)這種效果：
可以看出啡莉，浮動元素沒有撐起父級元素，靠的是文本流內(nèi)的同級塊級元素?fù)纹鸬摹?
- 對文字的影響旨剥，從上面的同級元素的例子中中也可以看出咧欣，文字受浮動元素的影響。浮動元素占據(jù)的空間轨帜，其他元素的文字不能占據(jù)魄咕，只能挨著浮動元素排列。
8.清除浮動指什么? 如何清除浮動?
清除浮動指清除浮動帶來的影響蚌父。主要包括對上級元素和對同級元素的影響哮兰。對上級元素的影響如上題所說毛萌，浮動元素不會撐起父級元素的高度。對同級元素喝滞，是同級元素會忽略浮動元素所占的空間阁将，需要浮動元素所占的空間不被忽略。
清除浮動可以用overflow清除父級元素的浮動囤躁。
第七題的例子冀痕，父元素沒有被完全撐開，在父元素上加上overflow: hidden;狸演，效果則變成下圖所示：
父元素被撐開言蛇。
還可以用clear清除浮動，
clear: xxx;表示清除元素xxx方向的浮動宵距。對父元素腊尚，加
.nav:after {
content: '';
display: block;
clear: left;
}
效果：
偽類元素:after相當(dāng)于在父元素中增加了一個標(biāo)簽。
對于同級元素满哪，.item2,item4可以加上
clear: left;,效果：
因為.item1設(shè)置了透明度為0.4婿斥，所以變成圖中的顏色。
可以看到哨鸭，這時父元素也被撐開了民宿。
本文版權(quán)歸作者和饑人谷所有，轉(zhuǎn)載請注明出處
