css布局在整個前端開發中佔據了大約50-70%的工作量，在遵循web規範的前提下，編寫合乎規範的前端**，實現結構、樣式和行為的分離，對於後期**的維護以及不同的開發人員之間的協作具有重要的意義。
在編寫html的過程中,強調使用帶有明確語義的標籤，html中標籤除了div和span之外都是有明確的語義的，這樣一方面可以增強**的可讀性，另一方面可加快瀏覽器的解析速度。
html中的每乙個標籤，根據其其自身的屬性可以區分為行級元素還是塊級元素，一般情況下，應該盡可能使用標籤預設的位置進行布局，當預設位置不能滿足展示需求的時候，再考慮採用css**來進一步控制標籤元素的位置。 css定位的基礎是基於盒子模型，介紹如下：
任何頁面元素都可以看成乙個盒子
乙個盒子模型由content、padding、border、margin四部分組成。
width(height)的值指content的width(height)+padding的值。
border：border-top、border-bottom、border-left、border-right
width: thin、medium、thick、數值
style: none、hidden、dotted、dashed、solid、double、groove、ridge、inset、outset
padding：padding-top、padding-bottom、padding-left、padding-right
margin：margin-top、margin-bottom、margin-left、margin-right
對一行而言，兩個塊的margin = margin-right + margin-left
對換行而言，兩個塊的margin = margin-bottom和margin-top中較大者
對父子而言，子塊的margin = 子塊的margin + 父塊的padding
當margin設為負數時，塊會向相反的方向移動，甚至覆蓋另外的塊
定位的目的是在框元素的padding、margin等自身屬性無法滿足需求時，改變元素在html文件中的預設位置，定位到目標區域時使用。如果要使用 top,bottom,left,right 屬性，就必須要使用relative和absolute定位屬性。
在css中關於定位的型別有如下幾種：
position:relative | absolute | static | fixed
static(靜態：沒有特別的設定，遵循基本的定位規定，保持原來的位置不變，不能通過z-index進行層次分級。
relative(相對定位)：物件不脫離文件流，物件不可層疊、參考自身靜態位置通過 top,bottom,left,right 定位，並且可以通過z-index進行層次分級。也就是說儘管物件偏離了原來應該所在的位置，但是原來的位置還是佔據中，不然其他元素用。
absolute(絕對定位)：脫離文件流，通過 top,bottom,left,right 定位。選取其最近乙個最有定位設定的父級物件進行絕對定位，如果物件的父級沒有設定定位屬性，absolute元素將以body座標原點進行定位，可以通過z-index進行層次分級。本來應該在的位置被讓出來的，其他的元素填充那個位置。
fixed（固定定位）：這裡所固定的參照對像是可視視窗而並非是body或是父級元素。可通過z-index進行層次分級。
注：css中定位的層疊分級：z-index: auto | namber;
auto 遵從其父物件的定位
namber 無單位的整數值。可為負數
相對定位是相對於該元素本來在文件中應該出現的位置。
設定為相對定位的元素框會偏移某個距離。元素仍然保持其未定位前的形狀，它原本所佔的空間仍保留。如果將 top 設定為 20px，那麼框將在原位置頂部下面 20 畫素的地方。如果 left 設定為 30 畫素，那麼會在元素左邊建立 30 畫素的空間，也就是將元素向右移動。
決定定位是相對於其父元素而言。
設定為絕對定位的元素框從文件流完全刪除，並相對於其包含塊定位，包含塊可能是文件中的另乙個元素或者是初始包含塊。元素原先在正常文件流中所佔的空間會關閉，就好像該元素原來不存在一樣。元素定位後生成乙個塊級框，而不論原來它在正常流中生成何種型別的框。絕對定位使元素的位置與文件流無關，因此不佔據空間。這一點與相對定位不同，相對定位實際上被看作普通流定位模型的一部分，因為元素的位置相對於它在普通流中的位置。絕對定位的元素的位置相對於最近的已定位祖先元素，如果元素沒有已定位的祖先元素，那麼它的位置相對於最初的包含塊。
普通流中其它元素的布局就像絕對定位的元素不存在一樣：
因為絕對定位的框與文件流無關，所以它們可以覆蓋頁面上的其它元素。可以通過設定 z-index 屬性來控制這些框的堆放次序。
如果要是要使父元素包含子元素的話，應該使父元素的寬和高包含子元素的。
div1為絕對定位：其脫離為文件流。不佔據文件流的位置，position: absolute;left: 150px;top:20px;
div2為相對定位：注意是相對其應該出現的位置，position:relative ;top:20px;left:150px;
div21為相對定位：圖所示，可以理解。
css 中相對定位和絕對定位
1.css中定位機制有三種 標準文件流,浮動,絕對定位 2.絕對定位就屬於第三種定位,用到position屬性,下面就是具體設定 相對定位 相對於自身原有位置 就是普通流的時候 進行偏移 設定top,left.後 仍然處於標準文件流中 隨即擁有偏移屬性和z index屬性 絕對定位 建立了以包含塊為...
css絕對定位和相對定位的理解
層級關係為 為改變參照物 橘色框 後的效果 層級關係為 參照物為最頂級的元素情況。層級關係為 僅使用margin屬性布局絕對定位元素的情況 此情況，margin bottom 和margin right的值不再對文件流中的元素產生影響，因為該元素已經脫離了文件流。另外，不管它的祖先元素有沒有定位，都...
理解絕對定位和相對定位
概要 本文主要描述xhtml中相對定位和絕對定位各自的本質 用法 區別和兩者之間的關係。以及使用css的left right top bottom屬性 偏移屬性 和margin屬性 外邊距 對定位塊級元素進行布局的方法。本文的示例，請看這個附件demo。說明 佔位空間 元素在文件流中所佔據的空間。物...