一陌粹、display屬性值總結(jié)避乏。
1、display：block
? ? ? block元素會獨占一行资柔。默認(rèn)情況下焙贷，block元素寬度自動填滿其父元素寬度。
? ? ? block元素可以設(shè)置width,height屬性贿堰。塊級元素即使設(shè)置了寬度,仍然是獨占一行辙芍。
? ? ? block元素可以設(shè)置margin和padding屬性。
? ? ? <dl><dt><dd><blockquote><p><div><ul><li><ol><h1><section><header><footer><aside> ? ? ? ? ? ? <address><pre>(pre 元素可定義預(yù)格式化的文本。被包圍在 pre 元素中的文本通常會保留空格 ? ? ? ? 和換行符)<form><fieldset><legend>(fieldset 元素可將表單內(nèi)的相關(guān)元素分組,legend 元素為 ? ? ? ? ? ? fieldset 元素定義標(biāo)題故硅。)<option>
2庶灿、display:inline
? ? ? inline元素不會獨占一行，多個相鄰的行內(nèi)元素會排列在同一行里吃衅，其寬度隨元素的內(nèi)容而變 ? ? ? ? ? ? 化往踢。
? ? ? inline元素設(shè)置width,height屬性無效。
? ? ? inline元素的margin和padding屬性徘层，水平方向的padding-left, padding-right, margin-left, margin- ? ? ? right都產(chǎn)生邊距效果峻呕；但豎直方向的padding-top, padding-bottom, margin-top, margin-bottom不 ? ? ? 會產(chǎn)生邊距效果。
? ? ? <time><span><a><em><b>(粗體bold)<quote><strong><q>(短引用)<code>(表示源碼)
3趣效、display:inline-block
? ? ? inline-block元素不會獨占一行瘦癌，可以設(shè)置width、height跷敬、margin讯私、padding屬性。
? ? ? 既具有block的 寬度高度特性又具有inline的同行特性西傀。
? ? ? <input>(大多數(shù)瀏覽器可以設(shè)置input元素的寬高)<select><textarea><img><object>(向 HTML 代 ? ? ? 碼添加一個對象)
4斤寇、display:table、table-row拥褂、table-cell娘锁。
? ? ?在瀏覽器中，可以看到<table><tr><td>元素的display值分別是table肿仑、table-row致盟、table-cell
5、display:list-item
? ? ?此元素會作為列表項（li）顯示尤慰。
6馏锡、display:run-in
? ? ? 此元素會根據(jù)上下文作為塊級元素或內(nèi)聯(lián)元素顯示。
二伟端、盒子模型
1杯道、W3C標(biāo)準(zhǔn)盒子模型
標(biāo)準(zhǔn) w3c 盒子模型的范圍包括 margin、border责蝠、padding党巾、content，并且 content 部分不包含其他部分霜医。?
2齿拂、IE盒子模型
ie 盒子模型的 content 部分包含了 border 和 padding。
注意區(qū)分元素寬高(元素內(nèi)容寬高)肴敛、元素占據(jù)的大小和元素大惺鸷！（元素實際大新鸸骸）。
W3C標(biāo)準(zhǔn)盒模型下：
? ? ? ?元素寬度是指width砸狞，高度指height捻勉。
? ? ? 占據(jù)的大小是需要計算的。占據(jù)的寬度即：margin-left+margin-right+padding-left+padding- ? ? ? ? ? ? right+border-left+border-right+width刀森，占據(jù)的高度同理踱启。
? ? ? 而實際大小指的是瀏覽器呈現(xiàn)時顯示的寬度和高度。具體請看下圖（Chrome中也有）研底〔撼ィ可以看 ? ? ? 出實際的寬度為padding-left+padding-right+border-left+border-right+width。
IE盒模型：
? ? 元素內(nèi)容寬度不是指width飘哨。width包括了內(nèi)容寬度和padding胚想、border。
? ? 占據(jù)的寬度芽隆，即margin-left+margin-right+width，占據(jù)的高度同理统屈。
? ? 盒子的實際大信哂酢：就是width和height值。
現(xiàn)在IE瀏覽器也開始采用W3C標(biāo)準(zhǔn)盒模型了愁憔。如果在老的IE瀏覽器中腕扶，不加 doctype 聲明，IE瀏覽器會采用 IE盒子模型去呈現(xiàn)盒子吨掌，而其他瀏覽器會采用W3C盒子模型呈現(xiàn)半抱。如果加上了 doctype 聲明，那么所有瀏覽器都會采用標(biāo)準(zhǔn)W3C 盒子模型呈現(xiàn)盒子膜宋，網(wǎng)頁就能在各個瀏覽器中顯示一致了窿侈。
所以在網(wǎng)頁的頂部加上 doctype 聲明，就是選擇了W3C標(biāo)準(zhǔn)盒模型秋茫。
注意一下史简，設(shè)置border時如果只設(shè)置border的寬度，是無效的肛著。應(yīng)該加上border的樣式和顏色圆兵，一定要有樣式。只設(shè)置border的顏色和寬度是沒用的枢贿，只設(shè)置border的樣式和寬度就可以顯示border殉农。若只設(shè)置了樣式，則顯示border默認(rèn)的寬度和默認(rèn)的顏色（黑色）局荚。即一定要設(shè)置border的樣式超凳。
3、CSS3 box-sizing屬性
CSS3中的box-sizing屬性可以改變盒模型在瀏覽器中呈現(xiàn)的大小。
屬性值有content-box(default)聪建、border-box钙畔、inherit（規(guī)定應(yīng)從父元素繼承 box-sizing 屬性的值）。根據(jù)實踐發(fā)現(xiàn)金麸，并沒有padding-box和margin-box擎析。
content-box：padding和border不被包含在定義的width和height之內(nèi)。對象的實際寬度等于設(shè)置的width值和border挥下、padding之和揍魂，即 ( Element width = width + border + padding )。此屬性表現(xiàn)為標(biāo)準(zhǔn)模式下的盒模型棚瘟。
border-box：padding和border被包含在定義的width和height之內(nèi)现斋。對象的實際寬度就等于設(shè)置的width值，即使定義有border和padding也不會改變對象的實際寬度（而是會改變內(nèi)容content的寬度）偎蘸，即 ( Element width = width )庄蹋。此屬性表現(xiàn)為IE盒子模型。
