一、display屬性值總結(jié)。
1、display：block
? ? ? block元素會獨(dú)占一行。默認(rèn)情況下，block元素寬度自動填滿其父元素寬度。
? ? ? block元素可以設(shè)置width,height屬性。塊級元素即使設(shè)置了寬度,仍然是獨(dú)占一行。
? ? ? 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元素不會獨(dú)占一行，多個(gè)相鄰的行內(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元素不會獨(dú)占一行，可以設(shè)置width、height、margin、padding屬性。
? ? ? 既具有block的 寬度高度特性又具有inline的同行特性。
? ? ? <input>(大多數(shù)瀏覽器可以設(shè)置input元素的寬高)<select><textarea><img><object>(向 HTML 代 ? ? ? 碼添加一個(gè)對象)
4、display:table、table-row、table-cell。
? ? ?在瀏覽器中，可以看到<table><tr><td>元素的display值分別是table、table-row、table-cell
5、display:list-item
? ? ?此元素會作為列表項(xiàng)（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ù)的大小和元素大小（元素實(shí)際大?。?。
W3C標(biāo)準(zhǔn)盒模型下：
? ? ? ?元素寬度是指width，高度指height。
? ? ? 占據(jù)的大小是需要計(jì)算的。占據(jù)的寬度即：margin-left+margin-right+padding-left+padding- ? ? ? ? ? ? right+border-left+border-right+width，占據(jù)的高度同理。
? ? ? 而實(shí)際大小指的是瀏覽器呈現(xiàn)時(shí)顯示的寬度和高度。具體請看下圖（Chrome中也有）。可以看 ? ? ? 出實(shí)際的寬度為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ù)的高度同理。
? ? 盒子的實(shí)際大?。壕褪莣idth和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)頁就能在各個(gè)瀏覽器中顯示一致了。
所以在網(wǎng)頁的頂部加上 doctype 聲明，就是選擇了W3C標(biāo)準(zhǔn)盒模型。
注意一下，設(shè)置border時(shí)如果只設(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ù)實(shí)踐發(fā)現(xiàn)，并沒有padding-box和margin-box。
content-box：padding和border不被包含在定義的width和height之內(nèi)。對象的實(shí)際寬度等于設(shè)置的width值和border、padding之和，即 ( Element width = width + border + padding )。此屬性表現(xiàn)為標(biāo)準(zhǔn)模式下的盒模型。
border-box：padding和border被包含在定義的width和height之內(nèi)。對象的實(shí)際寬度就等于設(shè)置的width值，即使定義有border和padding也不會改變對象的實(shí)際寬度（而是會改變內(nèi)容content的寬度），即 ( Element width = width )。此屬性表現(xiàn)為IE盒子模型。
