css中display:inline，display:block;display:inline-block; 區別

display:inline; 內聯元素，簡單來說就是在同一行顯示。
display:block; 塊級元素，簡單來說就是就是有換行，會換到第二行。
display:inline-block; 就是在同一行內的塊級元素。

說概念太模糊，來個真實案例吧。

<a href="#" style="display:inline;width:100px;height:100px;background:#ccc;">鏈接一</a><a href="#" style="display:inline;width:100px;height:100px;background:#ccc;">鏈接一</a>

A默認就是一行，所以inline用在這裏是廢的。寬高度設置也是費的。

<a href="#" style="display:block;width:100px;height:100px;background:#ccc;">鏈接一</a><a href="#" style="display:block;width:100px;height:100px;background:#ccc;">鏈接一</a>

塊狀，這裏高寬度就生效了，但是因爲是塊狀，前後有換行符，所以這是兩行了。

<a href="#" style="display:inline-block;width:100px;height:100px;background:#ccc;">鏈接一</a><a href="#" style="display:inline-block;width:100px;height:100px;background:#ccc;">鏈接一</a>

這樣就是同時達到塊狀，而且在同一行顯示。