一、基礎(chǔ)概念

W3C標準：由萬維網(wǎng)聯(lián)盟制定的一系列標準：包括：
結(jié)構(gòu)化標準語言（HTML和XML）；
表現(xiàn)標準語言（CSS）；
行為標準語言（DOM和ECMAScript）。
  倡導結(jié)構(gòu)，樣式，行為分離。

CSS中的定位機制：

1、標準文檔流（Normal flow）：從上到下，從左到右，輸出文檔內(nèi)容，由塊級元素（從左到右撐滿頁面，獨占一行；觸碰到頁面邊緣時，會自動換行。常見塊級元素：div、lu、li、d、dt、p……）和行級元素(能在同一行內(nèi)顯示，不會改變HTML文檔結(jié)構(gòu)。常見行級元素：span、strong、img、input……)組成。
2、浮動（Floats)：
3、絕對定位（Absolute positioning）：

盒子模型：網(wǎng)頁布局的基石，有四部分組成：
邊框（border）、外邊距（margin）、內(nèi)邊距（padding）、盒子中的內(nèi)容（content）。如下圖：

盒子的尺寸=邊框+外邊距+內(nèi)邊距+盒子中的內(nèi)容尺寸

注：塊級元素和行級元素都是盒子模型。

盒子3D模型：

常見頁面布局及解決方案：

二、自動居中一列布局

關(guān)鍵詞：標準文檔流，塊級元素，margin屬性

自動居中一列布局需要設(shè)置margin左右值為auto，而且一定要設(shè)置寬度為一個定值。

  auto會根據(jù)瀏覽器的寬度自動地設(shè)置兩邊的外邊距

如果想讓頁面自動居中，當設(shè)置margin屬性為auto的時候，不能再設(shè)置浮動和絕對定位屬性

代碼示例：

一列布局固定：