display:table、display:table-row、display:table-cell の使用法_html/css

display:table と display:table-cell の使用法:

推奨事項: できる限りコードを手書きすることで、学習の効率と深さを効果的に向上させることができます。

display 属性の table および table-cell 属性値は、主にブラウザの互換性が良くなく、かなりの数のユーザーが依然として邪悪な IE6 と IE7 を使用しているため、あまり一般的に使用されていませんが、 Display:table-cell は、display:table-cell の使い方の紹介で簡単に紹介されていますが、サンプルを集めて包括的に紹介しましょう。

3 つの属性値の基本概念:

1.table: HTML タグ

と同様に、ブロック要素レベルでオブジェクトをテーブルとして指定します。

2.table-row: HTML タグ

と同様に、オブジェクトをテーブル行として指定します。

3.table-cell: HTML タグ

と同様に、オブジェクトを表のセルとして指定します。

上記の属性値の基本的な概念的定義から、テーブルに関連しないタグによって作成されるテーブル効果を作成できることがわかります。コード例は次のとおりです。

<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="author" content="http://www.51texiao.cn/" /><title>蚂蚁部落</title><style type="text/css"> .table{   display:table; } .tr{   display:table-row;   width:200px;   height:200px; } .td{   display:table-cell;   width:100px;   height:100px;   background-color:green;   border:1px solid red; } tr{   width:200px;   height:200px; } td{   width:100px;   height:100px;   background-color:green;   border:1px solid red; } </style> </head> <body> <div class="table">   <div class="tr">     <div class="td"></div>     <div class="td"></div>   </div> </div> <br/> <table cellpadding="0" cellspacing="0">   <tr>     <td></td>     <td></td>   </tr> </table> </body> </html>

ログイン後にコピー

のパフォーマンスから判断します。上記のコードでは、値の後に関連する属性が div に追加されます。もちろん、上記のデモでは、テーブルの関連する特性を完全に説明することはできません。上記のコードは、テーブルの役割を説明しているだけです。 3 つの属性値。この時点で、友人の中には次のような質問をする人もいるかもしれません。多くの実際のアプリケーションでは、テーブルのような階層関係の完全な定義はなく、多くの場合、display:table-cell だけが定義されています。これは、オブジェクトに display:table -cell がある場合に、また、その親要素と祖父母要素が display:table-row と display:table-cell を定義していない場合、これら 2 つの親要素は匿名で作成されますが、外観は変わりません。コード例は次のとおりです。

<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="author" content="http://www.51texiao.cn/" /><title>蚂蚁部落</title><style type="text/css"> .parent{   width:200px;   height:200px;   background-color:green;   display:table-cell;   vertical-align:middle; } .children{   width:60px;   height:60px;   background-color:red;   font-size:12px; } </style> </head> <body> <div class="parent">    <div class="children">蚂蚁部落</div> </div> </body> </html>

ログイン後にコピー

上記のコードでは、親要素に display:table-cell がありますが、display:table-row および display:table- を定義する親要素または祖父母要素がありません。細胞。このとき、この属性を持つオブジェクトが 2 つ匿名で作成されます。当然見た目はわかりません。上記のコードの子要素が垂直方向の中央揃えにできる理由は、 td 要素に valign 属性があり、vertical-align:middle が valign 属性を持つオブジェクトでのみ有効になるためです。そのため、上記のコードは垂直方向の中央揃えを正常に実現します。効果。さまざまなブラウザと互換性のあるposition-height div垂直センタリング効果では、display:table-cellが中央のオブジェクトで使用され、display:table-cellはその親オブジェクトparentでも宣言されます。それ以外の場合は、この属性を持つ2つのオブジェクトが宣言されます。オブジェクトが匿名で作成される場合、中央のオブジェクトのサイズはコンテンツに応じて適応されるため、標準のブラウザでは垂直方向のセンタリング効果を実現できません。

元のアドレス: http://www.51texiao.cn/div_cssjiaocheng/2015/0501/504.html