- 盒子的組成
盒子由content（內容），padding（內邊距），border（邊距），margin（外邊距）組成。
正文框的最內部分是實際的內容，直接包圍內容的是內邊距。內邊距呈現了元素的背景。內邊距的邊緣是邊框。邊框以外是外邊距，外邊距預設是透明的，不會遮擋其後的任何元素。

• css盒子模型內邊距（padding）
  內邊距（padding）在正文外，邊框（border）內。
  具體屬性值↓

http://www.w3school.com.cn/cssref/pr_padding.asp

• - css盒子模型邊框（border）

邊框 (border) 是圍繞元素內容和內邊距的一條或多條線。 設定 border 屬性可以規定元素邊框的樣式、寬度和顏色。
具體屬性值↓

http://www.w3school.com.cn/cssref/pr_border.asp

• css盒子模型外邊距（margin）
  外邊距就是圍繞在內容框的區域,可以參考上面的結構圖.預設為透明的區域.同樣,外邊距也接受任何長度的單位,百分數.與內邊距很相似。
  PS:外邊距的合併:預設狀態是合併狀態。
  具體屬性值↓

http://www.w3school.com.cn/cssref/pr_margin.asp

**下面我們可以寫一個簡單的css盒子模型應用 **
我們先來看一下佈局圖片

這裡我們可以看到佈局由top，middle和bottom組成
其中top中有topcenter
具體程式碼如下
html

 <div class="top">
            <div class="topcenter">
                <h1>我的青春戀愛物語果然有問題</h1>
            </div>
        </div>

css
.top{ background-color: steelblue; width: 100%; height: 70px; text-align: left; } .topcenter{ margin: 0px auto;/*左右自適應，上下為0*/ width: 75%; height: 70px; background-color: cadetblue; text-align: center; }

下面是middle佈局
middle佈局可以分為（middle）（middle1）（middle2）
具體程式碼如下
HTML

 <div class="middle">
            <div class="middle1">
                <br/><h2>middle1</h2>
            </div>
            <br/>
            <div class="middle2">
                <br/><h2>middle2</h2>
            </div>
        </div>

css樣式程式碼如下

.middle{
    width: 75%;
    height: 800px;
    margin: 8px auto;
    background-color: gray; 
}
.middle1{
    width: 100%;
    height: 30%;
    background-color: cadetblue;
    margin: 0px;
    text-align: center;
}
.middle2{
    width: 100%;
    height: 10%;
    margin: 10px 0px;
    background-color: darkgreen;
    text-align: center;
}

最後也就是bottom佈局
HTML程式碼如下

  <div class="bottom"></div>

css程式碼如下

.bottom{
    margin: 0px auto;
    height: 50px;
    width: 75%;
    background-color: aquamarine;  
}

通過這一篇的學習基本認識了css佈局的具體思路及其所需的屬性。下一篇可能會是HTML+css佈局騰訊首頁