由於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 class="box-demo"></div>

上述的<div>中，內容、邊距與邊框例如以下圖所看到的：

• 黃色的背景作用於內容和內邊距構成的矩形，其寬高為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

行內元素

行內（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 class="left">This is left cell</div>
  <div class="right">This is right cell</div>
</div>

左側固定150px寬度，右側自適應：

除非註明，本博客文章均為原創。轉載請以鏈接形式標明本文地址： http://harttle.com/2015/05/28/css-display.html

CSS Display屬性與盒模型