css布局模型有三種，分別為流動模型（flow）、浮動模型和層模型。
流動模型
- 為預設模型，當未設定其他模型時使用。
- 塊狀元素在包含其的父元素內部，從上到下順序排列，每個一行（設定寬度時按設定的寬度顯示）。
- 內聯元素和內聯塊狀元素都會在包含其的元素內從左到右水平順序顯示。
- 無法通過設定left、right、top和bottom來確定位置。
- 可通過設定margin及padding來確定位置。
浮動模型
- 使用"float:left;"和"float:right;"設定。
- 可使塊狀元素、內聯元素和內聯塊狀元素都浮於一行。
層模型通過設定left、right、top和bottom來確定位置。
-絕對定位
"position: absolute;"
距離是相對於包含其的有定位屬性的祖先元素的相對距離。
最「祖先」可追溯至body元素。表現為相對於瀏覽器視窗的距離。
- 相對定位
"position: relative;"
距離是相對於該元素原來在流動模型中的位置。（且流動模型仍為其保留位置）
- 固定定位
"position: fixed;"
距離是相對於螢幕內頁面視窗檢視的距離。（即滾動滑鼠，在視窗中位置不變）
CSS布局總結
對於css的學習來說，布局和定位可以說使最關鍵的一部分，也是最基礎的部分，布局和定位方面在學習的時候應該要系統，要自己總結一遍，如果只是草草的過一遍，就直接開始做demo，會遇到很多坑，反而得不償失。因此我寫下這篇部落格，讀者如果發現問題，望不吝賜教。在講布局和定位之前，先總結一下盒子模型。盒模型是...
CSS常見布局總結
元素水平居中 行內元素水平居中 text align center 塊元素水平居中 margin 0 auto 注意 margin 是復合屬性，也就是說 margin auto 其實相當於 margin auto auto auto auto margin 0 auto 相當於 margin 0 a...
css布局總結（一）
1.一列定寬，一列自適應 兩列在同一行 第乙個元素必須脫離或半脫離文件流 右邊一列要佔滿剩餘的寬度 塊級元素寬高會自動預設充滿剩下螢幕 預設左邊先顯示 float margin float bfc 有重要內容先顯示 右側先 float 負外邊距 右側主體自適應區塊 左側定寬200px區塊 先顯示的放...