html是流式文件，所以html預設布局就是流式布局，這裡所說的流式布局怎麼理解呢？所謂了流式 布局就是：所有元素（包括塊級元素和非塊級元素）將以流的形式依次從左到右、從上到下排列！
流式布局是重點，在知道流式布局的原理之後，還要專注某乙個元素在流式布局中自我的表現，元素空間分為占用空間和物理空間，占用空間是指元素所占用的空間，物理空間是指元素實際上所占用的空間！也即是說可以占用大空間，但是實際自身大小只能占用多大空間，剩餘的就是配相的。
說到單個元素占用空間，不免有必須知道元素邊距的事！因為邊距margin會對文件流種其他的元素產生影響！
元素的布局分為相對布局和絕對布局，如果指定某元素的布局為相對布局，那麼該元素在流式布局中的位置還是占用的！也就是不會影響其他元素的位置（就好像是預設的流式布局一樣，自動被安排放置，各個元素的位置是相對的，所以認為是相對布局，這樣理解我感覺更恰當）；如果指定某元的區域性為絕對布局，那麼該元素就會脫離文件流，此時其他元素會占用原本它應該占用的位置，並且該元素以最近的具有定位（position）屬性的父親或祖先元素為參照物！
所以影響文件的流式布局的因素有某元素自身使用了絕對布局，導致脫離文件流，這就是我們關注的重點！因為它改變了遊戲規則，那麼這個絕對布局特殊性在**？那就是他的位置脫離之後是如何布局到ui中的，如果position被指定（相對布局和絕對布局都可以），那麼left、top、right、bottom屬性就生效了，其他情況屬於無效！而且四個元素只能用相鄰的兩個元素，即不能使用上又使用下，使用了左又使用右！ 還有就是使用了絕對定位的元素因為已經脫離了文件流，margin-bottom和margin-right兩個值不再對文件中的元素產生影響（margin-top和margin-left還是有影響,當然不影響流式布局中的元素，但是影響其他絕對布局的元素，但是margin-right和margin-bottom就對其他元素沒任何影響了），絕對定位和相對定位的累加加效果不同，如果top、bottom、left、right屬性和margin屬性偏移的方向相反，top、bottom、left、right屬性值有效，反方向的margin屬性值無效！
總結：相對定位的元素不會脫離文件流，占用文件流的空間，left; right; top和bottom屬性與margin屬性混合使用會產生累加效果。 絕對定位的元素脫離文件流，偏移不影響文件流中的其它元素，left; right; top和bottom屬性與margin屬性混合使用，偏移方向相同值累加，方向相反，margin屬性值無效。 絕對定位的元素以最近的定位祖先元素為參照物。
CSS定位，相對定位，絕對定位
position relative 表示相對定位。對乙個元素進行相對定位，即指通過設定垂直或水平位置，讓這個元素 相對於 它的原點起點進行移動。如果將top設定20px，那麼框將在原位置頂部下面20畫素的地方 如果將left設定為30畫素，那麼會在元素左邊建立30畫素的空間，也就是將元素向右移動，如...
定位 絕對定位 相對定位
定位是一種高階的布局手段 通過定位可以將元素擺放到頁面的任意位置 使用position屬性來設定定位當元素開啟了定位以後，可以通過偏移量來設定元素的位置 例如 top 100px bottom xxpx left right 注意 relative相對定位的參照元素是其本身在文件流中的位置進行定位 ...
CSS之定位，相對定位，絕對定位，固定定位
1 position 屬性可以控制web瀏覽器如何以及在何處顯示特定的元素。2 可以使用position屬性把乙個元素放置到網頁中的任何位置。可選值 static 預設值，元素沒有開啟定位 relative 開啟相對定位 absolute 開啟絕對定位 fixed 開啟固定定位 3 相對定位 每個元...