CSS3レイアウトモデルにはどのような種類がありますか?

css3 レイアウト モデルには 3 つのタイプがあります: 1. デフォルトの Web ページ レイアウト モードであるフロー モデル (Flow)、2. float 属性によって制御されるフロート モデル (Float)、3.レイヤーモデル(Layer)には「相対位置決め」「絶対位置決め」「固定位置決め」の3つの形式があります。

このチュートリアルの動作環境: Windows 7 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。

CSS3 には、英語で要約すると、Flow、Layer、Float という 3 つの基本的なレイアウト モデルが含まれています。

Web ページでは、要素には 3 つのレイアウト モデルがあります。

• フロー モデル (Flow)

• フロート モデル (Float)

• #レイヤーモデル(Layer)

1.フローモデル(Flow)

フロー モデルは、デフォルトの Web ページ レイアウト モードです。つまり、デフォルト状態の Web ページの HTML Web 要素は、フロー モデルに従って Web ページのコンテンツを配信します。

流体レイアウト モデルには、2 つの典型的な特性があります。

まず、ブロック要素は、含まれている要素内で上から下に順番に垂直に拡張され、分散されます。ブロック要素の割合は 100% です。実際、ブロック要素は行の形式でその位置を占めます。

(各付箋には元のデフォルトの幅と高さが表示されます)

2 番目のポイント、フロー モデルの下で、インライン要素は、含まれる要素内で左から右に移動します。水平方向の分布表示。 (インライン要素はブロック要素ほど支配的ではなく、1 行を占有します)

2. Float モデル (Float)

任意の要素は、デフォルト 下部はフローティングできませんが、CSS を使用してフローティングとして定義できます。

div{float:left;}　
div{float:right;}

レイアウトする div ごとに異なるフローティング メソッドを設定できます。

3. レイヤー モデル (レイヤー)

レイヤー モデルには 3 つの形式があります:

1. 相対位置 (

position:相対)

2.絶対位置 (

position:absolute)

3.固定位置 (

position:fixed) )

相対位置

レイヤー モデルで要素の相対位置を設定する場合は、

position:relative を設定する必要があります。 (相対位置を示します)。通常のドキュメント フロー内の要素のオフセット位置を、left、right、top、bottom 属性によって決定します。

前の位置を基準にして移動します。オフセット前の位置は変更されません。相対配置を使用する場合、要素がオフセットされていても、オフセットされる前のスペースを占有します。

 .div1 {
            width: 100px;
            height: 100px;
            border: 1px solid red;
        }

        .div2 {
            width: 100px;
            height: 100px;
            border: 1px dashed blue;
            position: relative;
            top: 100px;
            left: 100px;
        }
    <div class="div1"></div>
    <div class="div2"></div>

ここの青い点線のボックスは、相対値の使用を示しています。上と左をそれぞれ 100 ピクセルに設定すると、元の位置に対して下と右に 100 ピクセル移動することになります。つまり、要素の元の位置は、現在の位置の左上 100 ピクセルです。

絶対配置

レイヤー モデルで要素の絶対配置を設定したい場合は、position:absolute (絶対配置を示す) を設定する必要があります。 ) 要素をドキュメントから削除します。要素をフローの外にドラッグし、left、right、top、bottom 属性を使用して、位置決め属性を持つブロックを含む最も近い親を基準とした絶対位置決めを実行します。

そのような包含ブロックがない場合 (つまり、その前の div に位置決め属性が設定されていない場合)、それは body 要素に対して、つまりブラウザ ウィンドウに対して相対的になります。

絶対配置に設定された要素は、ドキュメント フロー内のスペースを占有しません。要素が絶対配置に設定されている場合、ドキュメント フロー内のその位置は削除されます。

z インデックスによる積み重ね順序。

絶対配置では、要素がドキュメント フローから外されるため、スペースを占有しません。通常のドキュメント フロー内の要素のレイアウトは、絶対配置要素が存在しない場合と同じです。他の要素はそのままです。ドキュメント フロー内の要素は無視され、元のスペースが埋められます。絶対配置ボックスはドキュメント フローから独立しているため、ページ上の他の要素を覆うことができます。

        .div1 {
            width: 300px;
            height: 300px;
            background: red;
            position: absolute;
            top: 100px;
            left: 100px;
        }
            <div class="div1"></div>

ここで設定したのはtopとleftなので、このときのpositioning属性はブラウザの左上を原点とします。上と左を設定します。右はブラウザの右上隅を原点とすることを意味し、他のすべてにも同じことが当てはまります。

固定配置

固定: 絶対配置タイプと同様に固定配置を示しますが、相対移動座標はビュー (画面内の Web ページ ウィンドウ) そのものです。 。ビュー自体は固定されているため、ブラウザ ウィンドウのスクロールバーがスクロールしても変化しません。

        .div1 {
            width: 100%;
            height: 10000px;
            border: 1px solid red;
        }

        .div2 {
            width: 100px;
            height: 100px;
            border: 1px dashed blue;
            position: fixed;
            top: 100px;
            left: 100px;
        }
     <div class="div1">
        <div class="div2"></div>
    </div>

固定位置とは、スクロール バーが変化しても位置が変わらないことを意味します。

RELATIVE と ABSOLUTE を組み合わせて使用​​する

ルール:

1. 参照位置にある要素は、相対位置にある要素の先行要素である必要があります

2. 参照位置決め要素は、position:relative;

3. 位置決め要素は、position:Absolute で追加する必要があります; オフセットには、上、左、右、下を使用します。

(学習ビデオ共有: css ビデオ チュートリアル)

以上がCSS3レイアウトモデルにはどのような種類がありますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。