](http://upload-images.jianshu.io/upload_images/4994499-95b5ee125ade0449.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
- relative:生成相對定位的元素，通過top,bottom,left,right的位置相對于其正常位置進行定位。其中的相對指的是相對于元素在默認流中的位置。
注意：
1.將元素position屬性設置為relative之后，再通過top,bottom,left,right屬性對其進行相對于原來位置的偏移；
2.元素偏移之后，他本來在默認文檔流中占據的位置仍然存在，其緊挨其后的元素的定位依據它本來的位置定位；
3.該元素偏移之后，可能存在覆蓋其他元素的情況，可以使用z-index屬性顯示層級有限級別。
示例：
第二個盒子元素相對于之前的位置向下平移了20px,向右平移了30px。
要想使第三個塊級元素被遮擋的部分浮現出來，我們可以使用如下代碼實現：
注意：使用z-index必須保證元素的樣式中含有定位方式，之前忘了給box3添加定位方式，導致z-index對box3不起作用。
- absolute：生成絕對定位的元素，相對于static定位外的第一個父元素進行定位。
注意：
1.絕對定位的元素已經脫離了文檔流，普通流中其他元素的布局就像絕對元素不存在一樣；
2.絕對定位的元素的位置是相對于最近的已定位的祖先元素，如果元素沒有已定位的祖先元素，它的位置就相對于body；
3.絕對定位的框可以覆蓋頁面的其他元素。
示例：
這種情況是離box2最近的父元素已定位的情況，如果離box2最近的父元素沒有定位的話，示例如下：
- fixed：本質上是一種絕對定位，不為元素預留空間。通過指定相對于屏幕視窗的位置來指定元素的空間，且元素的位置在屏幕滾動時不會發生變化。應用于很多網站頂端的固定導航、右下角的固定廣告等等。
示例：
absolute, relative, fixed偏移的參考點分別是什么？
absolute偏移的參考點是：相對于最近的已定位的父元素，如果沒有，則相對于body元素；
relative偏移的參考點是：相對于元素在普通流中的原來位置；
fixed偏移的參考點是：相對于瀏覽器窗口。
z-index 有什么作用? 如何使用?
z-index屬性用于設置節點的堆疊順序，擁有更高堆疊順序的節點將顯示在堆疊順序較低的節點前面。
使用方法：示例
1.z-index僅對定位元素有效（position:relative||absolute||fixed）;
2.z-index只可比較同級元素
position:relative和負margin都可以使元素位置發生偏移?二者有什么區別？
position:relative和負margin都可以使元素位置發生偏移，二者的區別表現在：
負margin會使元素在文檔流中的位置發生偏移，它會放棄偏移之前占據的空間，緊挨其后的元素會填充這部分空間；
相對定位后元素位置發生偏移，它仍會堅守原來占據的空間，不會讓文檔流的其他元素流入。
如何讓一個固定寬高的元素在頁面上垂直水平居中?
可以使用絕對定位和負margin,示例：
浮動元素有什么特征？對其他浮動元素、普通元素、文字分別有什么影響?
浮動元素的特征有：
1.塊在一排顯示；
2.內聯元素支持寬高；
3.無論是塊元素還是內聯元素，沒有寬度時默認內容撐開寬度；
4.脫離文檔流；
5.提升層級半級。
對其他浮動元素的影響：后浮動的元素永不會超過先浮動元素的頂端。
對普通元素的影響：浮動元素會從文檔正常流中刪除，使得緊挨它的元素位置發生偏移，影響布局。
對文字的影響：浮動元素向下延伸時，不會影響正常文本的顯示，文本會相對于浮動元素進行偏移。但部分文本背景會被浮動元素遮住。
浮動示例：
清除浮動指什么? 如何清除浮動?
清除浮動指的是：在非IE瀏覽器（如Firefox）下，當容器的高度為auto,且容器的內容中有浮動（float為left或right）的元素，在這種情況下，容器的高度不能自動伸長以適應內容的高度，使得內容溢出到容器外面而影響布局的現象，為了防止這個現象的出現而進行的CSS處理，就叫CSS清除浮動。
清除浮動的方法：
1.使用帶clear屬性的空元素
在浮動元素后使用一個空元素如 <div class="clear"></div> ，并在CSS中賦予 .clear{clear:both;} 屬性即可清理浮動。亦可使用 <br class="clear" /> 或 <hr class="clear" /> 來進行清理。
2.使用CSS的overflow屬性
給浮動元素的容器添加overflow:hidden;或overflow:auto;可以清除浮動，另外在 IE6 中還需要觸發 hasLayout ，例如為父元素設置容器寬高或設置 zoom:1。
3.使用CSS的:after偽元素
附加：關于使用clear:both清除浮動，一直都不太明白，還有就是對清除浮動的理解有誤，以為清除浮動之后，元素的渲染順序和普通流一樣，實際不是這樣的，下面給出我自己的理解，不足之處，歡迎大家批評指正。
關于浮動
如下代碼中：
在父容器中添加一個背景圖片，圖片會按照普通流渲染
若是在此基礎上給背景圖片添加浮動，效果如下：
我們可以看到父元素高度塌陷，背景圖片脫離文檔流，所以此時父容器div補給高度了，讓我們給父容器添加點文字看看它的高度變化
父容器的高度被撐開了。
所以子元素浮動使得父元素塌陷的原因是：因為沒有預先設置div高度，所以div高度由其包含的子元素高度決定。而浮動脫離文檔流，所以圖片并不會被計算高度。此時的div中，相當于div中子元素高度為0。
- 文字環繞
為什么情況二中box2的寬度比情況一中box2的寬度大，情況二中的box2可以浮動上去，而情況一中的不可以呢？
因為情況一中寬度限制100px，所以box2文字不能靠右圍繞，所以只能往下。 對于情況2，因為寬度為200px，所以box2在這個寬度內可以圍繞box1
- 關于clear:both 的理解：
Clear:both;其實就是利用清除浮動來把外層的div撐開，所以有時候，我們在將內部div都設置成浮動之后，就會發現，外層div的背景沒有顯示，原因就是外層的div沒有撐開，太小，所以能看到的背景僅限于一條線。
z-index 有什么作用? 如何使用?
z-index是針對網頁顯示中的一個特殊屬性，因為顯示器是顯示的圖案是一個二維平面，擁有x軸和y軸來表示位置屬性。為了表示三維立體的概念如顯示元素的上下層的疊加順序引入了z-index屬性來表示z軸的區別。表示一個元素在疊加順序上的上下立體關系。
z-index值較大的元素將疊加在z-index值較小的元素之上。對于未指定此屬性的定位對象，z-index 值為正數的對象會在其之上，而 z-index 值為負數的對象在其之下。
示例：
第二個div遮住了第一個div，對第二個添加z-index屬性，結果就會變成這個樣子，z-index 最簡單的應用就是這樣
只對定位元素有效
z-index屬性適用于定位元素（position屬性值為 relative 或 absolute 或 fixed的對象），用來確定定位元素在垂直于顯示屏方向（稱為Z軸）上的層疊順序，也就是說如果元素是沒有定位的，對其設置的z-index會是無效的。
雖然第一個div的z-index比第二個div大，但是由于第一個div未定位，其z-index屬性未起作用，所以仍然會被第二個div覆蓋。
相同z-index誰上誰下
相同的z-index其實有兩種情況
1.如果兩個元素都沒有定位發生位置重合現象或者兩個都已定位元素且z-index相同發生位置重合現象，那么按文檔流順序，后面的覆蓋前面的。
BFC 是什么？如何生成 BFC？BFC 有什么作用？舉例說明
在了解BFC之前，我們先要明白兩個概念：Box 和 Formatting Context。
Box: CSS布局的基本單位
Box是CSS布局的對象和基本單位，直觀點來說，頁面上任何一個元素都可以看成Box，Box分block-level，inline-level和匿名的。元素的類型和display屬性，決定了這個Box的類型。不同類型的Box會參與不同的Formatting Context（一個決定如何渲染文檔的容器），因此Box內的元素會以不同的方式渲染。讓我們看看有哪些盒子：
1、block-level box: display 屬性為 block, list-item, table 的元素會生成 block-level box。并且參與 block fomatting context；
2、inline-level box: display 屬性為 inline, inline-block, inline-table 的元素會生成 inline-level box。并且參與 inline formatting context；
3、run-in box: css3 中才有， 這兒先不講了。
“block-level box一定會產生block formatting context”的說法是錯誤的，block-level box須通過設置如overflow不為visible(IE6/7無效，可以設zoom)、float不為none等等來創建block formatting context。
Formatting context
Formatting context 是 W3C CSS2.1 規范中的一個概念。它是頁面中的一塊渲染區域，并且有一套渲染規則，它決定了其子元素將如何定位，以及和其他元素的關系和相互作用。最常見的 Formatting context 有 Block fomatting context (簡稱BFC)和 Inline formatting context (簡稱IFC)。
CSS2.1 中只有 BFC 和 IFC, CSS3 中還增加了 GFC 和 FFC。
w3c中BFC的定義：
官方鏈接下面是定義的中文翻譯：
浮動元素和絕對定位元素，非塊級盒子的塊級容器（例如 inline-blocks, table-cells, 和 table-captions），以及overflow值不為“visiable”的塊級盒子，都會為他們的內容創建新的BFC（塊級格式上下文）。
在BFC中，盒子從頂端開始垂直地一個接一個地排列，兩個盒子之間的垂直的間隙是由他們的margin 值所決定的。在一個BFC中，兩個相鄰的塊級盒子的 垂直外邊距會產生折疊。
在BFC中，每一個盒子的左外邊緣（margin-left）會觸碰到容器的左邊緣(border-left)（對于從右到左的格式來說，則觸碰到右邊緣）。
BFC的通俗理解：
首先BFC是一個名詞，是一個獨立的布局環境，我們可以理解為一個箱子（實際上是看不見摸不著的），箱子里面物品的擺放是不受外界的影響的。轉換為BFC的理解則是：BFC中的元素的布局是不受外界的影響，并且 在一個BFC中，塊盒與行盒（行盒由一行中所有的內聯元素所組成）都會垂直的沿著其父元素的邊框排列。
BFC的布局規則：
1.內部的Box會在垂直方向，一個接一個地放置。
2.Box垂直方向的距離由margin決定。屬于同一個BFC的兩個相鄰Box的垂直方向的margin會重疊
3.每個元素的margin box的左邊， 與包含塊border box的左邊相接觸(對于從左往右的格式化，否則相反)。即使存在浮動也是如此。
//以上3點的BFC對內的布局規則，下面3點是BFC對外的布局規則
4.BFC的區域不會與float box重疊。
5.BFC就是頁面上的一個隔離的獨立容器，容器里面的子元素不會影響到外面的元素。反之也如此。(這一條非常重要！！)
6.計算BFC的高度時，浮動元素也參與計算
哪些元素會生成BFC？
1.根元素(整個頁面就是一個大的BFC)
2.float屬性不為none
3.position為absolute或fixed
4.display為inline-block, table-cell, table-caption, flex, inline-flex
5.overflow不為visible
下面來看幾個例子：
1、防止margin重疊：
首先來看看上下margin重疊的情況：
上面p元素的margin-buttom加上下面p元素的margin-top等于200px，現在卻只有100px，那么問題來了：margin為什么會重疊？根據BFC布局規則的第二條我們得知，同一個BFC中的相鄰Box垂直方向的margin會重疊，故要解決margin重疊問題，只需要讓兩個p元素處于不同的BFC就ok了。
當用div包含第二個p元素會形成BFC，margin不再重疊。因為現在兩個p元素在不同的BFC中：第一個p元素處于根元素BFC中，第二個p元素處于類名為wrap的div形成的BFC中
2.左右兩欄布局
效果分析：根元素會形成一個BFC，根據BFC布局規則的第三條我們得知，每個元素的margin box的左邊， 與包含塊border box的左邊相接觸，即便有浮動元素也是如此，所以類名為right的box的左邊界會和包含塊的左邊對齊。
如何形成左右分開的兩欄布局呢？其實只要讓右邊的div形成BFC就可以了。因為BFC布局規則第4條規定：BFC的區域不會與float box重疊。
改進后的代碼如下：
** 3.清理內部浮動**
不過這種清理內部浮動的方法并不推薦，這里只是為了演示BFC的作用原理。
**嵌套元素邊距重疊： **
首先來看代碼：
從效果圖上可以看出，內層div的上下margin并沒有撐開外層div，反而使得外層div距離頂部和底部50px。解決這個問題，我們可以使外層div形成BFC。因為BFC是頁面上的獨立容器，里面的元素不會影響外面的元素，故在計算BFC的高度的時候，會把子元素的margin值也計算在內。所以可以使外層div形成BFC來解決嵌套元素邊距疊加的問題。#
- BFC的作用：
（1）解決margin重疊問題。所謂margin重疊是指處于同一個BFC的相鄰元素、嵌套元素，只要它們之間沒有阻擋（如：邊框、非空內容、padding等）就會發生margin重疊。這時只要讓其中一個元素生成新的BFC就能解決margin重疊問題。
（2）清除浮動影響。因為BFC可以包含浮動，所以讓父容器生成新的BFC可以讓父容器在視覺上包圍了浮動的子元素，因而清除了子元素浮動造成父容器高度塌陷問題。
** 在什么場景下會出現外邊距合并？如何合并？如何不讓相鄰元素外邊距合并？給個父子外邊距合并的范例**
塊級元素的上外邊距（margin-top）與下外邊距（margin-bottom） 有時會合并為單個外邊距，這樣的現象稱之為外邊距合并。
** 下面三種場景下會出現外邊距合并： **
- 相鄰元素：當兩個垂直外邊距相遇時，它們將形成一個外邊距。合并后的外邊距的高度等于兩個發生合并的外邊距的高度中的較大者。
- 父子元素：當一個元素包含在另一個元素中時（如沒有內邊距或邊框把外邊距分隔開），它們的上和/或下外邊距也會發生合并。
- 空塊元素：如果存在一個空的塊級元素，其 border、padding、inline content、height、min-height 都不存在，那么此時它的上下邊距中間將沒有任何阻隔，此時它的上下外邊距將會合并。
如果這個元素的外邊距遇到另一個元素的外邊距，還會繼續發生合并：
這就是一系列的段落元素占用空間非常小的原因，因為它們會發生合并，形成一個小的外邊距。
- 阻止外邊距合并：
形成BFC 可以阻止外邊柜合并，給元素添加浮動，絕對定位，display：inline-block，父子元素情況下，給父元素添加overflow：hidden 或 auto也可以阻止。^
margin負值
- margin負值的原理
為了方便理解負值margin，我們引入參考線的定義，參考線就是就是margin移動的基準點，而margin的值就是移動的數值。
margin的參考線有兩類，一類是top、left，它們以外元素作為參考線，另一類是right、bottom，它們以自身作為參考線。
簡單點說就是：
top負值就是以包含塊(Containing block) 內容區域的上邊或者上方相連元素 margin 的下邊為參考線;
left負值就是以包含塊(Containing block) 內容區域的左邊或者左方相連元素 margin 的右邊為參考線;
right負值就是以元素本身border的右邊為參考線；
bottom負值就是以元素本身border的下邊為參考線；
另外關于包含塊的定義具體請參考KB008包含塊(Containing block)
下面這張圖很直觀地解釋了margin的移動，其中紅色箭頭表示正值時候的移動方向，當margin為負值的時候就反方向移動。
總地來說，就是當margin-top、left為負值的時候與參考線的距離減少，當margin-right、bottom為負值的時候參考線就向左、上面移動。
實際小DEMO
1. 當設置margin-top為負值的時候
當設置class為two的div的margin-top為-50的時候，它的參考線是div.one的下邊，整個div.two向上移動使得與參考線的距離減少50px。
** 2.當設置margin-left為負值的時候**
**3.當設置margin-right為負值的時候 **
仍然讓兩個div左浮動，設置div.one的margin-right為-50px,這時候的參考線是本身的右邊界，margin-right為負值于是參考線向反方向即左方向移動。
**4.當設置margin-bottom為負值的時候 **
當設置div.one的margin-bottom為負值的時候，此時的參考線是自身的下邊界，bottom為負值于是參考線向反方向即向上方移動。
** margin負值的實際應用**
- 邊框去重
有的時候我們做Tab選項卡的時候不希望tab元素和父元素都加上邊框，因此就可以給tab元素添加一像素的margin。
2.左右布局
當用margin負值之后就可以通過改變margin-top等的值成為負值之后不需要使用float就可以實現左右布局
http://js.jirengu.com/fadej/1/edit?html,css,output
http://js.jirengu.com/degub/1/edit
