マージンフロート背景画像の使用方法

今回は、マージンフロート背景画像の使い方と、マージンフロート背景画像を使用する際の注意事項を紹介します。実際の事例を見てみましょう。

今日は、Webページを作るときに遭遇する問題を整理してみましょう

1.背景画像を挿入し、その画像をpの一番下に行全体に配置します。

<style>
    background:url(xxx.jpg) no-repeat;
    background-position:bottom; 
    background-size:100%;</style>

属性:

background-position: 背景位置属性は、背景画像の位置を設定するために使用されます。この属性は、ブロックレベルの要素と置換要素にのみ適用できます。置換要素には、img、input、textarea、select が含まれます。

構文の値には、長さとキーワードの 2 種類があります。

ccoint' 、2 番目の値は設定されておらず、デフォルトは center です。

background-size: 背景画像のサイズを定義します。

属性値 1.length：最初の値は幅、2番目の値は高さ 最初の値のみが設定されている場合、2番目の値は自動的に「auto」に変換されます

2.パーセンテージ。 : 画像の幅と高さを親要素のパーセンテージとして設定します。最初の値は幅、2 番目の値は高さです。値が 1 つだけ設定されている場合、2 番目の値は「auto」に設定されます。

3. cover：背景画像が展開して領域を完全にカバーする（不均等比）

2.マルギンの問題

1）ICS ification )] 高さです

(2) marginとpaddingの違い

マージン: 境界線の外側にスペースを追加する必要がある場合。お互いを打ち消し合う必要があるとき。たとえば、マージンが 15px + 20px の場合、マージンは 20px になります。

Padding: 境界線の内側にスペースを追加する必要があります。必要性はこの 2 つの合計に等しい。たとえば、15 ピクセル + 20 ピクセルのパディングでは、35 ピクセルの空白スペースが生じます。

(3) inline要素の上下の余白には影響しません。

3.float問題

(1) 次のpが上のpに対して左に浮動するとき、上のpのテキストはドリフトするpの周りを回り込みます。

ドキュメントフローに関連しており、詳細は4を参照してください 要素の植字とレイアウトのプロセス中に、要素は自動的に左から右、上から下にフロー配置されます。

ドキュメントフローからの脱却とは、通常のレイアウトや組版から要素を取り除くことを意味し、ブロック要素が配置されると、その要素はフローティング要素として扱われ、存在しません。位置決めにおける絶対フロートと浮動フロートは、ドキュメント フローから切り離されます。

部分的に無視されます: float はドキュメント フローの外にありますが、他のボックスはこの要素を無視しますが、ボックス内のインライン要素は浮動位置を放棄し、その周囲に存在します。

完全に無視: 絶対は、ボックス内のインライン要素を含む他のボックスは、位置決めされた要素を完全に無視します。

マージンとフロートを同時に使用することはできません

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、注意してください。その他の関連記事は php 中国語 Web サイトにあります。

推奨読書:

スプライトを生成するためのGulpコマンド

Safariブラウザの選択ドロップダウンリストのテキストが長すぎて折り返されない

以上がマージンフロート背景画像の使用方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。