置換された要素と置換されなかった要素について学ぶ_html/css

置換された要素と置換されなかった要素について学ぶ_html/css_WEB-ITnose

WBOY

リリース： 2016-06-24 11:39:12

オリジナル

1130 人が閲覧しました

置換される要素と置換されない要素について学ぶ

@(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