CSSの上、右、下には、使用何0に左?これは、幅:100%、高さ:100%の違いは何ですか?

 ワン❀リード

我々はpositionプロパティを使用する場合は、必ず右、左、トップ、ボトム4つのプロパティの契約を見つけ、その後、これらの4つのプロパティが0であるものを使用するように設定し、100%の違いは何であるの幅と高さを設定していますか?この記事では、これを議論します。

 II❀左上右下に

我々は不慣れではない位置測位プロパティは、要素の位置属性を配置することができます追加、およびトップは、左、右、下のプロパティは、位置決め要素の位置を決定する注意することは二つのことを配置プロパティを使用しています:

最初のポイント、上部、左特性ような位置決めのみ位置属性と付加価値効果非静的を取る要素、すなわち、それは、固定された絶対的、相対的、粘着性のものです。

上部、左、右と下プロパティがときに、第2の、一般的に2つだけの位置決め特性に設けられた一対のような一般的なトップなどを、左が、提供される一般的に上から下に設定されていないであろう。

4を設定すると同時に、私たちの共通の値が0であるが、その値が0その4つの使用シナリオに設定されている間、2があります。

1.垂直水平方向の中央ボックスの明確な幅と高さを持っています

HTML:

< divのクラス= "親" > 
    < divのクラス= "子" > </ DIV > 
</ DIV >

CSS:

.parent { 200pxの
    高さ200pxの
    背景#1 ffb6b9
    位置相対 ; 
} 

.child { 100pxに
    高さ100pxに
    位置絶対 ; 
    トップ0 ; 0 ; 0 ; 0 ;
    背景#8ac6d1
    マージン自動 ; 
}

レンダリング:

トップを設定することにより、前提条件があるアプローチ0を中心とする4つのプロパティ要素を左側のボックスの中央を必要とするが、固定幅と高さ(PX)を有していなければならない、それ以外の場合は失敗します。四方はと相まってボックス、引っ張っに同じ力を持っているようなものだマージンを:自動ボックスの中心部に自分の目標を達成するために、ボックス内の中立位置をできるように。

2.親コンテナで満たされた箱のない幅と高さをしてみましょうありません

ポップやローディング効果を行うことで、私たちは多くの場合、コアコンテンツを強調するために、半透明のブラックマスクをポッププラスされます;とき親コンテナの幅と不確実性の高さ、マスクの幅と高さを設定することに加えて、決定することができません幅:100%、高さ:100%外部、トップ設定、右0が第二の特性は、4つのプラクティスです。

.child { 
    位置絶対
    トップ0 ; 0 ; 0 ; 0 ; 
    背景RGBA(0,0,0,0.2) 
}

このようなビューは、一見何の問題は、それを埋めることができ、親コンテナの100%に高いと広いではありませんか?

 トリプル❀トップ:0、左:0、右:0、下:0幅:100%、高さ:100違いは何ですか

ビューの実現の観点から、2つのアプローチは箱のない幅と高さが完全に親コンテナを満たさないことができます。

しかし、サブコンテナは、100%の幅と高さは、親コンテナの幅と高さから継承し、常にいくら子供の親コンテナ船の親コンテナの百パーセントということです設定します。

トップ設定:0、左:0、右:0、下:0本質的な目的は、四辺親コンテナピッチ0と明確な幅と高さが存在しないサブケースは、完全に充填天然の親コンテナに延伸されたサブボックスを可能にすることですA。垂直に上記に関しては、水平方向の中央された箱は、幅と高さのための明確な理由を持っている必要がありますように理由です。

そこでここでは、我々は0一般的な使用シナリオ(実際には、これを書いていないから始まるが、遭遇した問題を再現することはできません...)、水この記事の記事の最後として、左上を、知っています。

おすすめ

転載: www.cnblogs.com/echolun/p/11353627.html