置換された要素と置換されなかった要素について学ぶ_html/css_WEB-ITnose
置換される要素と置換されない要素について学ぶ
@(Element)[Miaotong]
はじめに
CSS では、要素は、要素のコンテンツを含むボックス (ボックス) を生成します。 、「ボックス」とも訳されます）。ただし、要素が異なれば表示方法も異なります。たとえば、div とspan が異なり、strong と p も異なります。文書型定義 (DTD) では、さまざまな要素に対してさまざまな型が指定されます。これが、DTD が文書にとって重要である理由の 1 つです。要素自体の特徴により、置換要素と非置換要素に分けることができます。非置換要素は W3C では明確に定義されていませんが、非置換要素に対応する置換要素を用意することができます。置換された要素に加えて、他の要素は非置換要素であると理解されます。
要素の置換
要素の置換とは、ブラウザが要素のタグと属性に基づいて要素の特定の表示コンテンツを決定することを意味します。
置換要素は、img タグ、埋め込みドキュメント (iframe など)、またはアプレットなど、CSS 視覚書式設定モデルによってコンテンツが制御されない要素です。これらは置換要素と呼ばれます。たとえば、img 要素は画像情報を読み取り、src 属性の値を通じて表示します。ただし、(x)html コードを表示すると、画像の実際の内容は表示されず、img 要素の内容は次のようになります。通常は src 属性で指定された画像に置き換えられます。たとえば、input 要素の type 属性は、入力ボックスやラジオ ボタンなどを表示するかどうかを決定します。 (x) htmlのimg、input、textarea、select、objectはすべて置換要素です。これらの要素には実際のコンテンツはありません。つまり、空の要素です。例:
<img src="girl.jpg"/> <input type="submit" name="submit" value="提交"/>
ブラウザは、要素のタグ タイプと属性に基づいてこれらの要素を表示します。置換要素も表示内にボックスを生成します。したがって、置換要素には通常、固有の幅、固有の高さ、固有の比率といった固有の寸法があります。たとえば、ビットマップには絶対単位で指定された幅と高さのほか、固有のアスペクト比があります。一方、空の HTML ドキュメントなど、他のドキュメントには固有のサイズがない場合があります。
CSS レンダリング モデルでは、置換された要素コンテンツのレンダリングは考慮されません。これらの置換要素は CSS とは独立してレンダリングされます。オブジェクト、ビデオ、テキストエリア、および入力も置換要素であり、特定の状況ではオーディオとキャンバスも置換要素です。 CSS コンテンツ プロパティを使用して挿入されたオブジェクトは、匿名の置換要素です。
要素を置換すると行ボックスの高さは増加しますが、コンテンツ領域の高さの値 = padding-top + padding-bottom + margin-top + margin-bottom + height には影響しません。
中央の要素を置き換えたい場合は、 line-height = height
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>CSS</title> <style> *{ margin:0; padding:0; } input{ height:50px; line-height:50px; padding:10px; margin:20px; background-color:#9deaf1; text-align:center; } </style></head><body> <input type="text" value="美女"></body> </html>ページ図は次のとおりです:
同時に、このときのdisplay:inline-block ; 上下左右のパディングは有効であり、マージンは上下左右に有効です。
非置換要素
非置換要素: (X) HTML のほとんどの要素は、ブラウザにコンテンツを直接伝えて表示します。 例:
<p>p的内容</p> <label>label的内容</label>；
ブラウザはこのコンテンツを直接表示します。
行内の非置換要素にpadding-topまたはpadding-bottomを追加しても、行ボックスの高さには影響しませんが、コンテンツ領域の高さは行に影響を与えません。箱。左右のマージンを追加すると、行内の非置換要素の水平方向の位置に影響します。
インライン要素の場合、左右のパディングを設定すると、左右のパディングが表示されます。上下のパディングを設定すると、背景色の設定後にパディング領域が増加することがわかります。インラインの非置換要素の場合、行の高さは影響を受けず、親要素は引き伸ばされません。インライン置換要素の場合、親要素が展開されます。理解を深めるためにデモを見てください:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>CSS</title> <style> *{ margin:0; padding:0; } div.wrapper{ margin:0 auto; background-color:#9deaf1; width:400px; } div input{ padding:50px; margin:50px; border:2px solid green; background-color:#5dc2f6; } </style></head><body> <div class="wrapper"> <input type="text" value="美女"/> </div> </body> </html>ページ図:
コード:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>CSS</title> <style> *{ margin:0; padding:0; } div.wrapper{ margin-top:50px; margin-left:50px; background-color:#9deaf1; width:500px; } div strong{ padding:50px; margin:50px; border:2px solid green; background-color:#5dc2f6; } </style></head><body> <div class="wrapper"> <strong>hello world</strong> </div> </body> </html>図:
上記のデモは、入力などの要素のインライン置換と、上限と下限の設定を証明しています。パディングは親要素をサポートできます。
strong などのインライン非置換要素の場合、上下のパディングを設定すると範囲が拡張されるだけですが、親要素は拡張できず、行の高さには影響しません。 inline要素）では、CSS規格で規定されている縦方向のmarginやpaddingを設定することはできません。
パディングの規定はこちら：
をクリックしてください
パディングが設定できない理由は、パディングの値が対象要素の幅と要素の幅に基づいて計算されるためです。インライン要素と非置換要素は不確実です。
何か間違っている、または修正が必要な場合は、お知らせください、ありがとうございます----Miaotong
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7318
9
1625
14
1349
46
1261
25
1209
29
公式アカウントのキャッシュの更新の難しさ：バージョンの更新後のユーザーエクスペリエンスに影響を与える古いキャッシュを回避する方法は？
Mar 04, 2025 pm 12:32 PM
公式アカウントのWebページはキャッシュを更新します。これはシンプルでシンプルで、ポットを飲むのに十分な複雑です。あなたは公式のアカウントの記事を更新するために一生懸命働きましたが、ユーザーはまだ古いバージョンを開くことができますか？この記事では、この背後にあるtwist余曲折と、この問題を優雅に解決する方法を見てみましょう。それを読んだ後、さまざまなキャッシュの問題に簡単に対処でき、ユーザーが常に新鮮なコンテンツを体験できるようになります。最初に基本について話しましょう。それを率直に言うと、アクセス速度を向上させるために、ブラウザまたはサーバーはいくつかの静的リソース（写真、CSS、JSなど）やページコンテンツを保存します。次回アクセスするときは、もう一度ダウンロードすることなく、キャッシュから直接検索できます。自然に高速です。しかし、このことは両刃の剣でもあります。新しいバージョンはオンラインです、
HTML5フォーム検証属性を使用してユーザー入力を検証するにはどうすればよいですか？
Mar 17, 2025 pm 12:27 PM
この記事では、ブラウザのユーザー入力を直接検証するために、必要、パターン、MIN、MAX、および長さの制限などのHTML5フォーム検証属性を使用して説明します。
WebページのPNG画像にストローク効果を効率的に追加する方法は？
Mar 04, 2025 pm 02:39 PM
この記事では、CSSを使用したWebページへの効率的なPNG境界追加を示しています。 CSSはJavaScriptやライブラリと比較して優れたパフォーマンスを提供し、微妙または顕著な効果のために境界幅、スタイル、色を調整する方法を詳述していると主張しています
HTML5のクロスブラウザー互換性のベストプラクティスは何ですか？
Mar 17, 2025 pm 12:20 PM
記事では、HTML5クロスブラウザーの互換性を確保するためのベストプラクティスについて説明し、機能検出、プログレッシブエンハンスメント、およびテスト方法に焦点を当てています。
＆lt; datalist＆gt;の目的は何ですか 要素？
Mar 21, 2025 pm 12:33 PM
この記事では、HTML＆lt; Datalist＆GT;について説明します。オートコンプリートの提案を提供し、ユーザーエクスペリエンスの改善、エラーの削減によりフォームを強化する要素。
＆lt; Progress＆gt;の目的は何ですか 要素？
Mar 21, 2025 pm 12:34 PM
この記事では、HTML＆lt; Progress＆gt;について説明します。要素、その目的、スタイリング、および＆lt; meter＆gt;との違い要素。主な焦点は、＆lt; Progress＆gt;を使用することです。タスクの完了と＆lt; Meter＆gt; statiの場合
HTML5＆lt; time＆gt;を使用するにはどうすればよいですか 日付と時刻を意味的に表す要素？
Mar 12, 2025 pm 04:05 PM
この記事では、html5＆lt; time＆gt;について説明します。セマンティックデート/時刻表現の要素。 人間の読み取り可能なテキストとともに、マシンの読みやすさ（ISO 8601形式）のDateTime属性の重要性を強調し、Accessibilitを増やします
＆lt; meter＆gt;の目的は何ですか 要素？
Mar 21, 2025 pm 12:35 PM
この記事では、html＆lt; meter＆gt;について説明します。要素は、範囲内でスカラーまたは分数値を表示するために使用され、Web開発におけるその一般的なアプリケーション。それは差別化＆lt; Meter＆gt; ＆lt; Progress＆gt;およびex
