首頁 > web前端 > css教學 > displaytable是什麼? display:table-cell的怎麼應用

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

云罗郡主
發布: 2018-10-30 16:04:37
原創
18258 人瀏覽過

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

displaytable是什麼? 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;}
登入後複製

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

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

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

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

0010-3 (1).png

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

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

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

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


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

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板