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 から削除されました。
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. ギャップを除去する方法: 現在、この方法はさまざまなブラウザと互換性がありますが、以前は Chrome とは互換性がありませんでした。 図1: c. ブラウザの互換性: IE6/7 は display: inline-block と互換性がないため、追加の処理が必要です。 4. 要約:表示: インラインブロックレイアウトとフローティングレイアウトのどちらを使用するかは、実際の状況に応じて決定する必要があると思います。 |
<<: MySql 8.0 と対応するドライバー パッケージの一致に関する注意事項
>>: 関連するプロパティのリストを含む HTML エリア イメージ ホットスポットの使用の概要
Mysql が CPU を占有しすぎる場合、どこから最適化を開始すればよいでしょうか? CPU 使...
予備的注釈1.Vue2.xとVue3.xの違い: Vue 3.x にはヘルパー関数はありません。 V...
Web フロントエンド開発に含まれる内容は、主に W3C 標準の構造、動作、パフォーマンスです。では...
入力サブシステムフレームワークLinux 入力サブシステムは、上から下に向かって、入力サブシステム ...
コーディングをしていると、多くのことが同じ結末を迎えることに気づくでしょう。問題を解決する方法は何千...
序文場合によっては、第 1 正規形設計パターンに従わないビジネス テーブルに遭遇することがあります。...
目次基本的な紹介入門テスト (Excel ファイルからのデータの読み取り)ステップ1: Maven座...
目次1.スリープ機能2.タイムアウトを設定する3. 約束4. 非同期待機5. 1秒後に出力1、2秒後...
この記事では、音楽プレーヤーを実装するためのVue.jsの具体的なコードを参考までに共有します。具体...
目次Nginx 負荷分散構成Nginx 負荷分散戦略ポーリング(デフォルト)重さip_ハッシュ公正(...
暗い背景スタイルのページ デザインは非常に人気があり、シックでエレガント、そして非常にクリエイティブ...
1.Mysqlイメージを取得するdocker pull mysql:5.7 2. MySQLイメージ...
目次1. Flinkの概要1.1 基本的な紹介1.2 アプリケーションシナリオ2. 環境の展開2.1...
目次導入質問設計 1: 隣接リストテーブルデザインSQL の例デザイン 2: パスの列挙テーブルデザ...
成果を達成する 実装コードhtml <div class="wrap"&g...