CSS中如何應(yīng)用display:table-cell

CSS中如何應(yīng)用display:table-cell？這個問題可能是我們?nèi)粘W(xué)習或工作經(jīng)常見到的。希望通過這個問題能讓你收獲頗深。下面是小編給大家?guī)淼膮⒖純?nèi)容，讓我們一起來看看吧！

一：display:table-cell的屬性

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

二：display:table-cell與不固定元素的應(yīng)用

在制作網(wǎng)頁的時候，我們使用display:table-cell讓大小不固定的元素并且垂直居中，代碼如下：

/*這里的大小是根據(jù)高寬上限128像素圖片設(shè)置的*/
div{display:table-cell; width:1em; height:1em; border:1px solid #beceeb; font-size:144px; text-align:center; vertical-align:middle;}

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

三、display:table-cell的自適應(yīng)布局

在一些大型網(wǎng)站上，比如facebook中的友好動態(tài)列表就是采用display:table-cell與兩欄進行自適應(yīng)，如圖：

四：display:table-cell下的列表布局

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

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

感謝各位的閱讀！看完上述內(nèi)容，你們對CSS中如何應(yīng)用display:table-cell大概了解了嗎？希望文章內(nèi)容對大家有所幫助。如果想了解更多相關(guān)文章內(nèi)容，歡迎關(guān)注億速云行業(yè)資訊頻道。