block、inline、inline-block對比

display:block

　　1.block元素會獨佔一行，多個block元素會各類新起一行。默認狀況下，block元素寬度自動填滿其父元素容器；

　　2.block元素能夠設置width和height屬性，塊級元素即便設置寬度仍是會獨佔一行；

　　3.block元素能夠設置margin和padding；

display:inline

　　1.inline元素不會獨佔一行，多個相鄰的行內元素會排在同一行裏，直到一行排列不下，纔會新起一行，起寬度隨元素內容而變化；

　　2.inline元素設置width和height無效；

　　3.inline元素的margin和padding屬性，水平方向的padding-left, padding-right, margin-left, margin-right都產生邊距效果；但豎直方向的padding-top, padding-bottom, margin-top, margin-bottom不會產生邊距效果；

display:inline-block

　　1.將對象呈現爲inline對象，可是對象的內容做爲block對象呈現，以後的內聯對象會被排列在同一行內。好比咱們給a標籤inline-block屬性值，使其既具備block的寬度高度特性又具備inline的同行特性；