inline-block的使用

inline-block是什麼

　　inline和block是css中元素display屬性的兩個選項，而inline-block能夠說是介於二者之間的屬性值。

• inline使元素成爲內聯元素(inline elements)，而block則使之成爲塊級元素(block elements)。

• inline元素裏面只能放inline元素。 塊級元素的特色是獨佔一行，並能設置width和height屬性。

• 內聯元素不會獨佔行，且設置width和height屬性不產生效果。 padding和margin在水平方向的值有效，但在豎直方向無效。

inline-block會讓元素像內聯元素同樣不換行，但裏面的內容仍然是塊級的。

簡單的應用

• 好比對一些div元素設置成display:inline-block，這樣就能夠在一行裏放置多個div了，相比使用float的優勢是不會出現浮動到第二行的元素不會由於第一行有太高的div而致使浮動時被擋住（可是flex佈局出現後，通常對div再也不設置爲display:inline-block了。由於flex的響應式的特色使其更爲強大，bootstap也是採用flex佈局的）。

• 更有用的地方，好比對一個a元素進行設置，這樣就能夠對連接設置高度的同時保持不換行的特性了。