CSS屬性之display

標籤：支援   列表   元素   不同的   瀏覽器   常用   區別   display   footer   

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這三個值，內在表現各有千秋，但是外在表現都由這三個來表現的。

CSS屬性之display