CSSの高度なレイアウトモデル例を詳しく解説

CSS には、フロー、フロート、レイヤーの 3 つのレイアウト モデルが含まれています

フロー モデル

Web ページのデフォルトのレイアウト モデルには 2 つの機能があります

1. ブロック要素は、それらが存在する要素内で上から配置されます。デフォルトではブロック要素の幅が 100% であるため、分布は順番に垂直方向に広がります。実際、ブロック要素は行の形式で位置を占めます。

<style type="text/css">
    h1,p,div{
        border:1px solid red;
    }
</style>

2. フローモデルでは、インライン要素は、それを含む要素内で左から右に水平に表示されます。

<a href="http://>www.baidu.com</a><span>hello</span><em>shit</em><strong>world</strong>

www.baidu.com hello shit world が同じ行に横に表示されます。

2. フローティングモデル FLoat

デフォルトでは任意の要素をフローティングとして定義できます。たとえば、div、p、table、img などの要素をフローティングとして定義できます。以下の 2 つの div 要素が同じ行に並んで表示されます

div{
    border:1px solid red;
    width:200px;
    height:200px;
    float:left;//从左向右排列
}
<div>hello</div>
<div>world</div>

3. レイヤーモデル Layer

は HTML 要素の正確な配置を実現できます (特にあまり使用されませんが、レイヤーモデルを部分的に使用します)いくつかの効果を実現できます)

3 つのレイヤー モデルがあります タイプ:

絶対配置: Position:absolute

要素をドキュメント フローの外にドラッグし、left、right、top、bottom 属性を使用して絶対配置を実行します位置決め属性を持つブロックを含む最も近い親を基準にして位置決めします。そのような包含ブロックが存在しない場合、それは body 要素に対して相対的、つまりブラウザ ウィンドウに対して相対的になります。

div 要素をブラウザ ウィンドウに対して右に 100 ピクセル、下に 200 ピクセル移動します

div{
    position:absolute;
    width:100px;
    height:100px;
    border:1px solid red;
    left:100px;
    top:200px;
}

相対的な設定は次のとおりです: 前の位置に対して相対的な位置: 相対

移動の方向と振幅は左、右、上です。 , 下 属性が決定され、オフセット前の位置は変更されません (図に示す位置に eh1 が表示されます。これは特に注意が必要です)。

   .div1{
    position:relative;
    width:200px;
    height:200px;
    border:1px solid red;
    left:200px;
    top:200px;
}
<span>hello world>
<div class="div1">position:relative</div>
<span>eh1<span>

固定配置:position:fixed

相対移動座標はビュー(画面内のWebページウィンドウ)そのものです。ビュー自体は固定されているため、画面上でブラウザ ウィンドウの画面位置を移動したり、ブラウザ ウィンドウの表示サイズを変更したりしない限り、ブラウザ ウィンドウのスクロール バーがスクロールしてもビューが変化することはありません。ブラウザー ウィンドウ内のビューのどこかに常に存在する

#div2{
    position:fixed;
    bottom:100px;
    right:100px;
    width:200px;
    height:200px;
    border:1px solid red;
}
<div id="div2">position:fixed</div>

ため、ブラウザー内にどれだけ多くのコンテンツがあっても、div は常にウィンドウの右下隅に表示されます。

position:absoluteとposition:relativeの組み合わせ

上記からわかるように、position:absoluteは、position:relativeを介して他の要素に対して相対的に配置できますが、次のとおりです。条件が満たされている必要があります。 ポイント:

1. 参照される要素は、位置指定された要素の親要素である必要があります

2. 参照される要素は、position: 相対

に設定されます 3. 位置指定された要素は、位置: 絶対

#div1{
 border:1px solid red;
 width:200px;
 height:200px;
 position:relative;
}
#div2{
 border:1px solid red;
 width:50px;
 height:50px;
 left:20px;
 top:20px;
 position:absolute;
}
<div id="div1">
    <div id="div2">hello</div>
</div>

これが div2 の実装方法です。 div1 を基準にして配置されます。

以上がCSSの高度なレイアウトモデル例を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。