display:table-cell自適應佈局

蕉大人發表於2020-10-18

這幾天遇到了一個佈局問題，然後有時間就記錄一下，常見的幾種佈局外，float、position： absolute等等；還有一些功能強大且好用的佈局方式，display：table-cell，之前很少使用，無意中發現使用display:table-cell也是一個很好用的自適應佈局，所以本文來聊聊display：table-cell

問題發現：

  • 上面是我現在實現的佈局樣式
  • 下面是我要實現的佈局樣式

在這裡插入圖片描述

這個佈局很簡單就是左右佈局，但是沒想到實現出來的效果卻略微不同。上面我是用float浮動，但是文字部分就是包圍結構，無論怎麼設定也達不到我想要的效果，於是想到了這次的主角：display:table-cell，發現用完之後真的實現啦！

  • 下面是我用這個屬性後的效果

在這裡插入圖片描述
接下來我們聊聊display以及這個屬性

CSS display 屬性

定義和用法

display 屬性規定元素應該生成的框的型別。

說明

這個屬性用於定義建立佈局時元素生成的顯示框型別。對於 HTML 等文件型別，如果使用 display 不謹慎會很危險，因為可能違反 HTML 中已經定義的顯示層次結構。對於 XML，由於 XML 沒有內建的這種層次結構，所有 display 是絕對必要的。
可能的值

值描述
none此元素不會被顯示。
block此元素將顯示為塊級元素，此元素前後會帶有換行符。
inline預設。此元素會被顯示為內聯元素，元素前後沒有換行符。
inline-block行內塊元素。（CSS2.1 新增的值）
list-item此元素會作為列表顯示。
run-in此元素會根據上下文作為塊級元素或內聯元素顯示。
compactCSS 中有值 compact，不過由於缺乏廣泛支援，已經從 CSS2.1 中刪除。
markerCSS 中有值 marker，不過由於缺乏廣泛支援，已經從 CSS2.1 中刪除。
table此元素會作為塊級表格來顯示類似 table，表格前後帶有換行符。
inline-table此元素會作為內聯表格來顯示類似 table，表格前後沒有換行符。
table-row-group此元素會作為一個或多個行的分組來顯示類似 tbody。
table-header-group此元素會作為一個或多個行的分組來顯示類似 thead。
table-footer-group此元素會作為一個或多個行的分組來顯示類似 tfoot。
table-row此元素會作為一個表格行顯示類似 tr。
table-column-group此元素會作為一個或多個列的分組來顯示類似 colgroup。
table-column此元素會作為一個單元格列顯示類似 col
table-cell此元素會作為一個表格單元格顯示類似 td 和 th
table-caption此元素會作為一個表格標題顯示類似 caption
inherit規定應該從父元素繼承 display 屬性的值。
設定了display：table-cell的元素：
  1. 對寬度高度比較敏感
  2. 對margin值無反應
  3. 響應padding屬性
  4. 內容溢位時會自動撐開父元素

上面實現的效果圖就是左邊頭像部分使用了float左浮動屬性，右側使用 display: table-cell則實現了兩列自適應佈局。

總結：

前端佈局很重要，佈局表達方式也有很多種，挑一個你喜歡的來做，只要你能實現，哪個都是可以的，但是我也很推薦一些屬性用起來熟練後，我們可以嘗試用其他的用用鍛鍊鍛鍊，因為它會給你一個很大的surprise哦！

相關文章