CSS 表示属性のインラインブロックレイアウト実装の詳細な説明

CSS 表示属性のインラインブロックレイアウト実装の詳細な説明

CSS 表示プロパティ

注: !DOCTYPE が指定されている場合、Internet Explorer 8 (およびそれ以降) は、プロパティ値 "inline-table"、"run-in"、"table"、"table-caption"、"table-cell"、"table-column"、"table-column-group"、"table-row"、"table-row-group"、および "inherit" をサポートします。すべての主要ブラウザは display プロパティをサポートしています。

定義と使用法

display プロパティは、要素が生成するボックスのタイプを指定します。

例示する

この属性は、レイアウトを構築するときに要素が生成する表示フレームのタイプを定義するために使用されます。 HTML などのドキュメント タイプの場合、display を使用すると、HTML で定義された display 階層に違反する可能性があるため、注意しないと危険です。 XML にはそのような階層が組み込まれていないため、すべての表示が絶対に必要です。

注: compact と marker の値は CSS2 に存在していましたが、広範囲にわたるサポートがないため CSS2.1 から削除されました。

デフォルト値:列をなして
継承:いいえ
バージョン: CSS1
JavaScript 構文: object.style.display="インライン"

1. display、inline、block、inline-blockの一般的な属性値を説明する

インライン(インライン要素):インライン要素の特性を持ち、つまり、他のインライン要素とラインを共有することができ、要素の高さと幅を占有することはできません。ブロックレベルの要素には、独自の幅が設定されていない場合、デフォルトでは、パディングとマージンのさまざまな属性値を設定できます。上記のブロックの特性。レイマンの用語では、それだけではブロックレベルの要素です。図示のとおり:

図1:


図2:

2 つの図から、display: inline-block の後、ブロック レベル要素を同じ行に表示できることがわかります。これはフローティングと同じだと言う人もいます。はい、display: inline-block の効果は float とほぼ同じですが、違いもあります。次に、inline-block と float の比較について説明します。

2. インラインブロックレイアウトとフローティングレイアウト

a. 違い: display: inline-block が要素に設定されている場合、要素はテキストフローから分離されませんが、float は要素をテキストフローから分離し、親要素の高さを縮小する効果もあります。

b. 類似点: ある程度同じ効果を達成できる

次の 2 つのレイアウトを見てみましょう。

図1: 表示: インラインブロック


図 2: 2 つの子に float:left を使用します。前回のフローティング レイアウトに関する記事で、親要素の高さが縮小されるため、フロートを閉じてボックスに overflow:hidden を使用する必要があると述べました。効果は次のとおりです。

>>一見すると、どちらもほぼ同じ効果が得られます。(以下で説明する display: inline-block のギャップの問題に注意してください)

c. フローティングレイアウトのデメリット:不均一性。効果を見てみましょう。

図3:


図4:


>>図 3 と図 4 から、フローティングの制限は、要素が行を埋めて改行後にきちんと配置される場合、子要素の高さが一貫している必要があることです。そうでない場合、図 3 に示す効果は表示されますが、インライン ブロックでは表示されません。

3. インラインブロックに関する小さな問題:

a. 上記のように、display:inline-block を使用した後、4 ピクセルのギャップの問題が発生しています。この問題は改行によって発生します。タグを記述する場合、通常、タグ終了文字の後にキャリッジ リターンをヒットします。キャリッジ リターンは、空白文字に相当するキャリッジ リターン文字を生成します。通常、連続する複数の空白文字は 1 つの空白文字に結合されますが、"空白ギャップ" の本当の原因は、あまり注意を払わないこの空白文字です。

b. ギャップを除去する方法:
1. 親要素に {font-size:0} を追加して、フォント サイズを 0 に設定します。すると、空白文字も 0px になり、ギャップがなくなります。

現在、この方法はさまざまなブラウザと互換性がありますが、以前は Chrome とは互換性がありませんでした。

図1:

c. ブラウザの互換性: IE6/7 は display: inline-block と互換性がないため、追加の処理が必要です。
IE6/7の場合:
インライン要素の場合は、{dislplay:inline-block;}を直接使用します。
ブロックレベル要素の場合: {display:inline;zoom:1;} を追加します。

4. 要約:

表示: インラインブロックレイアウトとフローティングレイアウトのどちらを使用するかは、実際の状況に応じて決定する必要があると思います。
a. 水平方向の配置の場合、レイアウトには inline-block を使用することをお勧めします。これは、より明確であり、float のようにフロートをクリアする必要がなく、レイアウトの混乱などを心配する必要がないためです。
b. フローティングレイアウトの場合、テキストの折り返しが必要な場合に使用します。結局のところ、フローティングが本当に役立つのはここです。水平方向の配置は inline-block に任せます。

<<:  MySql 8.0 と対応するドライバー パッケージの一致に関する注意事項

>>:  関連するプロパティのリストを含む HTML エリア イメージ ホットスポットの使用の概要

推薦する

Mysql が CPU を過剰に占有する場合の最適化方法 (必読)

Mysql が CPU を占有しすぎる場合、どこから最適化を開始すればよいでしょうか? CPU 使...

Vuex でゲッターとアクションを使用するための追加手順

予備的注釈1.Vue2.xとVue3.xの違い: Vue 3.x にはヘルパー関数はありません。 V...

Webフロントエンド開発エンジニアが習得すべきコアスキル

Web フロントエンド開発に含まれる内容は、主に W3C 標準の構造、動作、パフォーマンスです。では...

Linux入力サブシステムフレームワーク原理の分析

入力サブシステムフレームワークLinux 入力サブシステムは、上から下に向かって、入力サブシステム ...

CSS3はキングをマッチングさせるときにパーティクルアニメーション効果を実現します

コーディングをしていると、多くのことが同じ結末を迎えることに気づくでしょう。問題を解決する方法は何千...

MySQLでカンマ区切り値の列を列に変換する方法

序文場合によっては、第 1 正規形設計パターンに従わないビジネス テーブルに遭遇することがあります。...

Apache POIの基本的な使い方の詳しい説明

目次基本的な紹介入門テスト (Excel ファイルからのデータの読み取り)ステップ1: Maven座...

JavaScriptのスリープ関数の使用

目次1.スリープ機能2.タイムアウトを設定する3. 約束4. 非同期待機5. 1秒後に出力1、2秒後...

Vue.jsは音楽プレーヤーを実装します

この記事では、音楽プレーヤーを実装するためのVue.jsの具体的なコードを参考までに共有します。具体...

Nginx ロードバランシングの設定方法

目次Nginx 負荷分散構成Nginx 負荷分散戦略ポーリング(デフォルト)重さip_ハッシュ公正(...

より人気がありクリエイティブなダーク背景のウェブデザインの例

暗い背景スタイルのページ デザインは非常に人気があり、シックでエレガント、そして非常にクリエイティブ...

docker mysqlの起動時に初期化SQLを実行する

1.Mysqlイメージを取得するdocker pull mysql:5.7 2. MySQLイメージ...

リアルタイムコンピューティングフレームワークFlinkクラスタの構築と動作メカニズムについての簡単な説明

目次1. Flinkの概要1.1 基本的な紹介1.2 アプリケーションシナリオ2. 環境の展開2.1...

MYSQL の 3 つのツリー構造テーブル設計の長所と短所の簡単な分析と共有

目次導入質問設計 1: 隣接リストテーブルデザインSQL の例デザイン 2: パスの列挙テーブルデザ...

CSS で実装された円形のプログレスバー

成果を達成する 実装コードhtml <div class="wrap"&g...