CSS Display屬性與盒模型
由Harttle發表在天碼營
因為HTML流式文件的特性，頁面佈局往往是新手最為頭疼的問題之一。 每個HTML元素都會渲染為一個Box，可分為inline Box和block Box。 根據display屬性的不同，Box的呈現方式又有所不同。 本文首先引入CSS盒模型，然後透過不同的display屬性分別介紹Box常見的呈現方式。
Box Sizing：元素大小的計算方式
在HTML中，任何HTML元素都會被呈現為一個矩形。該矩形由內容、內邊距、邊框、外邊距構成。舉個例子：
上述的
黃色的背景作用於內容和內邊距構成的矩形，其寬高為160px：寬度100px+兩側的內邊距30pxX2；
綠色部分為邊框，寬度為50px；
與瀏覽器邊框的距離為外邊距，寬度為50px。
例子中width屬性定義的是內容的寬度，不包含邊距、邊框。然而在IE中width定義的是內容+內邊距+邊框的寬度。 這是由box-sizing屬性來定義的，前者的預設值為content-box‘，後者的預設值為border-box`。
Display：渲染型別
瞭解了box-sizing之後，我們回到display屬性。display指定了元素渲染Box的型別（type of rendering box）。我們來看它常用的取值：
none： 隱藏元素；
inline：行內元素，顧名思義，用於把一個元素放在行的內部；
block：塊元素，用於顯示佔用一行的塊；
inline-block：以block的方式渲染，以inline的方式放置；
table-cell：以表格元素的方式顯示。
隱藏元素
none是最容易理解的取值。當一個元素的displayCSS屬性被設為none時，該元素不會被渲染，也不會佔位，就像不存在一樣。對佈局不會產生任何影響。
行內元素
行內（inline）元素不會打斷文字流，預設（UA）顯示為inline的元素包括：，，等。它們的出現不會使得後續元素另起一行。行內元素可以設定margin與padding，但margin只在水平方向上起作用：
div{
display： inline；
background： red；
padding： 10px；
margin： 10px；
}
上圖中，紅色背景的是一個
另外，對inline元素設定width與height是不起作用的。
塊元素
塊（block）元素會中斷當前的文字流，另起一行，並在父元素中儘可能地佔據最大寬度。常見的塊元素有
，
標籤，不論內容是否足夠，都會佔據整個body的寬：
行內塊
行內塊（inline-block）將會產生一個塊元素，並以行內元素的方式放置。什麼意思呢？該元素的樣式是以塊元素的方式來渲染的，例如可以設定寬和高，然後以行內元素的方式放置在其上下文中，就像在行內元素的位置上替換成這個塊元素一樣。
MDN：The element generates a block element box that will be flowed with surrounding content as if it were a single inline box。
同樣地，我們在一行文字內加入一個
div{
display： inline-block；
background： yellow；
padding： 10px；
margin： 10px；
height： 20px；
}
此時，垂直方向的margin和height都起作用了：
藍色部分為內容，可以看到其高度為20px；
綠色部分為10px的padding；
接著，border為空；
紅色為10px的margin。
inline-block與inline的不同在於：垂直方向上的margin也會起作用，並且可以設定width和height。inline-block是非常常用的樣式設定。
表格元素
display設為table-cell的元素與
IE6/7不支援table-cell，然而WinXP已經下架。Win7的標配是IE8。現在可以放心地使用table-cell了！
利用table-cell屬性可以在不寫
