背景、フローティング、位置決めに関するフロントエンド_html/css_WEB-ITnose

背景。要素の背景表示領域はコンテンツ領域とパディング領域にあり、背景に枠線が描画されます。これは、境界線のスタイルが点線の場合、境界線の隙間の間に背景が見えることを意味します。

背景を設定できるステートメントには、background-color、background-image、background-position、background-repeat、background-attachment、background-origin などがあります。

まず、background-color は、その名前が示すように、背景の単色を設定します。この背景の単色は、背景パターンがある場合、その下に配置されます。背景パターン。受け入れられる値は、キーワード、16 進数表現、または rgba 表現です。ただし、背景には背景画像 (background-image) を設定する方が一般的です。背景画像には、相対アドレスまたは絶対アドレスを指定できます。複数の URL をインポートする場合は、各 URL をカンマで区切る必要があります。最初にインポートされた URL が常に先頭になります。たとえば、background-image: url (1.jpg), url (2.jpg); は、background-image と同様に、ブロック レベル要素とインライン要素に適用できます。背景画像が比較的小さく、要素のコンテンツ領域とパディング領域を完全に埋めていない場合、背景画像に繰り返し効果を設定できます。対応するスタイル属性は、background-repeat です。 background-repeatで取得できる値はrepeat、repeat-x、repeat-y、no-repeatです。デフォルトでは、background-repeat のデフォルト値はrepeatであり、水平方向と垂直方向の両方で繰り返されます。繰り返しは特定の画像から開始する必要があります。この画像は元の画像と呼ばれ、繰り返しがない場合の背景画像の位置を示します。要素の背景コンテキスト内のどこにでも配置できます。この元の画像の位置を設定する属性は、background-position です。この属性の値は、キーワード (上、左、右) または数値またはパーセンテージにすることができます。これらの値は、デフォルトでは、上部の内側の境界線と相対的に実装されます。左内側の境界線。この参照の境界を変更するには、background-origin 属性を使用する必要があります。この属性は、content-box|border-box|padding-box の 3 つのキーワードの値をそれぞれ指定します。 . コンテンツ領域内、パディング領域内、または境界領域内にある領域。基準境界を使用すると、background-position は独自の値に基づいて元の画像の位置を計算できます。この位置は、オフセット ポイントから左境界と上境界までの距離に基づいて配置されます。境界までの距離が計算されるポイント。背景位置の値では、値のオフセット点は画像の左上隅になります。キーワードにはオフセット ポイントがありません。単に画像全体を左上隅または右下隅に完全に配置します。パーセント オフセット ポイントは固定されておらず、そのオフセット ポイントも独自のパーセント値に基づいて計算されます。つまり、パーセント値は要素と元の画像の両方に適用されます。背景添付は非常に単純で、背景画像を文書と一緒にスクロールするかどうかを設定するだけです。

浮遊。すべての要素はフロート化できます。要素がフロート化されると、その要素はブロックレベルの要素になり、その幅は可能な限り狭くなります。これは、ドキュメント フローから要素を切り離す 2 つの方法のうちの 1 つで、2 つのブロック レベルの要素を並べて表示できるようになります。他の多くの場所で述べたように、要素がフローティングされると、実際にはドキュメント フローから半分切り離された状態になります。ここでの半切り離されたドキュメント フローは、まず、ドキュメント フローから切り離されることを意味します。これは、フローティング要素が、後続要素を含むコンテンツ領域のスペースを占有しないことを意味します。ブロックはその存在を認識できないため、後続の要素がその位置を適切に占めるか、親要素の高さが変更されます。 「半分」という言葉は、この浮遊要素が位置決めなど他の要素の存在を感じさせず、他の要素に影響を与えないことを意味します。まず第一に、この浮動要素はその包含ブロックを超えることはできません (包含ブロックはその最も近いブロックレベルの祖先要素です)。第二に、他の要素は浮動要素の位置に影響を与えます (特に上方に浮動している場合)。フローティング要素 他の要素のコンテンツは相互に存在を感知できるため、ドキュメント フローから半分離されます。同時に、包含ブロック内のすべてのフローティング要素は同じドキュメント フロー内にあります。つまり、それらの間のパディング、ボーダー、マージンはすべて相互に有効であり、マージンはマージされません。 、

浮動小数点スタイルは float として宣言され、有効な値は right と left の 2 つだけです。これら 2 つの値は、要素の水平移動の一般的な方向 (左または右) を設定します。しかし、これは垂直方向に動かないという意味ではなく、少し例を書いてみると、浮いている要素は常に上に移動する傾向があることがわかります。これは、浮いている要素が常に上に移動することを意味します。デフォルトでは修正できません。これは、浮動要素が少し複雑な点でもあります。浮動要素は前の要素と後続の要素を異なる方法で処理し、CSS 仕様も浮動要素の上方への移動に多くの制限を課しているため、さまざまな状況が発生します。フローティング要素は、常に前の要素の存在を感じることができます (これが、ドキュメント フローから半分離される理由の 1 つです)。たとえば、フローティング要素の上にブロックレベルの要素がある場合、その要素は感じられません。逆に、後続のブロックレベル要素は浮動要素の存在を感じずに上に移動し、浮動要素によって覆われません (2 番目の理由)。文書の流れから半切り離されているため）。そのため、float 要素は、その前の要素に対して inline-block のように動作します。前に要素がない場合、フローティング要素は、それを含むブロックのコンテンツ領域の頂点まで移動します (ドキュメント フローから半分離される 3 番目の理由)。上向きにフローティングする場合のもう 1 つの注意点は、フローティング要素の上部が、それまでのすべてのフローティング要素の上部よりも高くなることはできないということです

3 つのフロートが左側に、1 と 2 が右側にフロートされるのと同様に、3 つのフローティング要素の上部も高くすることはできません。前のフローティング要素 1 と 2 の上部よりも高くする必要があります。上部の方が高いため、3 の上にスペースがあっても 2 としか整列されません。

結局のところ、フローティングはドキュメントの流れからある程度切り離されており、親要素のコンテンツ領域はその存在を感じられないため、親要素の高さが短くなり、フローティング要素の部分が実行される可能性があります親要素の外側にあると、望ましくない結果が生じます。

このとき、clear属性を使用する必要があります。 clear は、ブロックレベルの要素に対してのみ動作します。その機能は、コンテンツがフローティング要素を囲むのを防ぐことです。これは、フローティング要素が、クリアフロートが設定されたコンテンツに対してブロックレベルの要素のように動作するようにすることです。次の行をフローティングします。このようにして、親要素の高さを高くして、フローティング要素が完全に親要素内に収まるようにすることができます。一般的な書き方は、親要素 .cleafix::after {content:'.';display:block;visiable:hidden;overflow:hidden;height:0;clear:both;} にスタイルを追加することです

ポジショニング。フローティングに比べて、配置は比較的明確です。これは、ドキュメント フローから要素を削除する 2 番目の方法であり、要素を配置したい場所に配置します。 CSS では、位置決めが関係する場合、通常は参照があり、position も例外ではありません。relative|absolute|fixed の 3 つの値があり、これら 3 つのそれぞれに位置決めの参照があります。参照オブジェクトの位置決めに適用されるサポート属性は、top、right、bottom、left、z-index です。これらの属性は、位置を設定せずに使用すると機能しません。各属性の意味は、位置決め要素の対応する辺と参照オブジェクトの対応する辺の間の距離であり、値は負の場合もあります。異なる位置には異なる参照があるだけでなく、独自の固有のプロパティもいくつかあります。

まず位置：相対位置決め この位置決めを相対位置決めといいます。要素が相対配置に設定されている場合、要素はドキュメント フロー内に留まり、親要素のコンテンツ領域や他の要素は通常のドキュメント フローと同様にその存在を感じることができます。唯一の違いは、z-index レベルが他の要素よりも高いことです。このとき、元の位置が位置決め基準オブジェクトとなり、設定されているtopやrightなどの属性は元の位置を基準とした相対値となります。位置決めされた要素が元の位置に対してオフセットされている場合、その要素は隣接する要素を上書きし、元の位置空間は変更されません。この位置決めは通常、絶対位置決めの基準として使用されます。

position: 絶対位置決め方法。このような配置が絶対配置になると、その要素はドキュメントフローから完全に外れてしまうため、親要素の高さが小さくなる場合があります。他の要素の高さは小さくなり、要素は元の位置を占め、その幅がコンテンツの幅になります。この時点では、元の要素の種類に関係なく、フローティングと同様のブロック レベルの要素になります。その位置決めの参照は、最初に配置された祖先要素またはルート要素であるため、親要素に対して相対的に配置する場合は、親要素を相対に設定します。ドキュメント フローから完全に分離されたこの種の要素は、フローティング要素と同じ制約に束縛されず、どこにでも配置できます。

position: 固定配置方法は、参照オブジェクトがブラウザ ウィンドウであることを除いて、絶対配置方法と似ています。

最後の点は、配置された要素の幅または高さが設定されていない場合があり、配置中に右、左、上、下のプロパティが同時に設定されるということです。この場合、配置された要素は広がったり盛り上がったり。