CSS のオフセットについての深い理解positioning_html/css_WEB-ITnose

× ディレクトリ [1] 位置決め [2] 包含ブロック [3] オフセット属性 [4] 絶対位置決め [5] 書式設定 [6] 自動

前述の通り

CSS には、通常のフロー、フロートおよび絶対位置決め。位置決めを使用すると、要素のボックスを通常の位置に対して、または親要素、別の要素、またはブラウザ ウィンドウ自体に対して相対的に表示する場所を正確に定義できます。ただし、要素を配置する方法と配置場所は主に、上/右/下/左の 4 つのオフセット属性に依存します。この記事では、位置決めにおけるオフセットについて詳しく説明します。

上/右/下/左

値:

パーセンテージ: 右と下の clientHeight を基準にします。 left、包含ブロックの clientWidth を基準にしています

これらのプロパティは、包含ブロックの最も近い端からのオフセットを記述します。 top は、位置決めされた要素の上部外側境界が、その要素を含むブロックの上部からどのくらい離れているかを示します。 top が正の値の場合、位置決めされた要素の上マージンは下に移動します。負の値の場合、位置決めされた要素の上マージンは、その要素を含むブロックの上に移動されます。同様に、 left は、位置決めされた要素の左マージンが、その要素を含むブロックの左境界の右 (正の値) または左 (負の値) からどのくらい離れているかを示します。正の値を指定すると、位置決めされた要素のマージン境界が包含ブロックの左境界の右に移動し、負の値を指定すると包含ブロックの左境界の左に移動します。したがって、正の値を指定すると内側へのオフセットが生じ、境界線が含まれるブロックの中心に向かって移動します。一方、負の値を指定すると外側へのオフセットが生じます。

位置決めされた要素のマージン境界がオフセットされると、要素内のすべて（マージン、ボーダー、パディング、コンテンツを含む）が位置決めプロセス中に移動するという影響があります

[注] 位置決めされた要素の境界は指定されています配置要素のマージンの外側の境界; 包含ブロックの包含領域は、包含ブロックの境界内のパディング+コンテンツ領域を参照します

絶対配置

要素が絶対的に配置される場合、文書フローから完全に削除されます。次に、その境界がオフセット プロパティ (上、左など) に従って配置され、その境界を含むブロックに対して相対的に配置されます。配置された要素は他の要素のコンテンツに流れ込むことはなく、その逆も同様です。要素が絶対的に配置されると、その子孫要素に対して包含ブロックが作成されます

[注意] ドキュメントがスクロール可能な場合、要素は最終的に通常のフローの特定の部分に対して相対的に配置されるため、絶対的に配置された要素も一緒にスクロールします

要素が絶対的に配置されている場合、offset プロパティは次のように動作します。

    left:0 元素的左边界(margin-left外侧)位于包含块的左边界内侧(border-left内侧)    top:0 元素的上边界(margin-rop外侧)位于包含块的上边界内侧(border-top内侧)    right:0 元素的右边界(margin-right外侧)位于包含块的右边界内侧(border-right内侧)    bottom:0 元素的下边界(margin-bottom外侧)位于包含块的下边界内侧(border-bottom内侧)<br />

    当top、right、bottom、left四个值都为auto时(即都处于默认状态时)，    left:auto 元素的左边界位于元素处于静态位置时的左边界    top:auto 元素的上边界位于元素处于静态位置时的上边界    right:auto 元素的右边界位于正好能包裹住元素的横向区域的右边界(margin-right外侧)    bottom:auto 元素的下边界位于正好能包裹住元素的纵向区域的下边界(margin-bottom外侧)

[注] 要素の静的位置とは、通常のフローにおける要素の元の位置を指します。より正確に言うと、上部の静的位置は、要素の上部境界からの距離です。含むブロックを仮想ボックスの上マージン境界まで移動します。仮想ボックスは、要素の位置属性が静的であると仮定した場合、要素の最初のボックスです。この仮想ボックスが包含ブロックの上にある場合、この値は負になります

//DEMO中，包含块的width和height都是180px，padding为10px，所以包含块的clientWidth和clientHeight都是200px

書式設定

通常のフロー要素の場合、水平書式設定の 7 つの主要な属性は、margin-left、border- の合計です。 left、padding-left、width、padding-right、border-right、および margin-right の 7 つの属性は、要素を含むブロックの幅でなければなりません。これは、多くの場合、ブロック要素の親要素の幅の値になります (ブロックレベルの要素であるため、親要素はほとんどすべてブロックレベルの要素です)。垂直方向も同様です。要素の書式設定に関する詳細な情報はここに移動します

ただし、絶対配置された要素の場合は同じではありません。その水平方向の書式設定式は次のとおりです:

left + margin-left + border-left-width + padding-left + width + padding-right + border-right-width + margin-right + right = 包含块的clientWidth

同様に、垂直方向の書式設定の式は次のとおりです:

top + margin-top + border-top-width + padding-top + height + padding-bottom + border-bottom-width + margin-bottom + bottom = 包含块的clientHeight

auto

auto 値は、実際の値と必要な合計の間のギャップを埋めるために使用されます。

水平方向で自動にできる属性は、left、margin-left、width、margin-right、right です。同様に、縦方向でautoにできる属性はtop、margin-top、height、margin-bottom、bottomです

【0 auto】

横方向の9つの値の合計がそうでない場合包含ブロックの clientWidth と等しい 縦方向の 9 つの値の合計が包含ブロックの clientHeight と等しくない場合、それは過度に制限された状況であり、一番下の値が auto

【1 auto】

水平方向と垂直方向の書式設定式に従って、auto は計算された値です

【2 auto】

margin-left と margin-right が両方とも auto の場合、margin-left と margin-right は両方とも方程式で計算された値と等しい

[注意] margin-left と margin-right が両方とも auto の場合、左右の値が等しい場合にのみ要素を水平方向に中央に表示できます。そうでない場合は、margin が表示されます。 -left と margin-right は依然として等しいですが、left と right が等しくないため、要素を水平方向に中央揃えすることはできません

margin-left または margin-right が異なり、auto の場合、値は margin-left または margin- になります。 auto の right を 0 に設定します

width と left または right が両方とも auto の場合、width は最小幅 (コンテンツの幅) に設定されます

left と right が同時に auto の場合、left は 0 に設定されます

同様に、

margin-top と margin-bottom を同時に auto にした場合、 margin-top と margin-bottom はどちらも式の計算値であり、等しくなります

【注意】 margin-top と margin-bottom の場合-bottom は同時に auto です。上部と下部の値が等しい場合にのみ、要素は垂直方向に中央揃えになります。それ以外の場合は、上部と下部が等しくないため、margin-top と margin-bottom は依然として等しくなります。要素を垂直方向に中央揃えにすることはできません

margin-top または margin-bottom が等しくない場合、同時に margin-bottom が auto ではない場合、値 auto を指定した margin-top または margin-bottom を垂直方向に中央揃えにすることはできません。は0に設定されます

高さと上下が同時に自動の場合、高さは高さの最小値(行の高さ)に設定されます

上下が同時に自動の場合、上は0に設定されます

【3 auto】

margin-leftとmargin-rightが同時にautoの場合、margin-leftとmargin-rightは両方とも0になります

margin-leftとmargin-rightが同時にautoでない場合time, margin-left or margin-right with value auto is set to 0

width, margin-left と margin-right が同時に auto の場合を除き、margin-left と margin-right は両方とも 0 に設定され、そしてwidth は式の計算値; それ以外の場合、width は最小幅 (コンテンツ幅) に設定されます

左右とも auto の場合は、left が 0 に設定されます

同様に、margin-top の場合は、

and margin-bottom が同時に auto の場合、 margin-top と margin-bottom の両方が 0 に設定されます

margin-top と margin-bottom が同時に異なり、auto の場合、値は auto になります The margin- top または margin-bottom は 0 に設定されます

height、margin-top および margin-bottom がすべて auto である場合を除き、margin-top と margin-bottom は両方とも 0 に設定され、高さは式の計算値です。それ以外の場合 以下、高さを最小の高さ(行の高さ)に設定します

上下同時に自動の場合は上を0に設定します

[4自動]

幅が自動でない場合はマージン左と margin-right は 0 に設定され、left は 0 に設定され、right は計算された値

left が auto でない場合、margin-left と margin-right は 0 に設定され、width は最小幅 (内容) に設定されますwidth )、右は計算された値

right が auto でない場合、margin-left と margin-right は 0 に設定され、width は最小幅 (コンテンツの幅) に設定され、左は計算された値

　　当margin-left不为auto时，left和margin-right被置为0，width被置为宽度最小值(内容宽度)，right为计算值

　　当margin-right不为auto时，left和margin-left被置为0，width被置为宽度最小值(内容宽度)，right为计算值

　　类似地，

　　当height不为auto时，margin-top和margin-bottom被置为0，top被置为0，bottom为计算值

　　当top不为auto时，margin-top和margin-bottom被置为0，height被置为高度最小值(行高)，bottom为计算值

　　当bottom不为auto时,margin-top和margin-bottom被置为0，height被置为高度最小值(行高)，top为计算值

　　当margin-top不为auto时，top和margin-bottom被置为0，height被置为高度最小值(行高)，bottom为计算值

　　当margin-bottom不为auto时，top和margin-top被置为0，height被置为高度最小值(行高)，bottom为计算值

【5个auto】

　　left、margin-left和margin-right被置为0，width被置为宽度最小值(内容宽度)，right为计算值

　　类似地，top、margin-top和margin-bottom被置为0，height被置为高度最小值(行高)，bottom为计算值

总结

　　auto值的赋值顺序为：margin先置0或其他值，然后宽高置为最小值，然后left/top置为0，最后right/bottom为等式计算值

　　[注意1]IE7-浏览器不支持绝对定位元素通过将上下外边距设置为auto来实现垂直居中的行为

　　[注意2]IE6-浏览器不支持绝对定位元素不设置宽度，而通过设置top/left/right/bottom来撑开宽高的行为

//DEMO中，定位元素的padding、border都为0。而父级元素也就是包含块的width和height都设为200px，边框为2px