CSS屬性之display

display屬性用來設置或檢索對象是否及如何顯示

默認值：對於HTML文檔來講，這取決於你使用的標籤

繼承性：不繼承

支持動畫：否

display是一個很重要的CSS屬性，設定的值會對一個HTML元素的內部和外部表現形成影響

值列表：

none：不顯示該元素

　　　　給display設置none，瀏覽器就不會渲染該元素，雖然元素存在DOM中，能夠經過JS訪問，可是從視覺上，是徹底消失。

block:塊級元素

　　　　最經常使用的值了，設置block會讓元素變得如DIV那樣，獨佔一行

inline:內聯元素

　　　　<span>等標籤的默認值，內聯元素老是一個接一個的排列，無法設置width和height屬性，邊距的表現也和block不一樣

inline-block:內聯塊級元素

　　　　從名字上就能夠看出來，該值複合inline和block的一些特性，能夠這麼說，inline-block，就是不獨佔一行的block

flex:伸縮盒

　　　　對於其餘元素來講，一個display爲flex的元素和block沒有任何區別，但對設置了該值的元素內部，就頗有趣了

inline-flex：伸縮盒

　　　　同於flex，對其餘元素來講，設置了display爲inline-flex的元素和一個正常的inline沒有區別，影響僅僅在元素的內部

list-item:列表項目

　　　　如同<li>標籤那樣子

接下來是table系列

table:表格

　　　　如同<table>標籤那樣

inline-table

　　　　table值的inline-block版本

table-row:行

　　　　相似<tr>

table-cell:單元格

　　　　相似<td>

table-row-group：指定對象做爲表格行組。

　　　　相似於標籤<tbody>

table-column：表格列。

　　　　相似於標籤<col>

table-column-group：表格列組顯示。

　　　　相似於標籤<colgroup>

table-header-group：表格標題組。

　　　　相似於l標籤<thead>

table-footer-group：表格腳註組。

　　　　相似於<tfoot>

 

對display屬性的一些理解：

　　　　display屬性對元素有兩個方面的影響

　　　　一是元素外在表現，也就是說，對兄弟元素和父元素的影響

　　　　二是元素的內在表現，也就是說，不一樣的display值，元素是如何對待它的子元素的。

　　　　好比說，把一個元素的display設置爲flex，那麼對於元素內在表現來講，渲染方式徹底變了，而對於其餘的兄弟元素，父元素來講，該元素和block,table沒有任何區別。

　　　　因此說，這麼多的屬性值，最基本的就是inline,block,inline-block這三個值，內在表現各有千秋，可是外在表現都由這三個來表現的。