displaytable是什麼？ display:table-cell的怎麼應用

很多剛接觸display的時候，不知道displaytable是什麼和怎麼去使用display:table-cell，其實display:table-cell的使用並不難，只要我們了解一下display:table-cell的屬性的應用規則，那麼，display:table-cell的怎麼應用？下面我們來講解一下display:table-cell的應用方法。

一：display:table-cell的屬性

display:table-cell的屬性很類似td標籤，現在很多瀏覽器都是支援display:table-cell屬性的，我們都知道表格有些特別的屬性，很多時候，我們用到的垂直居中，和關聯伸縮，所以說，display:table-cell有著很大的用處，但是和其他display屬性相比，table-cell也會被其他的css破壞，一般建議，在使用display:table-cell的時候，不要使用float屬性盡量不要使用，display:table-cell對寬度特別敏感，並且對margin值是沒有任何意義的。

二：display:table-cell與不固定元素的應用

#在製作網頁的時候，我們使用display:table-cell讓大小不固定的元素且垂直居中，程式碼如下：

/*这里的大小是根据高宽上限128像素图片设置的*/
div{display:table-cell; width:1em; height:1em; border:1px solid #beceeb; font-size:144px; text-align:center; vertical-align:middle;}

在瀏覽器中顯示的效果如下：

三、display:table-cell的自適應佈局

在一些大型網站上，例如facebook中的友善動態清單就是採用display:table-cell與兩欄進行自適應，如圖：

四：display:table-cell下的清單佈局

在一般情況下，我們都是使用浮動來進行佈局，但是採用浮動的方式去佈局的話，需要清除浮動效果，display:table-cell下的列表佈局是指橫向佈局。

由於table-cell是包裹著獨立的標籤，當repeat輸出的時候，要進行兩次循環，而列數都是固定的，對於一般的簡單的樣式，我們不會使用display: table-cell。

以上就是displaytable是什麼？ display:table-cell的怎麼應用的全部解釋，如果你想了解更多有關CSS教程，請關注php中文網。

以上是displaytable是什麼？ display:table-cell的怎麼應用的詳細內容。更多資訊請關注PHP中文網其他相關文章！