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