交換可能な要素とは何ですか? (例付き)

この記事では、交換可能な要素とは何かについて説明します。 （例もあり）ある程度の参考になるので、困っている友達は参考にしていただければ幸いです。

最近、グループ チャットで友人が Toutiao のフロントエンド面接の質問のスクリーンショットを投稿しているのを偶然見ました。HTML に関する質問は次の 1 つだけでした:

置換可能な要素とは何ですか? と置換不可能な要素、その違いは何ですか?そして例を挙げてください。

フロントエンド面接の HTML に関する質問は最も少なく、難しくはありません。何度も繰り返される質問はほんの少しだけです。以前に最も古典的な HTML セマンティクスについて説明しましたが、今日はこの機会を利用して置換可能な要素について説明します。

定義

置換可能な要素とは何ですか?名前が示すように、置き換えられる要素です。 (ぎこちない笑い...

たとえば、典型的な置換可能な要素 img:

<img  src="/static/imghwm/default1.png" data-src="https://avatars2.githubusercontent.com/u/17703242?s=460&v=4" class="lazy" alt="交換可能な要素とは何ですか? (例付き)" >

img タグには何も書いていません。コンテンツの由来は何ですか?

ブラウザは src 属性で指定された画像をダウンロードし、img タグを画像リソースに置き換えますが、ブラウザはダウンロードする前にそれを認識しません。画像の高さと高さです。したがって、置換可能な要素は特別です。その幅と高さは、読み込むコンテンツによって決まります (もちろん、CSS はそのスタイルをオーバーライドできます)

Example

img タグを使用して、いくつかの例を示します。

<img  src="/static/imghwm/default1.png" data-src="https://avatars2.githubusercontent.com/u/17703242?s=460&v=4" class="lazy" alt="交換可能な要素とは何ですか? (例付き)" >

画像がページに表示される場合、それは画像自体の幅と高さになります。

img 要素は、width 属性と height 属性もサポートしています:

<img  src="/static/imghwm/default1.png" data-src="https://avatars2.githubusercontent.com/u/17703242?s=460&v=4" class="lazy" alt="交換可能な要素とは何ですか? (例付き)" >

現時点では、要素は次のように表示されます。幅と高さは 80 ピクセルです。

CSS を使用してそのスタイルをオーバーライドする場合:

img {
  width: 60px;
  height: 60px;
}

この要素の表示は 60 ピクセルです。

MDN の説明

読んでみてください。上記の例を理解すると、概念的な知識が理解しやすくなります。

置換可能な要素の表示効果 (置換された要素) は CSS To コントロールによって制御されません。これらの要素は外部オブジェクトであり、その外観のレンダリングは CSS から独立しています。

簡単に言うと、その内容は CSS のスタイルの影響を受けません。現在のドキュメント。CSS は、置換可能な要素の位置に影響を与える可能性がありますが、置換可能な要素自体のコンテンツには影響しません。

典型的な置換可能な要素は、<iframe></iframe> です。 <video></video> <embed></embed> <img alt="交換可能な要素とは何ですか? (例付き)" > 、一部の要素は、<input> などの特定の状況下でのみ置換可能な要素として扱われます。 .

【関連する推奨事項: HTML ビデオ チュートリアル 】

以上が交換可能な要素とは何ですか? (例付き)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。