盒模型
盒模型的特點(diǎn)：
每個(gè)盒子都有：邊界尚卫、邊框归榕、填充、內(nèi)容四個(gè)屬性焕毫；
每個(gè)屬性都包括四個(gè)部分：上蹲坷、右驶乾、下邑飒、左循签；這四部分可同時(shí)設(shè)置，也可分別設(shè)置疙咸。
盒模型屬性
- 盒子的內(nèi)容
常用屬性
* overflow:visible（可見(jiàn)不裁剪）/hidden（隱藏）/scroll（滾動(dòng)：滾動(dòng)條占據(jù)盒子內(nèi)容的寬高）/auto（如果內(nèi)容需被裁剪县匠，則瀏覽器以滾動(dòng)條顯示其余內(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
四個(gè)值：上右下左
三個(gè)值：上（左右）下
兩個(gè)值：(上下）(左右)
一個(gè)值：（上下左右）
注釋?zhuān)?strong>不允許使用負(fù)值撒轮。 - border
值的個(gè)數(shù)排序同padding常用屬性
* border-style:solid(實(shí)線)/dashed（虛線）/dotted（點(diǎn)線）/double（雙線）/none（無(wú)線型）;
* border-width
* border-color
* border-top/border-right/border-bottom/border-left
* border:1px solid red;(簡(jiǎn)寫(xiě)屬性：border-width;border-style乞旦；border-color；） - margin
值的個(gè)數(shù)排序同padding
注釋?zhuān)?strong>允許使用負(fù)值题山。
塊級(jí)元素的垂直相鄰?fù)膺吘鄷?huì)合并（誰(shuí)大取誰(shuí)值）兰粉，而行內(nèi)元素實(shí)際上不占上下外邊距。行內(nèi)元素的的左右外邊距不會(huì)合并顶瞳。同樣地玖姑，浮動(dòng)元素的外邊距也不會(huì)合并。
標(biāo)準(zhǔn)盒模型
W3C 盒子模型的范圍包括 margin慨菱、border焰络、padding、content符喝，并且 content 部分不包含其他部分
盒子的實(shí)際占位寬度=(margin-left)+(border-left)+(padding-left)+content+(padding-right)+(border-right)+(margin-right);
盒子的實(shí)際寬度=(border-left)+(padding-left)+content+(padding-right)+(border-right);
怪異盒模型
IE 盒子模型的范圍也包括 margin闪彼、border、padding协饲、content畏腕，和標(biāo)準(zhǔn) W3C 盒子模型不同的是：IE 盒子模型的 content 部分包含了 border 和 padding
盒子的實(shí)際占位寬度=(margin-left)+content+(margin-right);
盒子的實(shí)際寬度=contentWidth;
標(biāo)準(zhǔn)盒模型和怪異盒模型舉例計(jì)算
例：一個(gè)盒子的 margin 為 20px，border 為 1px茉稠，padding 為 10px郊尝，content 的寬為 200px县踢、高為 50px浪漠，如果用標(biāo)準(zhǔn) W3C 盒子模型解釋?zhuān)敲催@個(gè)盒子需要占據(jù)的位置為：寬 20 * 2+1 * 2+10 * 2+200=262px期丰、高 20 * 2+1 * 2+10 * 2+50=112px怎虫，盒子的實(shí)際大小為：寬 1 * 2+10 * 2+200=222px库菲、高 1 * 2+10 * 2+50=72px羽嫡；如果用IE 盒子模型进鸠，那么這個(gè)盒子需要占據(jù)的位置為：寬 20 * 2+200=240px绽快、高 20 * 2+50=70px各拷，盒子的實(shí)際大小為：寬 200px刁绒、高 50px。
為了解決瀏覽器的兼容性
一般都會(huì)選擇標(biāo)準(zhǔn)盒模型烤黍，前提是在網(wǎng)頁(yè)的頂部加上 DOCTYPE 聲明
盒模型的轉(zhuǎn)換方式
box-sizing:
1）content-box寬度和高度分別應(yīng)用到元素的內(nèi)容框知市。在寬度和高度之外繪制元素的內(nèi)邊距和邊框傻盟。
2）border-box為元素指定的任何內(nèi)邊距和邊框都將在已設(shè)定的寬度和高度內(nèi)進(jìn)行繪制。通過(guò)從已設(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盒子）
