display——table-cell屬性

時間 2020-06-17

標籤 display table cell 屬性欄目 CSS 简体版

原文原文鏈接

display的table和table-cell通常狀況下用的很少，因此不多有人去關注它，但他們兩個聯手起來會給你驚喜！html

當兩個或者兩個以上標籤一塊兒使用顯示在同一行時，之前經常使用的是float、position進行佈局，在高版本的瀏覽器可使用flex、grid進行佈局。無心中發現使用display:table-cell也是一個很好用的自適應佈局，本文就display：table-cell作學習總結。瀏覽器

display:table-cell指讓標籤元素以表格單元格的形式呈現，使元素相似於td標籤。IE8+及現代版本的瀏覽器都支持此屬性，IE6/7不支持（可用其餘方法實現相似效果）。一樣，display：table-cell屬性也會被float，position：absolute等屬性破壞效果，應避免同時使用。ruby

值	描述
none	此元素不會被顯示。
block	此元素將顯示爲塊級元素，此元素先後會帶有換行符。
inline	默認。此元素會被顯示爲內聯元素，元素先後沒有換行符。
inline-block	行內塊元素。（CSS2.1 新增的值）
list-item	此元素會做爲列表顯示。
run-in	此元素會根據上下文做爲塊級元素或內聯元素顯示。
compact	CSS 中有值 compact，不過因爲缺少普遍支持，已經從 CSS2.1 中刪除。
marker	CSS 中有值 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能夠代替浮動佈局，可是其不是最好的方法。其餘方法有待進一步學習！佈局

這裏拋出這樣一個問題，以下，讓塊裏的多行文字垂直居中？一說到垂直居中就會想到，單行文字垂直居中line-height等於height；塊級元素垂直居中，position定位或者flex佈局。但這裏我介紹display：table和table-cell是如何讓多行文字垂直居中的。雖然感受用的很少，可是在某些時候仍是挺管用的，以下：學習

1.多行文字居中

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>table</title> <style> .parent{ display: table; width: 400px; height: 400px; text-align: center; border:1px solid red; margin:0 auto; background: blue;   /*背景顏色無效*/
        } .child{ display: table-cell;    /*子元素成爲表格單元格（相似 <td> 和 <th>）*/ height: 200px; background: yellow; vertical-align: middle; /*表格容器能夠設置垂直對齊屬性*/ white-space: pre;
        } </style> </head> <body> <div class="parent"> <div class="child"> display: table-row-group; display: table-header-group; display: table-footer-group; display: table-row; display: table-cell; display: table-column-group; display: table-column; display: table-caption; display: ruby-base; display: ruby-text; display: ruby-base-container; display: ruby-text-container; </div> </div> </body> </html>

效果以下：flex

設置了display：table-cell的元素：spa

對寬度高度敏感
對margin值無反應
響應padding屬性
內容溢出時會自動撐開父元素

2.製做自適應搜索框

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>table</title> <style> .search-box{ display: table; width:100%;
            } .search-content{ width: 30%; display: table-cell; border: 1px solid #ccc; padding: 8px 0px;
            } .search-btn{ display: table-cell; width: 5%; white-space: nowrap; padding: 5px 12px; background-color: #ccc; border: 1px solid #ccc; border-radius: 4px; border-bottom-right-radius: 0; border-top-right-radius: 0; font-size: 14px; color: #555; border-right: 0;
            } </style> </head> <body> <div class="search-box"> <span class="search-btn">搜索</span> <input type="text" class="search-content"/> </div> </body> </html>

效果以下:
　　　　code

3.大小不固定的垂直居中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>table</title>
    <style> .content { display: table-cell; padding: 10px; border: 2px solid #999;
        } .content div { display: inline-block; vertical-align: middle;
        }
    </style>
</head>
<body>
    <div class="content">
        <div style="padding: 50px 40px;background: #cccccc;color: #fff;"></div>
        <div style="padding: 60px 40px;background: #639146;color: #fff;"></div>
        <div style="padding: 70px 40px;background: #2B82EE;color: #fff;"></div>
        <div style="padding: 80px 40px;background: #F57900;color: #fff;"></div>
        <div style="padding: 90px 40px;background: #BC1D49;color: #fff;"></div>
    </div>
</body>
</html>

效果以下：
　　　　htm

4.倆列自適應佈局(寬度自動調節)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>table</title>
    <style> .content { display: table; padding: 10px; border: 2px solid #999; width:20%;
        } .left-box { float: left; margin-right: 10px;
        } .right-box { display: table-cell; padding: 10px; width: 3000px;  /*右側自適應*/ vertical-align: top; border: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <div class="content">
            <div class="left-box">
                <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1563504355842&di=38efab5b4e8d2d2546238af82ce055d9&imgtype=0&src=http%3A%2F%2Fimg.9ku.com%2Fgeshoutuji%2Fsingertuji%2F1%2F15169%2F15169_1.jpg" width="70">
            </div>
            <div class="right-box">...</div>
    </div>
</body>
</html>

效果以下：
　　　　blog

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

注：咱們爲一個元素設置了display：table-cell屬性，而不將其父元素設置爲display：table-row屬性，瀏覽器會默認建立一個表格行。

5.列表佈局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>table</title>
    <style> .content { padding: 10px; margin: 10px auto; display: table; width: 20%; border: 2px solid #999;
    } .content ul { display: table-row;
    } .content ul li { display: table-cell; height: 100px; line-height: 100px; text-align: center; border: 1px solid #ccc;
    }
    </style>
</head>
<body>
    <div class="content">
        <ul>
          <li>1</li>
          <li>2</li>
          <li>3</li>
          <li>4</li>
          <li>5</li>
        </ul>
    </div>
</body>
</html>

效果以下：

這類佈局經常使用浮動佈局（給每一個li加上float：left屬性）實現，但這樣作有明顯不足：

須要清除浮動
不支持不定高列表的浮動

1. CSS display屬性
2. display屬性
3. CSS display 屬性
4. display的屬性
5. Bootstrap display屬性
6. display 屬性
7. CSS屬性之display
8. display屬性（重點）
9. display屬性詳解
10. css display屬性值
更多相關文章...
• ASP.NET TableCell ColumnSpan 屬性 - ASP.NET 教程
• ASP.NET TableCell RowSpan 屬性 - ASP.NET 教程
• JDK13 GA發佈：5大特性解讀
• 互聯網組織的未來：剖析GitHub員工的任性之源

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。