盒模型
盒模型的特點：
每個盒子都有：邊界、邊框、填充、內(nèi)容四個屬性；
每個屬性都包括四個部分：上、右、下、左；這四部分可同時設(shè)置，也可分別設(shè)置。
盒模型屬性
- 盒子的內(nèi)容
常用屬性
* overflow:visible（可見不裁剪）/hidden（隱藏）/scroll（滾動：滾動條占據(jù)盒子內(nèi)容的寬高）/auto（如果內(nèi)容需被裁剪，則瀏覽器以滾動條顯示其余內(nèi)容）;
* text-overflow:clip(裁剪)/ellipsis（省略）;
單行文本溢出省略：
text-overflow:ellipsis;
white-space:nowrap;
overflow:hidden;
多行文本溢出省略：
overflow:hidden;
text-overflow:ellipsis;
display:-webkit-box;
-webkit-line-clamp:顯示的行數(shù)；
-webkit-box-orient:vertical;
- padding
四個值：上右下左
三個值：上（左右）下
兩個值：(上下）(左右)
一個值：（上下左右）
注釋：不允許使用負值。 - border
值的個數(shù)排序同padding常用屬性
* border-style:solid(實線)/dashed（虛線）/dotted（點線）/double（雙線）/none（無線型）;
* border-width
* border-color
* border-top/border-right/border-bottom/border-left
* border:1px solid red;(簡寫屬性：border-width;border-style；border-color；） - margin
值的個數(shù)排序同padding
注釋：允許使用負值。
塊級元素的垂直相鄰?fù)膺吘鄷喜ⅲㄕl大取誰值），而行內(nèi)元素實際上不占上下外邊距。行內(nèi)元素的的左右外邊距不會合并。同樣地，浮動元素的外邊距也不會合并。
標準盒模型
W3C 盒子模型的范圍包括 margin、border、padding、content，并且 content 部分不包含其他部分
盒子的實際占位寬度=(margin-left)+(border-left)+(padding-left)+content+(padding-right)+(border-right)+(margin-right);
盒子的實際寬度=(border-left)+(padding-left)+content+(padding-right)+(border-right);
怪異盒模型
IE 盒子模型的范圍也包括 margin、border、padding、content，和標準 W3C 盒子模型不同的是：IE 盒子模型的 content 部分包含了 border 和 padding
盒子的實際占位寬度=(margin-left)+content+(margin-right);
盒子的實際寬度=contentWidth;
標準盒模型和怪異盒模型舉例計算
例：一個盒子的 margin 為 20px，border 為 1px，padding 為 10px，content 的寬為 200px、高為 50px，如果用標準 W3C 盒子模型解釋，那么這個盒子需要占據(jù)的位置為：寬 20 * 2+1 * 2+10 * 2+200=262px、高 20 * 2+1 * 2+10 * 2+50=112px，盒子的實際大小為：寬 1 * 2+10 * 2+200=222px、高 1 * 2+10 * 2+50=72px；如果用IE 盒子模型，那么這個盒子需要占據(jù)的位置為：寬 20 * 2+200=240px、高 20 * 2+50=70px，盒子的實際大小為：寬 200px、高 50px。
為了解決瀏覽器的兼容性
一般都會選擇標準盒模型，前提是在網(wǎng)頁的頂部加上 DOCTYPE 聲明
盒模型的轉(zhuǎn)換方式
box-sizing:
1）content-box寬度和高度分別應(yīng)用到元素的內(nèi)容框。在寬度和高度之外繪制元素的內(nèi)邊距和邊框。
2）border-box為元素指定的任何內(nèi)邊距和邊框都將在已設(shè)定的寬度和高度內(nèi)進行繪制。通過從已設(shè)定的寬度和高度分別減去邊框和內(nèi)邊距才能得到內(nèi)容的寬度和高度。
3）inherit規(guī)定應(yīng)從父元素繼承 box-sizing 屬性的值。
注意處理瀏覽器兼容性
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
DIV+CSS兩種盒子模型
DIV+CSS兩種盒子模型（W3C盒子與IE盒子）
