IT工程師數位筆記本

前面的話

　　CSS有三種基本的布局機制：普通流、浮動和絕對定位。利用定位，可以準確地定義元素框相對于其正常位置應該出現的位置，或者相對于父元素、另一個元素甚至瀏覽器窗口本身的位置。但元素究竟如何定位，定位到什么位置，主要依靠top/right/bottom/left這四個偏移屬性。本文就定位中的偏移做詳細介紹

position定位

　　值: static | relative | absolute | fixed | inherit

　　初始值: static

　　應用于: 所有元素

　　繼承性: 無

　　static:元素框正常生成。塊級元素生成一個矩形框，作為文檔流的一部分，行內元素則會創建一個或多個行框，置于其父元素中

　　relative:元素框偏移某個距離。元素仍保持其未定位前的形狀，它原本所占的空間仍保留

　　absolute:元素框從文檔流完全刪除，并相對于其包含塊定位，包含塊可能是文檔中的另一個元素或者是初始包含塊。元素原先在正常文檔流中所占的空間會關閉，就好像該元素原來不存在一樣。元素定位后生成一個塊級框，而不論原來它在正常流中生成何種類型的框

　　fixed:元素框的表現類似于將position設置為absolute，不過其包含塊是視窗本身

　　[注意]相對定位實際上被看作普通流定位模型的一部分，因為元素的位置相對于它在普通流中的位置

包含塊

【1】根元素

　　根元素HTML的包含塊(也稱為初始包含塊)是一個視窗大小的矩形，即HTML的父級document

【2】非根元素

　　如果position值是relative或static，包含塊由最近的塊級框、表單元格或行內祖先框的內容邊界構成

　　如果position值是absolute，包含塊設置為最近的position值不是static的祖先元素(可以是任何類型)，過程如下:

　　[1]如果這個祖先是塊級元素，包含塊則設置為該元素的內邊距邊界。換句話說，就是由邊框界定的區域

　　[2]如果這個祖先是行內元素，包含塊則設置為該祖先元素的內容邊界

　　[3]如果沒有祖先，元素的包含塊定義為初始包含塊，即document

　　[注意]由于元素可以定位到其包含塊的外面。這與浮動元素使用負外邊距浮動到其父元素內容區外面很類似。所以這里包含塊實際上應該是定位上下文，或者定位父級

偏移屬性

　　三種定位機制使用了4個屬性來描述定位元素各邊相對于其包含塊的偏移。這4個屬性被稱為偏移屬性。

　　top/right/bottom/left

　　值: <length> | <percentage> | auto | inherit

　　初始值: auto

　　應用于: 定位元素(也就是position值不是static的元素)

　　繼承性: 無

　　百分數: 對于top和bottom，相對于包含塊的clientHeight；對于right和left，相對于包含塊的clientWidth

　　這些屬性描述了距離包含塊最近邊的偏移。top描述了定位元素上外邊界離其包含塊的頂端有多遠。如果top為正值，會把定位元素的上外邊距邊界下移，若為負值，則會把定位元素的上外邊距移到其包含塊的頂端之上。類似地，left描述了定位元素的左外邊距邊界在其包含塊左邊界右邊(正值)或左邊(負值)有多遠。如果是正值，會把定位元素的外邊距邊界移到包含塊左邊界右邊，而負值則將其移到包含塊左邊界左邊。所以，正值會導致向內偏移，使邊界朝著包含塊的中心移動，而負值會導致向外偏移。

　　偏移定位元素的外邊距邊界時，帶來的影響是元素的所有一切(包含外邊距、邊框、內邊距和內容)都會在定位的過程中移動

　　[注意]定位元素的邊界是指定位元素margin外側的邊界；包含塊的包含區域是指包含塊的border內側的padding+content區域

絕對定位

　　元素絕對定位時，會從文檔流中完全刪除。然后相對于其包含塊定位，其邊界根據偏移屬性(top、left等)放置。定位元素不會流入其他元素的內容，反之亦然。元素絕對定位時，會為其后代元素建立一個包含塊

　　[注意]如果文檔可滾動，絕對定位元素會隨著它滾動，因為元素最終會相對于正常流的某一部分定位

　　當元素絕對定位時，偏移屬性表現如下:

    left:0 元素的左邊界(margin-left外側)位于包含塊的左邊界內側(border-left內側)
    top:0 元素的上邊界(margin-rop外側)位于包含塊的上邊界內側(border-top內側)
    right:0 元素的右邊界(margin-right外側)位于包含塊的右邊界內側(border-right內側)
    bottom:0 元素的下邊界(margin-bottom外側)位于包含塊的下邊界內側(border-bottom內側)

    當top、right、bottom、left四個值都為auto時(即都處于默認狀態時)，
    left:auto 元素的左邊界位于元素處于靜態位置時的左邊界
    top:auto 元素的上邊界位于元素處于靜態位置時的上邊界
    right:auto 元素的右邊界位于正好能包裹住元素的橫向區域的右邊界(margin-right外側)
    bottom:auto 元素的下邊界位于正好能包裹住元素的縱向區域的下邊界(margin-bottom外側)

　　[注意]元素的靜態位置是指元素在正常流中原本的位置，更確切的講，頂端的靜態位置是從包含塊的上邊界到假想框的上外邊距邊界之間的距離。假想框是假設元素position屬性為static時元素的第一個框。如果這個假想框在包含塊的上面，則這個值為負

//DEMO中，包含塊的width和height都是180px，padding為10px，所以包含塊的clientWidth和clientHeight都是200px

格式化

　　對于普通流的元素來說，水平格式化的7大屬性是margin-left、border-left、padding-left、width、padding-right、border-right、margin-right7個屬性的值加在一起必須是元素包含塊的寬度，這往往是塊元素的父元素的width值(因為塊級元素的父級元素幾乎都是塊級元素)。垂直方向也類似。關于元素格式化的詳細信息移步至此

　　但是對于絕對定位元素則不相同。它的水平格式化等式為:

left + margin-left + border-left-width + padding-left + width + padding-right + border-right-width + margin-right + right = 包含塊的clientWidth

　　類似的，垂直格式化等式為:

top + margin-top + border-top-width + padding-top + height + padding-bottom + border-bottom-width + margin-bottom + bottom = 包含塊的clientHeight

auto

　　auto值是用來彌補實際值與所需總和的差距。

　　水平方向上，可以為auto的屬性有left、margin-left、width、margin-right、right。類似地，垂直方向上，可以為auto的屬性有top、margin-top、height、margin-bottom、bottom

【0個auto】

　　當水平方向上9個值的和不等于包含塊的clientWidth時，屬于過度受限的情況，right值會被重置為auto；類似地，當垂直方向上9個值的和不等于包含塊的clientHeight時，屬于過度受限的情況，bottom值會被重置為auto

【1個auto】

　　根據水平和垂直格式化等式，auto為計算值

【2個auto】

　　當margin-left和margin-right同時為auto時，margin-left和margin-right都為等式計算值且相等

　　[注意]在margin-left和margin-right同時為auto的情況下，只有當left和right值相等時，元素才能水平居中顯示；否則，雖然margin-left和margin-right依然相等，但由于left和right并不相等，元素也不能水平居中

　　當margin-left或margin-right不同時為auto時，值為auto的margin-left或margin-right被置為0

　　當width與left或right同時為auto時，width被置為寬度最小值(內容寬度)

　　當left和right同時為auto時，則left為置為0

　　類似地，

　　當margin-top和margin-bottom同時為auto時，margin-top和margin-bottom都為等式計算值且相等

　　[注意]在margin-top和margin-bottom同時為auto的情況下，只有當top和bottom值相等時，元素才能垂直居中顯示；否則，雖然margin-top和margin-bottom依然相等，但由于top和bottom并不相等，元素也不能垂直居中

　　當margin-top或margin-bottom不同時為auto時，值為auto的margin-top或margin-bottom被置為0

　　當height與top或bottom同時為auto時，height被置為高度最小值(行高)

　　當top和bottom同時為auto時，則top為置為0

【3個auto】

　　當margin-left和margin-right同時為auto時，margin-left和margin-right都被置為0

　　當margin-left和margin-right不同時為auto時，值為auto的margin-left或margin-right被置為0

　　除了width、margin-left和margin-right同時為auto時，margin-left和margin-right都置為0，width為等式計算值；其他情況下，width都被置為寬度最小值(內容寬度)

　　當left和right同時為auto時，則left為置為0

　　類似地，

　　當margin-top和margin-bottom同時為auto時，margin-top和margin-bottom都被置為0

　　當margin-top和margin-bottom不同時為auto時，值為auto的margin-top或margin-bottom被置為0

　　除了height、margin-top和margin-bottom同時為auto時，margin-top和margin-bottom都置為0，height為等式計算值；其他情況下，height都被置為高度最小值(行高)

　　當top和bottom同時為auto時，則top為置為0

【4個auto】

　　當width不為auto時，margin-left和margin-right被置為0，left被置為0，right為計算值

　　當left不為auto時，margin-left和margin-right被置為0，width被置為寬度最小值(內容寬度)，right為計算值

　　當right不為auto時,margin-left和margin-right被置為0，width被置為寬度最小值(內容寬度)，left為計算值

　　當margin-left不為auto時，left和margin-right被置為0，width被置為寬度最小值(內容寬度)，right為計算值

　　當margin-right不為auto時，left和margin-left被置為0，width被置為寬度最小值(內容寬度)，right為計算值

　　類似地，

　　當height不為auto時，margin-top和margin-bottom被置為0，top被置為0，bottom為計算值

　　當top不為auto時，margin-top和margin-bottom被置為0，height被置為高度最小值(行高)，bottom為計算值

　　當bottom不為auto時,margin-top和margin-bottom被置為0，height被置為高度最小值(行高)，top為計算值

　　當margin-top不為auto時，top和margin-bottom被置為0，height被置為高度最小值(行高)，bottom為計算值

　　當margin-bottom不為auto時，top和margin-top被置為0，height被置為高度最小值(行高)，bottom為計算值

【5個auto】

　　left、margin-left和margin-right被置為0，width被置為寬度最小值(內容寬度)，right為計算值

　　類似地，top、margin-top和margin-bottom被置為0，height被置為高度最小值(行高)，bottom為計算值

總結

　　auto值的賦值順序為：margin先置0或其他值，然后寬高置為最小值，然后left/top置為0，最后right/bottom為等式計算值

　　[注意1]IE7-瀏覽器不支持絕對定位元素通過將上下外邊距設置為auto來實現垂直居中的行為

　　[注意2]IE6-瀏覽器不支持絕對定位元素不設置寬度，而通過設置top/left/right/bottom來撐開寬高的行為

//DEMO中，定位元素的padding、border都為0。而父級元素也就是包含塊的width和height都設為200px，邊框為2px