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

ホームページ

ウェブフロントエンド

htmlチュートリアル

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:23 AM

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

前述の通り

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

position 配置

値: static | 相対値 | 固定値 | 継承

適用対象: すべての要素

継承: なし

static: 要素ボックスが正常に生成されます。ブロックレベルの要素はドキュメントフローの一部として長方形のボックスを生成しますが、インライン要素は 1 つ以上のラインボックスを作成し、親要素内に配置します

relative: 要素ボックスは一定の距離だけオフセットされます。要素は配置されていない形状を保持し、要素が元々占有していたスペースも保持されます

絶対: 要素ボックスはドキュメントフローから完全に削除され、その要素ボックスを含むブロック (ドキュメント内の別の要素または最初の含まれるブロックである可能性があります) を基準に配置されます。。通常のドキュメントフローで要素が以前に占めていたスペースは、その要素が存在しないかのように閉じられます。ブロックレベルのボックスは、通常のフローで最初に生成されたボックスのタイプに関係なく、要素が配置された後に生成されます

修正: 要素ボックスは位置を絶対に設定するように動作しますが、その包含ブロックはビューポート自体です

[Note ] 要素の位置は通常のフロー内の位置に相対的であるため、相対位置決めは実際には通常のフロー位置決めモデルの一部と見なされます

包含ブロック

【1】ルート要素

の包含ルート要素 HTML ブロック (初期包含ブロックとも呼ばれます) は、HTML の親ドキュメントであるビューポートのサイズの長方形です。セルまたはインライン祖先ボックスのコンテンツ境界は、位置値の場合、

を構成します。が絶対である場合、包含ブロックは、位置値が静的ではない (任意のタイプでよい) 最も近い祖先要素に設定されます。

[1] この祖先がブロックレベル要素の場合、包含ブロックは次のとおりです。要素のパディング境界に設定されます。つまり、境界線で囲まれた領域です

[2] この祖先がインライン要素の場合、包含ブロックは祖先要素のコンテンツ境界に設定されます

[3] 祖先が存在しない場合、要素の包含ブロックは、最初の包含ブロック、つまりドキュメントとして定義されます

[注] 要素はその包含ブロックの外側に配置できるためです。これは、負のマージンを使用して親要素のコンテンツ領域の外側にフロート要素を浮動させるのと似ています。したがって、ここでの包含ブロックは、実際には位置決めコンテキスト、または位置決め親である必要があります

オフセット属性

3 つの位置決めメカニズムは、4 つの属性を使用して、その包含ブロックに対する位置決めされた要素の各側のオフセットを記述します。これら 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

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

HTMLタグの目的は何ですか？Apr 28, 2025 am 12:02 AM

htmltagsareSterentionforturturingwebpages、EnhinceAccessibility、seo、andporformance.1）theyclosedinagure bracketetsandinginging inpairstocreateahierarchStructure.2）semanticagslikeandimproveuserexperienceandseo.3）

自己閉鎖タグとは何ですか？例を挙げてください。Apr 27, 2025 am 12:04 AM

セルフクロージングのlandxmlareTagstatemtatemsem onedinedingsingaseparateclosingtag、SimmarifiedMarkupStructureanddendingCodingInefciency.1）areEssentionalinforementswithoutcontent、2）

HTMLを超えて：Web開発のための重要なテクノロジーApr 26, 2025 am 12:04 AM

強力な機能と優れたユーザーエクスペリエンスを備えたWebサイトを構築するには、HTMLだけでは十分ではありません。次のテクノロジーも必要です。JavaScriptは、Webページに動的とインタラクティブ性を与え、リアルタイムの変更がDOMを操作することで達成されます。 CSSは、美学とユーザーエクスペリエンスを向上させるために、Webページのスタイルとレイアウトを担当しています。 React、Vue.JS、Angularなどの最新のフレームワークとライブラリは、開発効率とコード組織構造を改善します。

HTMLのブール属性とは何ですか？いくつかの例を挙げてください。Apr 25, 2025 am 12:01 AM

ブール属性は、値なしでアクティブ化されるHTMLの特別な属性です。 1.ブール属性は、無効化された入力ボックスを無効にするなど、存在するかどうかによって、要素の動作を制御します。 2.彼らの実用的な原則は、ブラウザが異なっているときに属性の存在に応じて要素の動作を変更することです。 3.基本的な使用法は、属性を直接追加することであり、高度な使用法はJavaScriptを介して動的に制御できます。 4.一般的な間違いは、値を設定する必要があると誤って考えており、正しい執筆方法は簡潔にする必要があります。 5.ベストプラクティスは、コードを簡潔に保ち、ブールのプロパティを合理的に使用して、Webページのパフォーマンスとユーザーエクスペリエンスを最適化することです。

HTMLコードをどのように検証できますか？Apr 24, 2025 am 12:04 AM

HTMLコードは、オンラインバリデーター、統合ツール、自動化されたプロセスを使用するとクリーンになります。 1）w3cmarkupvalidationserviceを使用して、HTMLコードをオンラインで確認します。 2）リアルタイム検証のためにVisualStudiocodeにhtmlhint拡張機能をインストールして構成します。 3）HTMLTIDYを使用して、建設プロセスでHTMLファイルを自動的に検証およびクリーニングします。

HTML対CSSおよびJavaScript：Webテクノロジーの比較Apr 23, 2025 am 12:05 AM

HTML、CSS、およびJavaScriptは、最新のWebページを構築するためのコアテクノロジーです。1。HTMLはWebページ構造を定義します。2。CSSはWebページの外観に責任があります。

マークアップ言語としてのHTML：その機能と目的Apr 22, 2025 am 12:02 AM

HTMLの機能は、Webページの構造とコンテンツを定義することであり、その目的は、情報を表示するための標準化された方法を提供することです。 1）HTMLは、タイトルやパラグラフなどのタグや属性を使用して、Webページのさまざまな部分を整理しています。 2）コンテンツとパフォーマンスの分離をサポートし、メンテナンス効率を向上させます。 3）HTMLは拡張可能であり、カスタムタグがSEOを強化できるようにします。

HTML、CSS、およびJavaScriptの未来：Web開発動向Apr 19, 2025 am 12:02 AM

HTMLの将来の傾向はセマンティクスとWebコンポーネントであり、CSSの将来の傾向はCSS-in-JSとCSShoudiniであり、JavaScriptの将来の傾向はWebAssemblyとServerLessです。 1。HTMLセマンティクスはアクセシビリティとSEO効果を改善し、Webコンポーネントは開発効率を向上させますが、ブラウザの互換性に注意を払う必要があります。 2。CSS-in-JSは、スタイル管理の柔軟性を高めますが、ファイルサイズを増やす可能性があります。 CSShoudiniは、CSSレンダリングの直接操作を可能にします。 3. Webassemblyブラウザーアプリケーションのパフォーマンスを最適化しますが、急な学習曲線があり、サーバーレスは開発を簡素化しますが、コールドスタートの問題の最適化が必要です。

See all articles