一、基礎概念

W3C標準：由萬維網聯盟制定的一系列標準：包括：
結構化標準語言（HTML和XML）；
表現標準語言（CSS）；
行為標準語言（DOM和ECMAScript）。
  倡導結構，樣式，行為分離。

CSS中的定位機制：

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

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

盒子的尺寸=邊框+外邊距+內邊距+盒子中的內容尺寸

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

盒子3D模型：

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

二、自動居中一列布局

關鍵詞：標準文檔流，塊級元素，margin屬性

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

  auto會根據瀏覽器的寬度自動地設置兩邊的外邊距

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

代碼示例：

一列布局固定：

發表評論 共有條評論 用戶名: 密碼: 驗證碼: 匿名發表