CSS盒模型
CSS中的盒模型
盒模型的基本概念
之前說過的網頁中的這些元素的排列方式，那麼他們之間也是有距離的，這個距離就不能通過排列的方式（浮動、定位）來調整的，那麼他們之間是怎樣去調整的呢？
這個時候就需要使用到盒子模型的概念了，盒子模型是一個非常重要的概念，頁面中的元素都是按照該模型的形式存在，它的基本結構圖如下：
margin：外邊距。表示元素與元素之間的距離，它是一個複用屬性，它的值可以拆分為：margin-left、margin-top、margin-righ、margin-bottom四個方位的外邊距。只可以是px，也可以是百分數，基本常用的為px。注意的是外邊距為透明的，具體除錯還需要藉助除錯工具。
border：邊框。表示元素最外層的框，該框可以設定大小、顏色，型別等。它也有四個方位的分寫：border-left、border-top、border-right、border-bottom。它的其他屬性如下：
border-width：邊框的寬度（大小） px作為常用的單位。
border-style：設定邊框的樣式，常用的為solid，表示實現實線。其他值如下表：
| 值 | 描述 |
|---|---|
| none | 定義無邊框。 |
| hidden | 與 "none" 相同。不過應用於表時除外，對於表，hidden 用於解決邊框衝突。 |
| dotted | 定義點狀邊框。在大多數瀏覽器中呈現為實線。 |
| dashed | 定義虛線。在大多數瀏覽器中呈現為實線。 |
| solid | 定義實線。 |
| double | 定義雙線。雙線的寬度等於 border-width 的值。 |
| groove | 定義 3D 凹槽邊框。其效果取決於 border-color 的值。 |
| ridge | 定義 3D 壟狀邊框。其效果取決於 border-color 的值。 |
| inset | 定義 3D inset 邊框。其效果取決於 border-color 的值。 |
| outset | 定義 3D outset 邊框。其效果取決於 border-color 的值。 |
| inherit | 規定應該從父元素繼承邊框樣式。 |
效果如下：
border-color：邊框顏色 方法：顏色名、十六進位制等。
在設定邊框的過程中，一般將上面的三個屬性簡寫：
.border{
border:1px solid red;//設定類名為border的元素1px的紅色邊框
}
padding：內邊距/填充：位於元素與元素內容之間。它也是有四個方位的分寫，跟上面一樣這裡就不提了。
content：元素的內容 這些內容一般為文字
關於邊距的簡寫：
margin:10px:表示上、下、左、右四個方向的值為10px
margin:10px 20px：表示的上、下的值為10px 左、右的值為20px
margin:10px 20px 30px：表示上的為10px 左和右的值為10px 下的值為30px
margin:10px 20px 30px 40px：分別代表上、右、下、左的四個值（順時針方向）
其他的邊框和填充同理。
盒模型的應用
盒模型在頁面中的應用也是非常多的，比如計算一個帶有外邊距、邊框、填充的盒子的大小。給出下面的程式碼：
div {
width: 200px;
height: 200px;
margin: 10px;
padding: 5px;
border: 2px solid red;
}
原理的原始大小為200*200 這時加了外邊距（元素與元素的距離），該值不影響盒子的大小，只會改變元素與元素之間的距離。padding值為5px，表示四個方向的，因此需要加上兩邊（左右）的。就是10px，邊框也是同理，加上左右兩邊的，即為4px，因此元素最終的大小為：
200+10+10+2+2=214
CSS3中的box-sizing屬性
這是你應該會有疑問，既然在設計樣式的時候，我們需要手動計算盒子的實際大小，這樣簡直不要太麻煩，在CSS3中就新增了一個可以自動計算出盒子大小的屬性，即box-sizing。首先，box-sizing屬性在FireFox中存在相容問題，所以需要使用-moz-box-sizing做一下相容。關於瀏覽器的相容問題放在另外一篇部落格中單獨說明。
它的值有以下兩個：border-box content-box
border-box： 指定寬度和高度（最小/最大屬性）確定元素邊框。也就是說，對元素指定寬度和高度包括了 padding 和 border 。通過從已設定的寬度和高度分別減去邊框和內邊距才能得到內容的寬度和高度。根據這句話就可以得出結論：CSS設定的元素的大小會被剪掉自身的padding值和border值。
content-box： 這是 CSS2.1 指定的寬度和高度的行為。指定元素的寬度和高度（最小/最大屬性）適用於box的寬度和高度。元素的填充和邊框佈局和繪製指定寬度和高度除外。可以得出CSS指定的就是固定的值，不會改變。預設值。
綜上，預設盒子設定了padding、border以後，就會自動變大，這時就會影響頁面的整體佈局，而當使用了box-sizing：border以後，盒子在加了padding、border以後，盒子自身的大小不會發生改變。
當box-sizing為預設值時，下面這樣的；
當把padding值改變時，它（元素）的大小也會隨之改變：
而當設定了box-sizing：border-box時，效果就變為下面的：
元素大小不會發生改變，因此使用該屬性會被頁面的佈局友好很多，就不必擔心我們除錯的時候，元素的大小發生改變。
margin疊加問題
看一下下面的程式碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style type="text/css">
div {
width: 200px;
height: 200px;
background: red;
margin-bottom: 10px;
}
section {
width: 200px;
height: 200px;
background-color: green;
margin-top: 10px;
}
</style>
</head>
<body>
<div id="">
</div>
<section>
</section>
</body>
</html>
兩個不同的盒子，第一個盒子加了10px的下邊距，第二個盒子在第一個盒子的下面，同時加了10px的上邊距，按理說他們的上下間距應該為20px，但是，還是10px，因為上下邊距重疊了：
這個屬於外邊距的重疊問題，當然也只能作用在上下邊距上。左右外邊距不會出現這樣的問題。
margin傳遞問題
這樣的問題出現在巢狀元素當中，看下面的程式碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style type="text/css">
div {
width: 400px;
height: 400px;
background:blue;
margin-top: 100px;
}
section {
width: 200px;
height: 200px;
background-color: green;
}
</style>
</head>
<body>
<div id="">
<section>
</section>
</div>
</body>
</html>
為了讓綠色（子元素）盒子在藍色（父元素）盒子裡面移動，這時子元素設定的margin-top會影響到父元素：
解決的方法：
1、給父元素新增邊框：
2、給父元素新增overflow屬性，同樣能達到以上的效果