CSS の inline-block の最小幅値の詳細な説明

序文

最近、私は夜に時間を取って「CSS World」という本を読んでいます。この本は非常に興味深く、CSS がいくつかの属性スタイルほど単純ではないことに気づきました。昨日、インラインブロック要素で、幅を 0 に設定すると、要素タグ内のコンテンツに最小幅があることを見ました。最小幅は、漢字と英語の文字で異なります。漢字は漢字ごとに区切られ、英語の文字は英語の単語ごとに区切られます。

記事の冒頭

この本では凸凹の例は挙げられていますが、詳しい説明はされていません。以下ではこのコードを詳しく説明します。

コード操作

<スタイル>
        .ao ,.tu{
            表示: インラインブロック;
            幅: 0;
            フォントサイズ: 14px;
            行の高さ: 18px;
            マージン: 35px;
            色: スカイブルー;
        }
        .ao:以前、
        .tu:before{
            /* 境界線の外側のスタイルが重要な役割を果たします。outline-color/style/width */
            アウトライン: 2px 実線 #cd0000;
            /* 要素のフォントファミリーを指定します*/
            フォントファミリー: Consolas、Monaco、等幅;
        }
        .ao:前{
            内容：「愛してるよ」
        }
        .tu{
            /* テキストの方向は左から右、逆方向の場合は*/
            方向: rtl;
        }
        .tu:before{
            内容：「愛しています」
        }
    </スタイル>
</head>
<本文>
    <div>
        <span class="ao">お母さんが大好きです</span>
        <span class="tu">私はあなたを愛していません</span>
        <span>愛しています</span>
    </div>
</本文>

結果

コード解釈

凹面効果と凸面効果を示すために 2 つの span タグが使用されます。 span タグはインライン要素です。3 つのスタイルについて詳しく知らない場合は、この記事の後半で説明します。

1. まず、display を通じてインライン ブロック要素に変換します。次に、span 要素の幅が最小になるように、幅を 0 に設定します。

2. 2 つの疑似要素の前に共通の疑似要素を使用します。疑似要素のコンテンツが異なると改行が異なり、外側の境界線のスタイルは赤になり、フォント スタイルが指定されます。
なぜ疑似要素を使用する必要があるのですか? 疑似要素を使用せずに直接設定することはできないのですか?この疑問を念頭に再度試してみたところ、疑似要素を使用しない場合、テキストは凹凸で表示されるものの、境界線は表示されず、テキストが重なって表示されることがわかりました。その理由はまだ解明されていませんが、確認して議論することができます。

direction: rtl; は、テキストの方向を右から左にし、突出部分を凹状の開口部に揃えます。

3. 次の「私は母を愛しているが、私はあなたを愛していない」は、インライン ブロック要素の下部の幅の値に応じて、before 要素の内容の後に表示されます。

タグ分類

ブロックレベル要素

<address>はアドレスを定義します
<caption>は表のタイトルを定義します
<dd>は定義リストのエントリを定義します
<div>は文書内の区分またはセクションを定義します
<dl> 定義リスト
<dt>はリスト内の項目を定義します
<fieldset>はフレームセットを定義します
<form>はHTMLフォームを作成します
<h1>は最大の見出しを定義します
<h2>はサブタイトルを定義します
<h3>はタイトルを定義します
<h4>はタイトルを定義します
<h5>はタイトルを定義します
<h6>は最小の見出しを定義します
<hr>は水平線を作成します
<legend> 要素は、fieldset 要素のタイトルを定義します。
<li>タグはリスト項目を定義します
<noframes> フレームをサポートしていないブラウザ用のテキストをフレームセット要素内に表示します。
<noscript>はスクリプトが実行されない場合の代替コンテンツを定義します
<ol>は順序付きリストを定義します
<ul>は順序なしリストを定義します
<p>タグは段落を定義します
<pre>はフォーマット済みのテキストを定義します
<table>タグはHTMLテーブルを定義します
<tbody> タグテーブル本体 (テキスト)
<td> 表内の標準セル
<tfoot> は表のフッター（脚注または表の注釈）を定義します。
<th>はヘッダーセルを定義します
<thead>タグは表のヘッダーを定義します
<tr>はテーブル内の行を定義します

インライン要素

<a>タグはアンカーを定義します
<abbr>は略語を示します
<acronym> は頭字語の頭文字のみを定義します
<b> 太字フォント
<bdo>はデフォルトのテキスト方向を上書きできる
<big> 大きな太字フォント
<br> 改行
<cite> は定義を引用する
<code>はコンピュータコードテキストを定義します
<dfn>は定義項目を定義します
<em>は強調されたコンテンツとして定義されます
<i> 斜体テキスト効果
<img>は画像をWebページに埋め込みます
<input> 入力ボックス
<kbd>はキーボードテキストを定義します
<label>タグは入力要素のラベル（マーク）を定義します。
<q> は短い引用を定義します
<samp>はサンプルテキストを定義します
<select> は単一選択または複数選択メニューを作成します
<small> は小さいフォントをレンダリングします
<span> 文書内のインライン要素を結合します // この例ではspanを使用しています
<strong> より強い強調
<sub>は下付き文字を定義します
<sup>は上付き文字を定義します
<textarea> 複数行テキスト入力コントロール
<tt> タイプライターまたは等幅テキスト効果
<var>は変数を定義します

インラインブロック要素

<button> ボタン
<del>は文書内で削除されたテキストを定義します
<iframe>は、別のドキュメントを含むインラインフレーム（つまり、インラインフレーム）を作成します。
<ins> タグは、ドキュメントに挿入されたテキストを定義します。
<map> クライアント側のイメージマップ（ホットスポット）
<オブジェクト> オブジェクト
<script> クライアント側スクリプト

記事の終わり

一言でまとめると、インライン ブロック要素の幅が 0 の場合、要素内のコンテンツの幅は最小値になります。ぜひあなたも試してみてください。質問があればコメント欄にメッセージを残して一緒に学んでください。

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。