div centering_html/css_WEB-ITnose の問題-htmlチュートリアル-php.cn

div centering_html/css_WEB-ITnose の問題

WBOY

リリース： 2016-06-21 08:56:46

オリジナル

1853 人が閲覧しました

div {
マージン: 自動;
上: 0;
右: 0;
幅: 100px;
高さ: 100px;
border:1px 実線の赤;
は div、幅: 100px; 高さ: 100px の赤を生成します。画面の真ん中にあるという点が理解できません。なぜ次のことができないのですか？
div {
マージン: 自動;
上: 0;
幅: 100px;
border:1px 赤一色;

ディスカッションに返信(解決済み)

質問 1

上: 0;

左: 0; 上: 0; 右: 0 bottom: 0;

質問 2 なぜ

margin: auto を

top: 0; に置き換えることができないのですか;
right: 0
bottom: 0;

ブラウザを開いて、ブラウザのビューポートのサイズを変更します。

ブロックを含む要素の定義に従って、div の位置は絶対に設定され、配置値 (leftrighttopbottom) が設定されているため、div の親には位置 " の祖先がないためです。「absolute」、「relative」、または「fixed」要素であるため、この div の包含ブロックは最初の包含ブロック、つまりルート要素 html の包含ブロックになります。コンソールで html タグを選択すると、次のことがわかります。ビューポート全体が選択されているため、この時点で最初に含まれるブロックはビューポートです。

css2.1 によると、'top' + 'margin-top' + 'border-top-width' + 'padding -top' + 'height' + 'padding-bottom' + 'border-bottom-width' + 'margin-bottom' + 'bottom' = 含まれるブロックの高さ

margin 属性を auto に設定します空白スペースを埋める
ビューポートサイズが変化すると、マージンが変化することがコンソールで確認できます。値もそれに応じて変化します。

質問 1:

left 属性と top 属性のみがある場合、次のようになります。マージン属性は自動であり、何の役割も果たしません

左右または上下のみが設定されますマージンが自動の場合、左と右または上下のスペースは左の効果を実現するために埋められます属性 0、右側の属性 0、上部の属性 0、および下部の属性 0。それ以外の場合、div は 100*100 程度の大きさしかなく、左側が 0、右側が 0 の効果を実現することは不可能です。マージンを追加するだけで、ドキュメントフロー内で占有されるスペースが増加します

<html>	<head>		<style type="text/css">		div {			margin: auto;			position: absolute;			right: 0;			bottom: 0;			top: 0;			left: 0;			width: 100px;			height: 100px;			border:1px solid red;			}		</style>	</head>	<body>		<div></div>	</body></html>

ログイン後にコピー

質問 2:
配置値 (leftrighttopbottom) を設定しない場合は、質問 1 と同じです。この時点では、margin 属性は auto であり、何の役割も果たしません。

ブラウザを開き、ブラウザのビューポートのサイズを変更すると、まだ中央にあることがわかります。

div は絶対位置に設定され、ブロックを含む要素の定義に従って、div の親には位置が「絶対」、「相対」、または「固定」の祖先要素がないため、配置値 (leftrighttopbottom) が設定されます。 div の包含ブロックは、ルート要素 html の包含ブロックです。コンソールで html タグを選択すると、ビューポート全体が選択されていることがわかります。 time は、css2.1 の 'top' によるビューポート

' + 'margin-top' + 'border-top-width' + 'padding-top' + 'height' + 'padding-bottom' + 'border-bottom-width' + 'margin-bottom' + 'bottom' = 含まれるブロックの高さ

ギャップを正確に埋めるには、margin 属性を auto に設定します
ビューポートのサイズが変化すると、マージンの値もそれに応じて変化することがコンソールで確認できます。

質問 1:

left 属性と top 属性のみがある場合、margin 属性は auto であり、効果はありません。

左右または上下が設定されている場合のみ、余白が自動の場合、上下の空白は左属性0、右属性0、上属性0、下属性の影響を受けます。それ以外の場合、div は 100*100 程度の大きさしかなく、左 0 と右 0 の効果を実現することは不可能です。マージンを追加するだけで、ドキュメントフロー内で占有されるスペースが増加します

<html>	<head>		<style type="text/css">		div {			margin: auto;			position: absolute;			right: 0;			bottom: 0;			top: 0;			left: 0;			width: 100px;			height: 100px;			border:1px solid red;			}		</style>	</head>	<body>		<div></div>	</body></html>

ログイン後にコピー

質問 2:
配置値 (leftrighttopbottom) を設定しない場合は、質問 1 と同じです。この時点では、margin 属性は auto であり、何の役割も果たしません。

ドキュメントフローで占有されるスペースを増やすという上記の説明は間違っています。位置属性は絶対的なものであり、ドキュメントフローから分離されています。div が占めるスペースを増やすのがより正確です。 >