1. 元素框與框（盒）模型屬性：

• 無論什么元素，都會(huì)生成一個(gè)矩形框來顯示內(nèi)容，為“元素框”

• 元素框的中心區(qū)域是內(nèi)容框

• 內(nèi)邊距，邊框，外邊距都是可選的，因?yàn)樗麄兊膶挾仍试S為0

1.1 元素框（分四部分）

• （1）內(nèi)容區(qū)（content）：必須要有

• （2）內(nèi)邊距（padding）：內(nèi)容與邊框的填充區(qū)域

• （3）邊框（border）：可以將內(nèi)容區(qū)與外界進(jìn)行隔離

• （4）外邊距（margin）：多個(gè)盒子之間的間隙

  注：

• （1）padding,margin,border的每一條邊都可以單獨(dú)設(shè)置屬性

• （2）pading和margin是背景透明的所以只能設(shè)置寬度，不能設(shè)置顏色與樣式

1.2 內(nèi)邊距

• （1）常規(guī)屬性

• （2）屬性簡(jiǎn)寫

1.3 外邊距

• （1）常規(guī)屬性

• （2）屬性簡(jiǎn)寫

1.4 邊框

• border可以設(shè)置寬度，也可以設(shè)置樣式和顏色

注：

• （1）輪廓outline: 位于 border 與 margin 之間,因?yàn)椴徽伎臻g, 可暫時(shí)忽略

• （2）外邊距始終是透明的,可能透過它看到父元素

• （3）輪廓沒有針對(duì)各條邊的屬性,只能統(tǒng)一設(shè)置

2. 調(diào)整元素框的大小

2.1  display屬性

• （1）display: 屬性, 默認(rèn)值inline,適用所有元素, 不能繼承

• （2）display 改變的是顯示方式, 并不能改變?cè)氐谋举|(zhì)

• （3）例如,塊級(jí)元素不允許做為行內(nèi)元素后代, 并不會(huì)因?yàn)樗@示為行內(nèi)塊而改變

2.2 塊級(jí)框

• （1）塊級(jí)框?qū)挾?/strong>,其實(shí)就是內(nèi)容區(qū)寬度,由左內(nèi)邊界到右內(nèi)邊界的距離, 高度也一樣

• （2）元素內(nèi)容寬度可以用box-sizing進(jìn)行調(diào)整,默認(rèn)為內(nèi)容寬度(content-box)

2.3 box-sizing屬性

• （1）box-sizing: 指示瀏覽器如何計(jì)算一個(gè)元素的總寬度和總高度

• （2）盒模型中,元素的width/height默認(rèn)只會(huì)應(yīng)用到”內(nèi)容區(qū)”

• （3）當(dāng)盒子中存在padding/border時(shí),計(jì)算盒子總大小非常麻煩

注：

• （1）width 總寬度是不變的, 寬度計(jì)算邊界在邊框上,所以 width=broder+padding+content

• （2）box-sizing: 適用于所有能設(shè)置 width 和 height 的所有元素

• （3）box-sizing: 通常只適用于塊級(jí), 也適合置換元素和行內(nèi)塊元素(因?yàn)槎伎梢栽O(shè)置寬高)

3. 橫向格式化（共7個(gè)屬性）

注：

• 這七個(gè)屬性中，只有內(nèi)容區(qū)和左右外邊距允許auto，其他的，要么0，要么具體值

  例：

  

  5. 縱向格式化（共七個(gè)屬性）

1. <style>

2. div:first-of-type {

3.      background-color: lightgreen;

4.      margin-left: auto;

5.      margin-left: 10px;

6.    }

7.    </style>

例：

<style> div:first-of-type {        background-color: lightgreen;        margin-bottom: auto;        margin-bottom: 10px;      }      </style>

5.1 縱向外邊距二大特征

上下外邊距的auto會(huì)被解析為0

• （1）橫向格式化時(shí), 左右外邊距值為auto時(shí), 由瀏覽器根據(jù)父元素空間自動(dòng)計(jì)算

• （2）縱向格式化時(shí), 上下外邊距值為auto時(shí), 瀏覽器會(huì)將它強(qiáng)制設(shè)置為0

• （3）這也是塊元素?zé)o法直接設(shè)置”垂直居中”的原因(水平居中可以輕易實(shí)現(xiàn))

縱向外邊距會(huì)出現(xiàn)折疊現(xiàn)象

• （1）當(dāng)多個(gè)元素框垂直方向排列時(shí), 會(huì)出現(xiàn)縱向外邊距折疊現(xiàn)象

• （2）此時(shí), 二個(gè)元素框的上下外邊距為 PK, 最終大者勝出

總結(jié)：

（1）元素框是由內(nèi)容區(qū)（content）,內(nèi)邊距（padding）,外框（border），外邊距（margin）組成的

（2）邊框和邊距都是由上下左右組成

（3）寫屬性時(shí)要注意值得數(shù)量：

當(dāng)四個(gè)值的時(shí)候是上->右->下->左

當(dāng)三個(gè)值的時(shí)候是上->左右->下

當(dāng)兩個(gè)值的時(shí)候是上下->左右

當(dāng)一個(gè)值的時(shí)候是上下左右全部

（4）調(diào)整元素框的大小時(shí)用display屬性

（5）格式化時(shí)只有內(nèi)容區(qū)和上下左右外邊距允許設(shè)置auto