CSS基礎：block，inline和inline-block

css的display屬性是前端開發中很是常見的屬性，本文簡單介紹下其中比較經常使用的屬性值，即block、inline和inline-block。

HTML組件中呈現一片空白區域的組件均可當盒模型（box modal），而CSS則提供了display屬性來控制盒模型的外觀。

1. block類型（塊）

這種盒模型的組件默認佔據一行，容許經過CSS設置寬帶、高度。

例如：<div .../>、<p ../.> 、<form../>、<table../、<h1>到<h6>、<ul../>等。

display：block
block 元素會獨佔一行，多個block元素會各自新起一行。默認狀況下，block元素寬度會自動填滿其父元素的寬度。
block元素能夠設置width,height屬性。塊級元素及時設置了寬度，仍然是獨佔一行。
block元素能夠設置margin和padding屬性。

2. inline類型（內聯）

這種盒模型的組件不會佔據一行，不能夠調整寬度、高度。

例如：<span../>、<a../> <strong../>、<em../>、<label../>、<input../>、<select../>、<textarea../>、<img../>、<br../>。

CSS爲display屬性提供了block、inline兩個屬性值，能夠改變HTML組件默認的盒模型。

display：inline

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

inline元素設置width,height均無效。

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

3. inline-block類型

CSS還提供了一種inline-block盒模型，這種盒模型時inline模型和block模型的綜合體：inline-block盒模型的元素不會佔據一行，同時也支持width、height指定指定寬帶及高度。而且容許它的左邊和右邊出現其餘內容。

display:inline-block

簡單來講就是將對象呈現爲inline對象，可是對象的內容做爲block對象呈現。以後的內聯元素會被排列在同一行內。好比能夠給一個link（<a>元素)inline-block屬性，使其既有block的寬度高度特性、又具備inline的可同行性。

應用場合

不少時候咱們必須讓一些塊元素並排顯示，通常會想到浮動，可是塊元素浮動設邊距的時候在IE下會出現加倍的BUG，因此不少時候不得不把這個塊元素套在一個內聯元素裏，而後給這個內斂元素浮動和邊距。經過設置：display：inline-block，就將對象呈遞爲內聯對象，但對象的內容做爲塊對象呈遞。旁邊的內聯對象會被呈遞在同一行內，容許空格。

說明：

block元素能夠包含block元素和inline元素，但inline元素只能包含inline元素。要注意這個是一個大概的說法，每一個特定的元素能包含的元素也是特定的，因此具體到個別元素上，這條規律是不適用的。好比p元素，只能包含inline元素，而不能包含block元素。

通常來講，能夠經過display:inline和display：block的設置來改變元素的佈局級別。

兼容性問題：IE六、IE7不支持inline-block，因此在IE中對內聯元素使用display：inline-block理論上IE是不識別的，但會在IE下觸發layout，從而使內聯元素擁有了display：inline-block屬性的表象。

解決IE六、IE7兼容性的方法：

首先設置inline-block觸發塊元素，具備了layout的特性，而後設置display:inline使塊元素呈現內聯元素，此時layout的特性不會消失。

直接設置display：inline，使用zoom:1觸發layout。
兼容全部瀏覽器的方法是：

.selector {
        display : inline-block;
        *display : inine;
        *zoom:1;
        }

本文只列出了display常見的三個屬性，除此以外，display的屬性值還有：inline-table、和表格相關的盒模型、list-item、run-in等。