網頁佈局基礎（1）－自動居中一列布局

基礎知識

W3C標準：結構化標準語言（HTML / XML）

                 表現標準語言（CSS）

                 行爲標準語言（DOM / ECMAScript）

倡導：結構、樣式、行爲分離。

1、CSS定位機制

1. 標準文檔流（Normal flow）

        從上到下、從左到右，輸出文檔內容；由塊級元素和行級元素組成。

2. 浮動（Float）

        可以實現多列布局；經過設置float屬性設置。​

3. 絕對定位（Absolute positioning）

2、塊級元素 / 行級元素

1. 塊級元素:

          從左到右撐滿頁面，獨佔一行；

          觸碰到頁面邊緣時自動換行。

          Eg:div、ul、li、dl、dt、p...​

2.行級元素

          能在同一行內顯示；

          不會改變HTML文檔結構。

          Eg:span、stong、input、img...(大部分表單標籤)​

3、盒子模型



盒子模型尺寸=邊框+外邊距+內邊距+盒子中內容尺寸​​​​