CSSの絶対要素をサイジングする2つの方法

CSSをしばらく使用している人は誰でも、絶対的および相対的なポジショニングのメリットについて知っているでしょう。要約する： 位置：相対により、要素を元の位置から水平方向に（左または右を使用して）または垂直（上または下部を使用）からシフトできます。 位置：絶対に、左、右、上、または下部を使用して、コンテンディングブロックに要素を配置できます （含まれるブロックは、相対、絶対、または固定の位置を持つ最も近い祖先ノードです）。 したがって、ポジショニングノードは簡単です。 HTML：

<div >
	<div ></div>
</div>

CSS：

#outer
{
	position: relative;
	width: 200px;
	height: 200px;
	margin: 20px auto;
	border: 2px solid #c00;
}

#inner
{
	position: absolute;
	left: 50px;
	top: 50px;
	width: 96px;
	height: 96px;
	background-color: #ddc;
	border: 2px solid #00c;
}

（内側のブロックの実際の幅と高さは、境界線の追加により100pxになります）。 次のボックスは、すべての最新のブラウザ（IE6を含む）でレンダリングされています。   あまり知られていないことは、左、右、上、下部をすべて適用できることです 同時にプロパティ。次のCSSは、内部要素を同じようにレンダリングします。 内側のボックスの幅と高さは100pxのままですが、寸法を明示的に設定する必要はありません。 これは、次の場合に役立ちます。

#inner
{
	position: absolute;
	left: 50px;
	right: 50px;
	top: 50px;
	bottom: 50px;
	background-color: #ddc;
	border: 2px solid #00c;
}

要素の周りの間隔は、幅または高さよりも重要です。また、ネガティブな左、右、上部、および/または下部のプロパティを使用して、外側の親よりも内側のボックスを大きくすることもできます。
• 境界とパディングが異なる複数の内側の要素がありますが、一貫した外側の間隔が必要です。この方法では、これらすべての要素に対して単一のスタイルを作成できます。
JavaScriptアニメーションは、結果の幅と高さを計算する必要がない場合、要素のサイズをより簡単かつ迅速に変更できるため、メリットもあります。
• ブラウザの互換性に関するメモ：この手法は、明示的な幅と高さのみを理解する
ie6を除き、すべてのメインブラウザーで機能します。驚きがあります！ CSSサイジングと絶対的なポジショニングに関するよくある質問（FAQ）

// expands and contracts the inner box
window.onload = function() {

	var inner = document.getElementById("inner");
	var offset = 100, dir = -1;
	setInterval(function() {
		inner.style.left = inner.style.right = inner.style.top = inner.style.bottom = offset+"px";
		offset += dir;
		if (offset == 0 || offset == 100) dir = -dir;
	}, 10);
	
}

CSSの絶対位置と相対位置の違いは何ですか？CSSでは、絶対と相対は2つのタイプの位置決め方法です。絶対的な位置決めにより、要素を最も近い位置にある祖先に対して配置することができます。これは、要素がドキュメントの通常の流れから取り出され、ページレイアウトの要素用のスペースが作成されないことを意味します。一方、相対的な位置決めにより、要素を通常の位置に比べて配置することができます。これは、ポジショニングがドキュメントフローにおける要素の元の位置に関連していることを意味し、ページレイアウトにはまだスペースが保存されています。

「位置：絶対」プロパティは、CSSでどのように機能しますか？

CSSの「位置：絶対」プロパティは、通常のドキュメントフローから要素を削除し、最も近い位置にある祖先または初期含有ブロックに比べて指定された位置に配置します。位置付けられた要素は、「トップ」、「右」、「ボトム」、および「左」のプロパティを使用して移動できます。ただし、祖先の要素に「静的」以外の位置がない場合、代わりに初期含有ブロックが使用されます。これらのプロパティは、配置された要素にのみ影響を及ぼします。それらは、要素とその含有要素の1つ以上の辺の間の距離を指定します。たとえば、「Top：20px」とは、要素の上端が含まれる要素の上端から20px離れていることを意味します。

CSSは、重複する要素をどのように処理しますか？

CSSは、「z-index」プロパティを使用して重複する要素を処理します。このプロパティは、Z軸上の位置である要素のスタック順序を指定します。 「z-index」が高い「z-index」のある要素が、「z-index」が低い要素の前に表示されます。 CSSの「幅」と「最大幅」の違いは何ですか？

CSSの「幅」プロパティは、要素のコンテンツ幅を指定します。一方、「最大幅」プロパティは、コンテンツが指定された幅よりも大きいときに要素が伸びる可能性がある最大幅を設定します。コンテンツが「最大幅」よりも小さい場合、コンテンツは自然なサイズのままになります。

サイズを変更するにつれて、要素をアスペクト比を維持するにはどうすればよいですか？

は、サイズを変更するにつれて要素を維持するには、CSSの「アスペクトラチオ」プロパティを使用できます。このプロパティは、ボックスのアスペクト比を定義します。これは、幅の高さの比率です。たとえば、「アスペクト比：16 /9」は16：9のアスペクト比を維持します。

以上がCSSの絶対要素をサイジングする2つの方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。