在body中的每一個html標簽實際上都被包圍在一個看不見的矩形中，這個矩形就叫做"盒"。
盒模式
首先介紹下HTML中標簽的分類
一、HTML的標簽分為兩種：塊標簽和內斂標簽
1、塊標簽：占據了容器的整個寬度，容器指的是 body 標簽，每個塊標簽所在的盒都盡可能的占據頁面的整個寬度，就是要占用瀏覽器一整行的位置。
塊標簽：包含p、div、ul、ol、li、h1~h6等；塊標簽獨自占據一行、自帶換行的效果；除了div以外，一般塊級標簽都會有內外邊距，寬度和高度。
2、內聯標簽：不會占據容器的一整行，它會和它周圍的內容在一起，在一行內自然的從左到右依次顯示，內容的多少決定了內聯標簽的寬度。
內聯標簽：包含 span，a，img，input，label等
瀏覽器怎么會知道盒子與盒子之間的距離應該是多少？就會用到盒模式
二、盒模式
盒模式是描述標簽的邊框和間距的一種方式
1、盒模式由4部分組成
1）內容區域 content area
內容區域中包含的是盒子中真正的內容（文本，圖片等）
2）補白或內邊距 padding
padding包圍在內容區域的邊緣，分為上，右，下，左四個區域
3）邊框 border
border包圍在padding的邊緣，也分為上，右，下，左四個區域
4）邊距 margin
margin包圍在border的上、右、下、左四個邊緣
盒子模型
2、如何設置盒模式的屬性？
1）每次設置padding屬性的一個值
h1 {
padding-top: 6px;
padding-right: 3px;
padding-bottom: 0;
padding-left: 0;
}
padding屬性
或者按照順時針方向一次性設置：上，右，下，左
h1 {
padding: 6px 3px 0 0;
}
padding屬性
2）設置三個關于border的屬性
h1 {
border-width: 6px;
border-style: solid;
border-color: #ffff00;
}
border屬性
或者使用簡寫的形式
h1 {
border: 6px solid #ffff00;
}
border屬性
也可以只設置其中一側的邊框
h1 {
border-bottom: 6px solid #ffff00;
}
border屬性
4）添加margin的方式和padding是一樣的，如：
h1 {
margin-top: 6px;
margin-right: 0;
margin-bottom: 6px;
margin-left: 0;
}
margin屬性
或者按順時針方向一次性設置
h1 {
margin: 6px 0 6px 0;
}
margin屬性
當上下和左右參數一致的時候，也可以這樣設置，如下：
h1 {
margin: 6px 0;
}
margin屬性
3、計算盒子的尺寸
在所有標簽中都有padding，border，margin一層層的包圍在內容區域的外面，四個部分被設置后，整個盒子的尺寸計算方法如下：
整個盒子的寬度=內容區域的寬度+左padding+右padding+左border+右border+左margin+右margin
整個盒子的高度=內容區域的高度+上padding+下padding+上border+下border+上margin+下margin
4、默認瀏覽器的樣式
當你沒有為網頁定義樣式的時候，瀏覽器會使用默認的樣式，把下面的這段代碼加入到你的css開始部分覆蓋瀏覽器的默認樣式，代碼包含我們前面介紹過的標簽，這樣我們就可以根據自己需求自由控制網頁了，這個過程稱之為CSS的初始化，在實際的項目中，初始化是必不可少的部分。
html, body, h1, h2, h3, p, ol, ul, li, a {
padding: 0;
border: 0;
margin: 0
}
設置默認瀏覽器樣式
總結：
- 每個標簽都填充在一個看不見的盒子中
- 塊標簽所在的盒會占據瀏覽器一整行的位置
- 使用padding可以設置邊框到內容區域的距離
- 使用margin可以設置邊框之外的距離
