display屬性值block，inline和inline-block簡單介紹

本章節簡單介紹一下display三個重要的屬性值的主特點，需要的朋友可以做一下參考。

一.block屬性值:

當元素的display屬性值為block的時候，說明此元素為塊級元素，此種型別元素具有如下特點:

（1）.元素會獨佔一行，多個block元素會各自新起一行。預設情況下，元素寬度自動填滿其父元素寬度。

（2）.元素可以設定width,height屬性。

（3）.元素可以設定margin和padding屬性。

二.inline屬性值:

當元素的display屬性值為block的時候，說明此元素為內聯元素，此種型別元素具有如下特點:

（1）.元素不會獨佔一行，相鄰的行內元素會排列在同一行裡，直到排列不下，才會新換一行。

（2）.元素寬度隨元素的內容而變化。

（3）.元素設定width,height屬性無效。

（4）.元素的margin和padding屬性，水平方向的padding-left, padding-right, margin-left, margin-right都產生邊距效果；但豎直方向的padding-top, padding-bottom, margin-top, margin-bottom邊距效果會產生異常。

三.inline-block屬性值:

當元素的display屬性值為inline-block的時候，說明此元素為內聯塊級元素。

所謂內聯塊級元素，也就是兼具內聯元素和塊級元素的特點，主要特點如下:

（1）.能夠設定元素的width和height值。

（2）.預設情況下，寬度不會填充父元素的寬度。

（3）.能夠在同一行排列。

（4）.能夠設定內外邊距。