開篇介紹：在css中是有三種定位機制的：普通文件流、浮動和絕對定位。在未指定其它兩種定位機制的情況下，所有框都是在普通文件流中定位的。
1、普通文件流
即就是根據塊級元素的標籤在html裡的順序，從上至下，依次排開。行內元素在一行中水平排列的。
行元素（行內元素）:在水平方向上修改水品尺寸(padding，margin，border)，能產生相應的效果，垂直方向上對行元素的高度是毫無影響的。
因此，行內元素直接定義width和height是沒有意義的，行元素的寬高是靠內容撐起來的。
但是，可以通過設定line-height，來規定行元素的高度；
同樣，可以通過對行元素設定display屬性，轉化為塊元素，display：block
2、定位
static預設的：定位無特殊說明就是預設的，在普通流中顯示，沒有脫離普通流
absolute絕對定位
a、如果父級不是static，本級會跟著父級動，如果父級的父級不是static會按照離自己最近的父級來動，如向上的層次都是static，會直接定位到body的某乙個位置
b、絕對定位當元素位置發生改變的時候，改變之前的位置已經不存在了，會被其他元素頂替掉該位置
注意：
（1）、絕對定位是「相對於」最近的已定位祖先元素，如果不存在已定位的祖先元素，那麼「相對於」最初的包含塊。
（2）、因為絕對定位的框與文件流無關，所以它們可以覆蓋頁面上的其它元素。可以通過設定 z-index 屬性為數值，不是px，來控制這些框的堆放次序。
relative相對定位
a、相對於自己原來的位置定位，更改方式有畫素值和百分比，其中使用百分比來更改則需要理解百分位為父檢視
b、在當元素位置發生改變的時候，改變之前的位置還存在，不會被其他元素定提到該位置
fixed固定定位
a、可以固定在螢幕的固定位置，元素定位是從元素的內容開始定位，eg：padding是輸入div中的內容，定位內容包括padding，屬於絕對定位，脫離文件流，會發生覆蓋，只是他是基於視口的定位，隨著滾動條滾動，不會發生改變
相對定位(relative): 是一種相對於元素初始位置的移動，在水平方向上使用left和right，垂直方向上使用top和left。但是無論是否移動，元素仍然佔據原來的空間，所以移動的元素會導致覆蓋的情況。它仍然是被看 作普通文件流的一部分，這和接下來的絕對定位有著本質區別。
絕對定位(absolute): 這是一種非常有用，也經常被人濫用的css技術。絕對定位會使元素脫離普通文件流，不佔據文件流的空間。其它元素的布局會忽視絕對定位。它是相對於 基於它的上乙個已經定位的祖先元素進行偏移。若沒有已經定位的祖先元素，通常情況下就會根據html元素進行偏移。進行絕對定位後，會有顯示的層級z- index，數值越高，層級越高。
固定定位(fixed): 它也屬於絕對定位，脫離文件流，會發生覆蓋。但是它是基於視口的定位而且隨著滾動條滾動，位置不會發生改變。
常見用法：對於乙個巢狀的元素，要讓內層元素靈活定位在包含元素的附近。可以先讓包含元素position:relative，再讓內層元素position:absolute，這樣內層元素就會相對於外層元素進行位移。
3、浮動
浮動的元素脫離文件流，失去文件流的元素空間。
若進行左浮動，脫離文件流的元素會向左移動，直到遇到包含元素的左邊緣。
若多個元素一起浮動，則除第乙個元素之外，其它元素都會定位在前乙個浮動元素之後（即它的右邊）。
若包含元素不夠寬，則無法水平排列的元素會向下移動，直到有足夠的空間。若浮動元素的高度不一致，還會發生元素卡在較高的元素的現象。
因為浮動元素脫離了文件流，所以浮動元素並不會佔據包含元素的空間，包含元素高度不會自動撐開，造成塌陷。我們需要做點清除浮動的處理。
開篇介紹：在css中是有三種定位機制的：普通文件流、浮動和絕對定位。在未指定其它兩種定位機制的情況下，所有框都是在普通文件流中定位的。
1、普通文件流
即就是根據塊級元素的標籤在html裡的順序，從上至下，依次排開。行內元素在一行中水平排列的。
行元素（行內元素）:在水平方向上修改水品尺寸(padding，margin，border)，能產生相應的效果，垂直方向上對行元素的高度是毫無影響的。
因此，行內元素直接定義width和height是沒有意義的，行元素的寬高是靠內容撐起來的。
但是，可以通過設定line-height，來規定行元素的高度；
同樣，可以通過對行元素設定display屬性，轉化為塊元素，display：block
2、定位
static預設的：定位無特殊說明就是預設的，在普通流中顯示，沒有脫離普通流
absolute絕對定位
a、如果父級不是static，本級會跟著父級動，如果父級的父級不是static會按照離自己最近的父級來動，如向上的層次都是static，會直接定位到body的某乙個位置
b、絕對定位當元素位置發生改變的時候，改變之前的位置已經不存在了，會被其他元素頂替掉該位置
注意：
（1）、絕對定位是「相對於」最近的已定位祖先元素，如果不存在已定位的祖先元素，那麼「相對於」最初的包含塊。
（2）、因為絕對定位的框與文件流無關，所以它們可以覆蓋頁面上的其它元素。可以通過設定 z-index 屬性為數值，不是px，來控制這些框的堆放次序。
relative相對定位
a、相對於自己原來的位置定位，更改方式有畫素值和百分比，其中使用百分比來更改則需要理解百分位為父檢視
b、在當元素位置發生改變的時候，改變之前的位置還存在，不會被其他元素定提到該位置
fixed固定定位
a、可以固定在螢幕的固定位置，元素定位是從元素的內容開始定位，eg：padding是輸入div中的內容，定位內容包括padding，屬於絕對定位，脫離文件流，會發生覆蓋，只是他是基於視口的定位，隨著滾動條滾動，不會發生改變
相對定位(relative): 是一種相對於元素初始位置的移動，在水平方向上使用left和right，垂直方向上使用top和left。但是無論是否移動，元素仍然佔據原來的空間，所以移動的元素會導致覆蓋的情況。它仍然是被看 作普通文件流的一部分，這和接下來的絕對定位有著本質區別。
絕對定位(absolute): 這是一種非常有用，也經常被人濫用的css技術。絕對定位會使元素脫離普通文件流，不佔據文件流的空間。其它元素的布局會忽視絕對定位。它是相對於 基於它的上乙個已經定位的祖先元素進行偏移。若沒有已經定位的祖先元素，通常情況下就會根據html元素進行偏移。進行絕對定位後，會有顯示的層級z- index，數值越高，層級越高。
固定定位(fixed): 它也屬於絕對定位，脫離文件流，會發生覆蓋。但是它是基於視口的定位而且隨著滾動條滾動，位置不會發生改變。
常見用法：對於乙個巢狀的元素，要讓內層元素靈活定位在包含元素的附近。可以先讓包含元素position:relative，再讓內層元素position:absolute，這樣內層元素就會相對於外層元素進行位移。
3、浮動
浮動的元素脫離文件流，失去文件流的元素空間。
若進行左浮動，脫離文件流的元素會向左移動，直到遇到包含元素的左邊緣。
若多個元素一起浮動，則除第乙個元素之外，其它元素都會定位在前乙個浮動元素之後（即它的右邊）。
若包含元素不夠寬，則無法水平排列的元素會向下移動，直到有足夠的空間。若浮動元素的高度不一致，還會發生元素卡在較高的元素的現象。
因為浮動元素脫離了文件流，所以浮動元素並不會佔據包含元素的空間，包含元素高度不會自動撐開，造成塌陷。我們需要做點清除浮動的處理。
8 脫離標準文件流（浮動 固定定位 絕對定位）
盒子居中 margin 0 auto 浮動元素脫離了標準文件流 d1盒子脫離了標準文件流，d2盒子因此成為了標準文件流第乙個，位於頁面左上方，d1盒子浮動在d2上.d1.d2 span為行內元素，脫離了標準文件流，未設定display block也能設定寬高 span 你好你好 浮動的元素互相貼靠如...
浮動定位 顯示方式 相對 絕對 固定定位
普通流定位 浮動定位 相對定位 絕對定位 固定定位 每個元素在頁面上都有自己的空間 每個元素都是從父元素的左上角開始繪製 塊級元素按照從上往下的順序，逐行排列，每個元素獨佔一行 行內 行內塊，多個元素在一行中，從左往右顯示 讓塊級元素橫向顯示 float none left right 元素浮動 脫...
相對定位 絕對定位 固定定位
設定position屬性值為static的元素是乙個靜態定位元素，此值為預設值，即此元素在正常文件流中。設定position屬性為relative的元素是乙個相對定位元素，其定位的參照物為元素本身 即元素原本的位置進行定位 例項 parent child style class parent cla...