點擊上面「天碼營」，加入我們，快速成長~
「內容簡介」因為HTML流式文檔的特性，頁面布局往往是新手最為頭疼的問題之一。 本文首先引入CSS盒模型，然後通過不同的display屬性分別介紹Box常見的呈現方式。
因為HTML流式文檔的特性，頁面布局往往是新手最為頭疼的問題之一。 每個HTML元素都會渲染為一個Box，可分為inline Box和block Box。 根據display屬性的不同，Box的呈現方式又有所不同。 本文首先引入CSS盒模型，然後通過不同的display屬性分別介紹Box常見的呈現方式。
Box Sizing：元素大小的計算方式在HTML中，任何HTML元素都會被呈現為一個矩形。該矩形由內容、內邊距、邊框、外邊距構成。舉個例子：
<style>.box-demo{ width: 100px; height: 100px; border: 50px solid green; padding: 30px; margin: 50px; background: yellow;}</style><div></div>
上述的<div>中，內容、邊距與邊框如下圖所示：
例子中width屬性定義的是內容的寬度，不包含邊距、邊框。然而在IE中width定義的是內容+內邊距+邊框的寬度。 這是由box-sizing屬性來定義的，前者的默認值為content-box'，後者的默認值為border-box`。
Display：渲染類型了解了box-sizing之後，我們回到display屬性。display指定了元素渲染Box的類型（type of rendering box）。我們來看它常用的取值：
隱藏元素none是最容易理解的取值。當一個元素的displayCSS屬性被設為none時，該元素不會被渲染，也不會佔位，就像不存在一樣。對布局不會產生任何影響。
行內元素行內（inline）元素不會打斷文本流，默認（UA）顯示為inline的元素包括：<span>，<a>，<em>等。它們的出現不會使得後續元素另起一行。行內元素可以設置margin與padding，但margin只在水平方向上起作用：
div{ display: inline; background: red; padding: 10px; margin: 10px;}
上圖中，紅色背景的是一個<div>，其大小為內容大小+padding；左右的空隙即為外邊距margin。可以看到在Chrome中，這個inline的<div>遮擋了出現在它前面的文本，同時被出現在它後面的文本所遮擋。這正是流式文檔的特性。
另外，對inline元素設置width與height是不起作用的。
塊元素塊（block）元素會中斷當前的文本流，另起一行，並在父元素中儘可能地佔據最大寬度。常見的塊元素有<p>,<div>,<section>等。通常塊元素不可包含在行內元素內部。例如下面的兩個<p>標籤，不論內容是否足夠，都會佔據整個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：
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的元素與<td>標籤的行為一致，即：可設置padding，不接受margin，可伸縮的width。
IE6/7不支持table-cell，然而WinXP已經下架。Win7的標配是IE8。現在可以放心地使用table-cell了！
利用table-cell屬性可以在不寫<table>標籤的情況下完成表格布局：
<style>.left, .right{ display: table-cell; line-height: 50px;}.left{ background: yellow; min-width: 150px;}.right{ background: lightgreen; width: 100%;}</style><div> <div>This is left cell</div> <div>This is right cell</div></div>
左側固定150px寬度，右側自適應：
同時發表在：http://harttle.com/2015/05/28/css-display.html
了解更多Java Web開發內容：
三個月時間如何成為Java Web全棧工程師？