1. 文檔流的概念指什么？有哪種方式可以讓元素脫離文檔流?
- 元素自上而下排列，將窗體自上而下分成一行行, 并在每行中按從左至右的順序排放元素,即為文檔流。
- 脫離文檔流的方法有兩種：定位和浮動。
2. 有幾種定位方式，分別是如何實現(xiàn)定位的，使用場景如何？
CSS 有三種定位機制：普通流、浮動和定位
- 普通流：正常情況下，所有元素都在普通流中定位。塊級框從上到下一個接一個地排列。行內(nèi)框在一行中水平布置?？梢允褂盟絻?nèi)邊距、邊框和外邊距調(diào)整它們的間距。但是，垂直內(nèi)邊距、邊框和外邊距不影響行內(nèi)框的高度。行內(nèi)框的最高位和最低位的差就是行高，行高即為行框高。
- 定位：position屬性。
| 屬性值 | 描述 |
|---|---|
| static | 元素框正常生成。塊級元素生成一個矩形框，作為文檔流的一部分，行內(nèi)元素則會創(chuàng)建一個或多個行框，置于其父元素中。 |
| relative | 元素框偏移某個距離。元素仍保持其未定位前的形狀，它原本所占的空間仍保留。 |
| absolute | 元素框從文檔流完全刪除，并相對于其包含塊定位。包含塊可能是文檔中的另一個元素或者是初始包含塊。元素原先在正常文檔流中所占的空間會關(guān)閉，就好像元素原來不存在一樣。元素定位后生成一個塊級框，而不論原來它在正常流中生成何種類型的框。 |
| fixed | 元素框的表現(xiàn)類似于將 position 設(shè)置為 absolute，不過其包含塊是視窗本身。 |
demo：
- position: static;
position: static;
可以看出，static屬性值是正常的普通流布局，塊級元素從上到下，從左到右依次顯示。 - position: relative;
position: relative;
可以看出，當position屬性值設(shè)置為relative時，可以對元素的位置定位，left: 200px; bottom: 80px;使元素向右移動200像素;向上移動80像素；而box2原有位置占用空間仍然保留，不影響其他元素布局。
補充：關(guān)于left,bottom設(shè)置問題：
左上角為(0,0)原點，向右向下為正方向的一個坐標系，如圖：
設(shè)置距離
-
position: absolute;
① 父元素不是定位元素：
position: absolute
② 父元素是定位元素：
父元素是定位元素
可以看出，由兩幅圖可以看出position: absolute;的用法，即將元素脫離文檔流，然后相對于父元素進行定位，前提是父元素是定位元素，如果父元素不是定位元素，那么就按照嵌套關(guān)系逐級向上尋找，直到根節(jié)點（視窗）進行定位。
PS： 父元素的position屬性值為：absolute,relative,fixed才能定位，static不可以。
- position: fixed;
position: fixed;
如圖所示，fixed屬性值相對于瀏覽器視窗進行定位，而無論進度條拖到什么位置，box2元素始終相對于視窗固定。
3. absolute, relative, fixed偏移的參考點分別是什么？
fixed是相對于視窗定位。
relative是根據(jù)本身原位置定位。
absolute是根據(jù)根節(jié)點或者有position屬性的父元素定位。
偏移的參考原點是父元素或者視窗的最左上角。
左上角為(0,0)原點，向右向下為正方向的一個坐標系，如圖：
設(shè)置距離
4. z-index 有什么作用? 如何使用?
- z-index是設(shè)置元素的堆疊順序的屬性。擁有更高堆疊順序的元素總是會處于堆疊順序較低的元素的前面；
- 元素可擁有負的 z-index 屬性值；
- z-index屬性僅在定位元素上奏效；
- 如果為正數(shù)，則離用戶更近，為負數(shù)則表示離用戶更遠。
demo:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css" media="screen">
img {
position: absolute; /* 設(shè)置定位屬性，從而觸發(fā)z-index屬性 */
z-index: -1; /* 設(shè)置z軸為-1，元素顯示在下面 */
}
</style>
</head>
<body>
<div class="cat-1">
<h1>任務(wù)10的大標題</h1>
<h2>任務(wù)10 阿拉路，阿拉啦，我在東北玩泥巴</h2>
<h2>任務(wù)10 阿拉路，阿拉啦，我在東北玩泥巴</h2>
<h2>任務(wù)10 阿拉路，阿拉啦，我在東北玩泥巴</h2>
<h2>任務(wù)10 阿拉路，阿拉啦，我在東北玩泥巴</h2>
<h2>任務(wù)10 阿拉路，阿拉啦，我在東北玩泥巴</h2>
</div>
</div>
</body>
</html>
效果圖：
z-index: -1
如圖所示，圖片元素position為absolute，所以從文檔流脫離，此時h1和h2向上流動占用圖片原位置，然后設(shè)置z-index為-1，使圖片位于元素下面。
如果將z-index改為1，則：
img {
position: absolute;
z-index: 1;
}
z-index: 1
5. position:relative和負margin都可以使元素位置發(fā)生偏移?二者有什么區(qū)別?
- 而給margin設(shè)置負值，不但改變了元素本身，還改變了周圍其他元素的布。
margin: -10px;
- position: relative;是單獨對元素本身進行渲染，不影響其他元素的布局；
Paste_Image.png
6. 如何讓一個固定寬高的元素在頁面上垂直水平居中?
可以利用position: absolute;將元素脫離文本流，然后設(shè)置left: 50%; top: 50%;從而使元素的左上角點位于頁面中點，最后通過調(diào)節(jié)元素的margin值（左上各負一半）將元素居中。
元素垂直水平居中
可以看出，這種方法確實可以將元素放置于父元素的中心，而如果不設(shè)置margin,繼續(xù)調(diào)節(jié)left和top值可不可以呢？為此做如下改動：
.container1 .box:nth-child(1) {
width: 80px;
height: 80px;
background: rgba(0,255,0,0.3);
position: absolute;
left: 50%;
top: 50%;
left: -40px; /* 會覆蓋上面屬性 */
top: -40px;
}
錯誤演示圖
事實證明！是不可以疊加效果的，元素是一次性渲染成最終結(jié)果，而不是先定位一次再定位下一次，只有覆蓋沒有疊加，這是CSS樣式表語言的特性。
7. 浮動元素有什么特征？對其他浮動元素、普通元素、文字分別有什么影響?
在 CSS 中，我們通過 float 屬性實現(xiàn)元素的浮動。
- 浮動元素脫離文檔流，原位置不繼續(xù)占用空間；
- 浮動的框可以向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動框的邊框為止；
- 浮動元素表現(xiàn)類似于有不同的z-index值，即“浮”在頁面，使得其他塊框元素不受其影響。
- 雖然塊框不受其影響，但是浮動框旁邊的行框被縮短，從而給浮動框留出空間，行框圍繞浮動框，造成文字環(huán)繞浮動元素顯示。
具體如下：
float: right;
如圖所示，box2向右浮動，box3向上填補位置；
float: left;
如圖，float:left;將box2元素向左浮動，而此時box3向上占據(jù)位置，所以重疊，由于box2脫離文檔流，z-index值高，所以在box3的上面顯示。
float: left;
如圖所示，將三個box元素均設(shè)置為float: left;按照渲染順序依次排列。
文字避讓
如圖可以看出，box2向右浮動，而box3向上占據(jù)位置，顯然，從圖中的透明重疊部分可以看出，box3塊框無影響，而box3里面的段落內(nèi)容則避讓box2布局，這就是浮動元素改變行框的現(xiàn)象。
8. 清除浮動指什么? 如何清除浮動?
- 清除浮動指通過clear屬性將之前浮動元素的影響消除。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css" media="screen">
.container {
width: 280px;
height: 280px;
border: 1px solid;
margin: 0 auto;
}
.box {
width: 80px;
height: 80px;
}
.box1 {
background: rgba(255, 255, 0, 0.7);
border: 1px solid;
float: right;
}
.box2 {
background: rgba(0, 255, 255, 0.7);
border: 1px solid;
margin: 20px;
float: right;
}
.box3 {
background: rgba(255, 0, 255, 0.7);
border: 1px solid;
/*clear: both;*/
}
</style>
</head>
<body>
<div class="container">
<div class="box1 box">1</div>
<div class="box2 box">2</div>
<div class="box3 box">3</div>
</div>
</body>
</html>
效果圖：
未使用clear屬性
如圖所示，當我未使用clear屬性時，box1和box2均向右浮動，而box3受到兩個浮動元素的影響，向上占據(jù)位置。
- 如果對box3使用clear: both屬性，那么得到的效果是：
clear: both;
可以看出，box3使用clear: both;時，位置相對于box2未發(fā)生改變；
- 如果對浮動元素box2用clear屬性，即：
.box2 {
background: rgba(0, 255, 255, 0.7);
border: 1px solid;
/*margin: 20px;*/
clear: both;
float: right;
}
則效果為：
clear-box2
可以看出，box2相對box1的位置未改變，只是box2本身向右浮動，而box3由于也使用了clear: both;，所以位置未發(fā)生改變。
- 再來試試clear的另外兩個值left和right：
.box1 {
background: rgba(255, 255, 0, 0.7);
border: 1px solid;
float: right;
}
.box2 {
background: rgba(0, 255, 255, 0.7);
border: 1px solid;
clear: right;
float: right;
}
.box3 {
background: rgba(255, 0, 255, 0.7);
border: 1px solid;
float: right;
clear: left;
}
.box4 {
background: rgba(238, 217, 255, 0.7);
border: 1px solid;
clear: both;
}
clear: left(right);
如圖，我們?yōu)樵靥砑右粋€box4，box4處于最后位置，并且clear: both;，所以選box4為參考；當對box2使用clear: right;時，元素不受box1的影響，而當我對box3使用clear: left;時，元素受到浮動影響；
所以可以看出：
clear的left和right只對上一個浮動元素的方向有效，即浮動元素在左，用left值，反之用right。
綜上所述：
- clear屬性用于清除浮動，浮動元素在左用left，在右用right，both屬性皆生效；
- 布局中，分大小區(qū)塊，使用float屬性和clear屬性情況各有不同，各大區(qū)塊使用clear可以更好地區(qū)分。
- 浮動元素存在margin，并且無法合并，但無法撐開父元素；
- 無論元素未使用定位和浮動前是什么元素，定位或者浮動后，都會按塊級元素處理。
本文版權(quán)歸本人和饑人谷所有，轉(zhuǎn)載請注明來源，謝謝
