很多在學習前端初級階段的小白對盒子模型的學習可謂是抓破了頭腦，今天跟著小t的步伐，梳理知識點，解決你的困擾！
盒模型是css布局的基石，它規定了網頁元素如何顯示以及元素間相互關係。css定義所有的元素都可以擁有像盒子一樣的外形和平面空間。
盒模型的組成：內容區、補白/填充、邊框、邊界/外邊距。
盒子平面圖
css盒子有：內容（content）、內邊距（padding）、邊框（border）、外邊距（margin）四個屬性；
1：內容(content)
2：內邊距(padding)
內邊距也叫內填充，可理解為填充泡沫，在content周邊填充泡沫（padding）使內容與盒子（border）之間產生間距，以保護內容。
padding有以下幾個特點：
< 1 >：padding是長在 內容 和 盒子之間的距離
< 2 >：padding是長在盒子裡面的。
< 3 >：padding的作用：主要控制子元素在盒子內部的位置關係。
< 4 >：padding是新增在父元素上面。
< 5 >: padding可以把盒子撐大！
如果想讓盒子保持原有的大小，需要在寬高的基礎上減掉padding !!
注：如果乙個盒子沒有固定大小（被內容撐開），新增padding 不用減。
-------------------- padding的用法-------------------
< 1 >：單一方向上設定padding值：
padding-left:
padding-right:
padding-top:
padding-bottom:
< 2 >:padding的設定方法：
padding:乙個值 四周都padding
padding:兩個值 上下 左右
padding:三個值 上 左右 下
padding:四個值 上右下左
< 3 >：padding不會對背景圖的位置造成影響。
< 4 >：padding不能為負值。
3：邊框(border)
border就是盒子本身。
按順序有以下屬性
border-width: 邊框大小
border-color: 邊框顏色
border-style: 邊框型別
複合式寫法 border:10px solid blue;
border-style: solid 實線
dashed 虛線
dotted 點狀線
double 雙線
none 沒有線條
單獨乙個方向設定邊框：
border-left:10px solid red;
border-right:10px solid red;
border-bottom:10px solid red;
border-top:10px solid red;
4：外邊距(margin)
為了 讓兩個盒子（同級的盒子）之間，產生一定距離。 盒子（border）的外圍產生間距。
margin有以下幾個特點：
<1>:margin 是長在盒子外圍的。
<2>：margin 控制當前元素 與 其他同級元素的位置關係。
<3>：margin不會改變盒子內部的大小。
-------------------- padding的用法-------------------
<1>：給元素的單一乙個方向設定margin值
margin-right:
margin-left:
margin-top:
margin-bottom:
<2>:margin設定方法（同padding）：
margin:乙個值 四周
margin:兩個值 上下 左右
margin:三個值 上 左右 下
margin:四個值 上右下左
<3>:margin是可以設定負值的！
注意：margin常出現的bug
a: 同級元素 上下 之間的margin的margin值，不會疊加，會重合，按照最大值設定。
b: 當父元素 和 第乙個子元素 都沒有浮動，給第乙個子元素新增margin-top: 會錯誤的把margin-top:新增在父元素上面
盒子的寬=width+2border+2margin+2padding
盒子的高=height+2border+2margin+2padding
小結在頁面布局時，使用盒子模型就看兩點，盒子撐大（填充）用padding，盒子與盒子之間的間距用margin。
盒子模型詳解
1.盒模型是css布局的基石 他規定了網頁元素如何顯示以及元素之間的相互關係 css定義所有的元素都可以擁有項盒子模型一樣的外形和平面空間 包括 邊框 border 外邊距 margin 內邊距 padding 內容區 content 盒模型的型別 1.標準模式 2.怪異模式 1.overflow ...
css盒子模型 CSS 盒子模型詳解（一）
在網頁布局中，一定離不開盒子模型這個東西。今天就來說一下這個概念。所謂盒子模型 box model 就是把 html 頁面中的元素看作是乙個矩形的盒子，也就是乙個盛裝內容的容器。或者說，每乙個可見的 html 元素都是乙個盒子。每個矩形都由元素的內容 content 內邊距 padding 邊框 b...
盒子模型與怪異盒子模型
所有html元素可以看作盒子，在css中，box model 這一術語是用來設計和布局時使用。css盒模型本質上是乙個盒子，封裝周圍的html元素，它包括 邊距，邊框，填充，和實際內容。盒模型允許我們在其它元素和周圍元素邊框之間的空間放置元素。下面的說明了盒子模型 box model content...