今天要寫的是CSS布局—盒子模型
首先說一下CSS的整體布局：
它包括容器（container），頁眉（header），導航條（navbar），頁面主要內容（main），菜單（menu），主要內容（content），邊條（sidebar），頁腳（footer）。
具體圖下圖所示：
㈠概念與組成
1.頁面上區域，圖片，導航，列表，段落都可以是盒子。
2.頁面中的所有元素都可以看成一個盒子，占據着一定的頁面空間。
3.組成：內容（content），高度（height），寬度（width），邊框（border），內邊距（padding），外邊距（margin）
如下圖所示：
4.一個盒子的實際寬度，高度：content+padding+border+margin
用一個實例在具體看一下，如下圖所示：
㈡overflow屬性
*當內容溢出盒子框的時候，overflow屬性取值
⑴hidden：超出部分不可見
⑵scroll：顯示滾動條
⑶auto：如有超出部分，顯示滾動條（瀏覽器自動判斷）
㈢border屬性
⑴border-width：px（像素）,thin（細）,medium（中等）,thick（粗）
⑵border-style：dashed（一個個橫線組成）,dotted（點組成）,solid（實線）,double（雙實線）
⑶border-color：顏色
⑷border：順序：width，style，color
用代碼顯示具體如下;
⑸用border屬性作出水平分割線
㈣padding與margin屬性
1.對瀏覽器默認的設置清零，采取全局聲明
注意：屬性的取值，只有當它取值為零的時候，才可以省略它的單位，其他情況是不可以的。
2.取值：px，%（外層盒子的寬度和高度）
㈤margin的縮寫
margin每個方向分量的值設定是如何省略的呢？
省略 拆開后
⑴margin：1px； margin：1px 1px 1px 1px；
⑵margin：1px 2px； margin：1px 2px 1px 2px；
⑶margin：1px 2px 3px； margin：1px 2px 3px 2px；
⑷margin：1px 2px 1px 3px； margin：1px 2px 1px 3px；
詳細解釋一下;
⑴第一個是四個方向取值相同，外邊距四個方向都是一個像素
⑵第二個是簡寫形式，省略后兩個值，表示上與下相等，左與右相等
⑶第三個是第四個值省略，表示左與右相等
⑷第四個注意，這里雖然上下邊距都為1px，但是這里不能縮寫，如果縮寫，位置會發生變化，值的設定就錯了
*四個方向有順序為：上右下左，順時針，如圖所示
㈥margin的案例
以margin屬性為例來進行盒子模型的屬性設定
這個代碼用兩個div標簽規定了兩個盒子，起兩個名字，定義他們共同的樣式，這個樣式的名字用div標簽來進行定義，div標簽作為樣式的名字，內部定義了它的內容的高度，寬度，外邊距，邊框四個屬性。
★用margin屬性來進行盒子的設定的時候注意兩點：
⑴div標簽做盒子的時候，有一個特點，每一個div標簽做出來的盒子，有一個換行的效果，就是它會獨占一行。
⑵顯示結果的這個上下邊距是什么樣的？
margin的合並：垂直方向合並，水平方向不合並。合並的結果是哪一個高度更高，合並結果就是哪一個高度。
如下圖所示：
㈦margin屬性設置水平居中
⑴圖片，文字水平居中：text-align：center；
⑵div水平居中：margin：0 auto；瀏覽器自動計算
其中，0設置的是上側和下側的值，可以任意；auto設置的是左側和右側的取值，設定為auto
★案例示意：
⑴首先是HTML部分如下圖所示：
⑵重點說一下CSS部分
我們用“#”開頭來定義這個外層盒子的樣式，為了讓所有圖片都居中，用文字和圖片的統一的居中的方式，就是text-align來進行設置，將它設置成center，圖片就在這個列表里面水平居中了。圖片在添加時會發現默認每兩個圖片之間有一定的空白的距離，它不是margin屬性設定出來的距離，而是這個圖像框里面默認的情況下，會有一個文字的瀏覽器默認設定的空白距離，這個距離如何去掉？如下面第二張圖所示。再下面我們要設置的是每幅圖片它的樣式，用一個嵌套的結構，選擇嵌套選器，首先我們要位於這個圖像框里面的圖片，我們來應用下面的樣式，每個圖片100×10這樣的高度和寬度，然后我們將它的每幅圖片的左側都設定成一個外邊距5個像素 ，然后它的邊框設定成一個像素的實線淺藍色。由於圖片和邊框之間需要一定的空白距離，把padding屬性設置一下，四個方向上都是5個像素，這樣圖像框就做好了。
⑶如何去掉這個空白距離？如圖所示：
以上就是盒子模型相關知識，希望可以有所幫助。