作者:
WangMin
格言:努力做好自己喜歡的每一件事
網頁上的每個元素都是一個矩形框。CSS中的display屬性決定了矩形框的行為。display屬性是我們在前端開發中常常使用的一個屬性。
display的屬性值如下：
| 屬性值 | 含義 |
|---|---|
| block | 塊對象的默認值。用該值為對象之后添加新行 |
| none | 隱藏對象。與visibility屬性的hidden值不同，其不為被隱藏的對象保留其物理空間 |
| inline | 內聯對象的默認值。用該值將從對象中刪除行 |
| inline-block | 行內塊元素。這個屬性值融合了inline 和 block 的特性，即是它既是內聯元素，又可以設置width和height。 |
| inherit | 規定應該從父元素繼承 display 屬性的值。 |
| compact | 分配對象為塊對象或基於內容之上的內聯對象（已廢除） |
| marker | 指定內容在容器對象之前或之后。要使用此參數，對象必須和:after及:before 偽元素一起使用（已廢除） |
| inline-table | 將表格顯示為無前后換行的內聯對象或內聯容器 |
| list-item | 將塊對象指定為列表項目。並可以添加可選項目標志 |
| run-in | 分配對象為塊對象或基於內容之上的內聯對象 |
| table | 將對象作為塊元素級的表格顯示 |
| table-caption | 將對象作為表格標題顯示 |
| table-cell | 將對象作為表格單元格顯示 |
| table-column | 將對象作為表格列顯示 |
| table-column-group | 將對象作為表格列組顯示 |
| table-header-group | 將對象作為表格標題組顯示 |
| table-footer-group | 將對象作為表格腳注組顯示 |
| table-row | 將對象作為表格行顯示 |
| table-row-group | 將對象作為表格行組顯示 |
其中常用的如上表黃色着重部分：block、none、inline、inline-block，下面我們就開始講一下這幾個常見的屬性吧！
display:block
block： 將元素將顯示為塊級元素，元素前后會帶有換行符，通常用於將行內元素轉換為塊級元素時使用。那么什么是塊級元素呢？什么是行內元素呢？
塊級元素：
- 總是以一個塊的形式表現出來，占領一整行。若干同級塊元素會從上之下依次排列（使用float屬性除外）。
- 可以設置高度、寬度、各個方向外補丁（margin）以及各個方向的內補丁（padding）。
- 當元素寬度（width）沒有設置時，它的寬度時其容器的100%，除非我們給它設定了固定的寬度。
- 塊級元素中可以嵌套其他塊級元素或行內元素。
- 塊級元素的display屬性值默認為block。
行內元素
- 它不會單獨占據一整行，而是只占領自身的寬度和高度所在的空間，也就是元素的的寬高度是由它的文本內容撐開。若干同級行內元素會從左到右（即某個行內元素可以和其他行內元素共處一行），從上到下依次排列。
- 行內元素不可以設置高度、寬度，其高度一般由其字體的大小來決定，其寬度由內容的長度控制。
- 行內元素只能設置左右的margin值和左右的padding值，而不能設置上下的margin值和上下的padding值。因此我們可以通過設置左右的padding值來改變行內元素的寬度。
- 行內元素一般不可以包含塊級元素。
- 塊級元素的display屬性值默認為inline。
通過給一個行內元素設置為block后，元素可以設置width和height了。元素獨占一行。這里我用行內元素 span來說明一下， 例子如下：
<span></span>
span{
width:200px;
height:200px;
display: block;
background:#f00;
}
沒有給span設置display:block，span的寬高度由元素內容撐開，及時span設置了寬高度，如下：
給span設置display:block，span由行內元素轉換為塊級元素，span設置的寬高度就起作用了，如下：
除了上面對display:block的理解，它還有一個含義，表示顯示元素。實際含義由項目需求而定。
除了給行內元素設置display:block使它轉換為塊級元素的方式以外，以下還有兩種方式可以使行內元素轉換為塊級元素，如下：
第一種：給元素設置 float 屬性
span{
width:200px;
height:200px;
float:left;
border:1px solid #ccc;
}
第二種：給行內元素設置position:absolute/fixed，效果跟第一種方法是一樣的
display:none
display:none這個值表示元素不被顯示。當你想要某個元素隱藏時，就可以給某個元素設置這個屬性，它就會消失在網頁中，但元素並沒有在文檔中刪除，只是隱藏在網頁結構中，不在網頁中顯示而已。但如果你想要元素顯示的話，可以給元素設置display:block，元素就可以顯示在網頁中了。
display:inline
display:inline 的作用可以將一個塊級元素轉換成行內元素，那么這個塊級元素將不能再設置寬和高以及上下方向的margin和padding。這個塊級元素實際的寬度和高度都是auto，並不是我們設定的值。如下：
<div>塊級元素div</div>
div{
width:200px;
height:200px;
display:inline;
background:#f00;
}
從上面的例子可以看到，div本身是塊級元素，因為設置了display:inline，它就有塊級元素變為了行內元素，給div設置的寬高度就失效了，而它的寬高度就有它的文本內容撐開了。
display：inline-block
根據名字來看，我們可以得到它是結合了inline和block並保留了它們的特性。所以設置了inline-block屬性的元素既具有block元素可以設置width和height屬性的特性，又保持了inline元素不換行的特性。
舉例說明，我們在做橫向導航菜單的時候，一般是用ul li a組合，ul li默認是豎向顯示的，然后將li設置為float，這樣就可以得到橫向的導航標簽了。而現在我們可以通過li和display:inline-block;來實現。
默認效果：
<div>
<ul>
<li><a href="">首頁</a></li>
<li><a href="">商品</a></li>
<li><a href="">關於我們</a></li>
<li><a href="">招聘</a></li>
</ul>
</div>
div>ul>li{
width:100px;
background:#f00;
line-height: 30px;
text-align: center;
margin-bottom: 10px;
list-style: none;
}
設置了display:inline-block的效果:
div>ul>li{
width:100px;
background:#f00;
line-height: 30px;
text-align: center;
display: inline-block;
list-style: none;
}
從兩個圖可以看出，設置了display：inline-block后 li 能夠在同一行顯示，display：inline-block的效果幾乎和浮動一樣，但是它們其實還是區別。接下來就來講一下inline-block和浮動 float 的比較。
1）不同之處：對元素設置display：inline-block ，元素不會脫離普通文檔流，而float就會使得元素脫離普通文檔流，且還有父元素高度坍塌（對於未知高度的元素）的效果，所以要清除浮動。普通文檔流參照 CSS屬性 Position的幾種定位方式 對文檔流的解釋。
2）相同之處：能在某種程度上達到一樣的效果。就以上的例子來說：
float浮動的效果：
就這么一看兩個幾乎是一樣的效果，但仔細看看設置display：inline-block，li之間有間隙問題，而float浮動使 li 緊挨着。
3）浮動布局不太好的地方：參差不齊的現象，也就是元素高度不一樣時，我們可以看到一個效果：
<div class="box">
<div class="one">one</div>
<div class="two">two</div>
<div class="three">three</div>
<div class="four">four</div>
</div>
.box{
width:300px;
border:1px solid #ccc;
overflow: hidden;
}
.box>div{
width:100px;
float: left;
}
.box>.one{
height:100px;
background:#8A2BE2;
}
.box>.two{
height:150px;
background:#98FB98;
}
.box>.three{
height:100px;
background:#CCCCCC;
}
.box>.four{
height:150px;
background:#CD853F;
}
設置float的效果，div排列得參差不齊：
設置display: inline-block;的效果，每一個div都很有序的排列：
從上面可以看出浮動的局限性在於，如果要元素排滿一行，換行后還要整齊排列，就要子元素的高度一致才行，不然就會出現子元素排列得參差不齊，而inline-block就不會。
display：inline-block存在的間隙問題：
1）用了display:inline-block后，存在間隙問題，間隙為4像素，這個問題產生的原因是換行引起的，因為我們寫標簽時通常會在標簽結束符后順手敲個回車，而這個回車會產生回車符，回車符相當於空白符。間隙產生的原因就是我們沒怎么注意的空白符。
2）去除空隙的方法：對父元素添加，{font-size:0}，即將字體大小設為0，那么那個空白符也變成0px，從而消除空隙。但是它會影響元素內部文本的顯示。
3）瀏覽器兼容性：ie6/7是不兼容 display：inline-block的，所以用以下代碼處理以下：
對於行內元素直接使用：{dislplay:inline-block;}
對於塊級元素：需添加 {display:inline;zoom:1;}
總結
display：inline-block的布局方式和浮動的布局方式，究竟使用哪個，我覺得應該根據實際情況來決定的：
a. 對於橫向排列東西來說，我建議使用inline-block來布局，因為這樣清晰，也不用再像浮動那樣清除浮動，害怕布局混亂等等。
b. 對於浮動布局就用於需要文字環繞的時候。
以上僅是個人見解，若有不足之處歡迎在下方評論指出，那就先分享到這里!! 😄 后續繼續更新!!