css盒模型是網頁布局中的基石，就好比大盒套小盒，環環相扣，缺一不可。那接下來就簡單的介紹一下盒模型。come on,逆戰來也！！！
1. 盒模型的結構
從裡到外包括：content（內容）-----------------手機
padding（內填充 補白）----泡沫
border（邊框） -----------------包裝盒
margin（外邊距）---------------盒子與外部的距離
有圖有真相，如圖：
2．padding的用法：
1）padding是長在內容和盒子之間的，在盒子內部，上圖黃色區域。
2）padding是為了調整 子元素 在 父元素裡面的位置關係。
3）padding的特點：padding值會把盒子撐大。（比如說泡沫多了，會把包裝盒擠大）
4）如果想讓盒子保持原有大小，需要在寬高的基礎上減掉padding值。（放個小手機）
5）給單一方向設定padding值：
padding-left/right/top/bottom:;
6）padding的設定方法：
padding:1個值 四周
padding:2個值 上下 左右
padding:3個值 上 左右 下
padding:4個值 上 右 下 左
7: padding不能設定負值
8: padding不會對背景圖造成影響。
9：如果乙個盒子沒有設定固定的寬和高，新增padding是不用減的。（手機外沒有包裝盒，放再多泡沫都不用換小手機）
3. margin的用法
1) margin是長在元素之外的。（上圖淡青色區域）
2) margin控制的是 同級元素 之間的位置關係。
3) margin不會對盒子本身的寬高造成影響。
4) 給單一方向新增margin值
margin-left/right/bottom/top:;
5) margin的設定方法：
margin:1個值 四周
margin:2個值 上下 左右
margin:3個值 上 左右 下
margin:4個值 上 右 下 左
6) margin可以設定負值。
7) margin常出現的bug:
a：當父元素和第乙個子元素都沒有設定浮動的情況下，如果給第乙個子元素新增margin-top 會錯誤的把margin-top加在父元素上面。
b: 上下相鄰兩個元素之間的margin值，不會疊加，按照最大值去設定。
8) margin:0 auto; 讓當前元素在父元素裡面左右居中。
4. 盒子在網頁中真正所佔據的空間
**顯示：
效果圖：
CSS盒子模型簡介
1.基本概念 首先，什麼是盒子模型呢？所有的html元素都可以看作是盒子，顧名思義，就像是對元素進行了乙個包裝，豐富了元素的內容，方便了設計與布局。盒子模型 box model 具體包括了外邊距 margin 邊框 border 內邊距 padding 和內容 content 下面以具體的例項來說明...
CSS 盒子模型（標準盒模型和怪異盒模型）
所謂盒子模型 box model 就是把 html 頁面中的元素看作是乙個矩形的盒子，也就是乙個盛裝內容的容器。每個矩形都由元素的內容 content 內邊距 padding 邊框 border 和外邊距 margin 組成。所有的文件元素 標籤 都會生成乙個矩形框，我們稱為元素框 element ...
CSS 3 盒子模型
盒子模型解釋 元素在頁面中顯示成乙個方塊，類似乙個盒子，css盒子模型就是使用現實中盒子來做比喻，幫助我們設定元素對應的樣式。盒子模型示意圖如下 把元素叫做盒子，設定對應的樣式分別為 盒子的寬度 width 盒子的高度 height 盒子的邊框 border 盒子內的內容和邊框之間的間距 paddi...