CSSレイアウトモデルとは何ですか? CSSの3つのレイアウトモデルの紹介

この記事では、CSS レイアウト モデルとは何ですか? 3 つの CSS レイアウト モデルの紹介は、参考になると思います。

フローモデル(フロー)

デフォルトのWebページレイアウトモード
* ブロック要素は、含まれる要素内で上から下の順に垂直方向に拡張されて配置されます
* インライン要素は、含まれる要素内で左から右に水平に表示されます

フローティングモデル(float)

デフォルトではどの要素もフローティングにできませんが、CSSでフローティングとして定義できます

两个 div 元素一行
div{
    width:200px;    
    height:200px;    
    border:2px red solid;    
    float:left;
    }
 <div id="div1"></div>
<div id="div2"></div>

设置两个元素 右浮动 实现一行 
float:right;
div{
    width:200px;    
    height:200px;    
    border:2px red solid;    
    float:right;
    }

设置两个元素一左一右
div{
    width:200px;    
    height:200px;    
    border:2px red solid;
    }
#div1{float:left;}
#div2{float:right;}

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

レイヤーモデルの3つの形式:
- 絶対位置決め (位置: 絶対)
- 相対位置決め (位置: 相対)
- 固定配置 (位置:固定)

レイヤーレイアウトモデルは、画像ソフトウェアPhotoShopで非常に人気のあるレイヤー編集機能と同様に、各レイヤーを正確に配置して操作できます

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

实现div元素相对于浏览器窗口向右移动100px，向下移动50px。
div{
    width:200px;    
    height:200px;    
    border:2px red solid;    
    position:absolute;    
    left:100px;    
    top:50px;
    }
    <div id="div1"></div>

2. 相対位置

position: 相対 (相対位置を示す)、left、right、top、bottom 属性を通じて通常のドキュメント フロー内の要素のオフセット位置を決定します。相対位置決めのプロセスでは、まず静的 (フロート) モードで要素を生成し (要素はレイヤーのように浮遊します)、次に前の位置に対して相対的に移動します。移動の方向と振幅は左と右によって決まります。 、top、bottom 属性では、オフセット前の位置は変更されません。

相对于以前位置向下移动50px，向右移动100px;
#div1{
    width:200px;    
    height:200px;    
    border:2px red solid;    
    position:relative;    
    left:100px;    
    top:50px;
    }
<div id="div1"></div>

3. 固定位置

fixed: 絶対位置タイプと同様に固定位置を示しますが、その相対移動座標はビュー (画面内の Web ページウィンドウ) そのものです。ビュー自体は固定されているため、画面上でブラウザ ウィンドウの画面位置を移動したり、ブラウザ ウィンドウの表示サイズを変更したりしない限り、ブラウザ ウィンドウのスクロール バーがスクロールしてもビューが変化することはありません。常にブラウザ ウィンドウ内のビューの特定の位置にあり、ドキュメントの流れに影響されません。これは、background-attachment:fixed 属性と同じ機能を持ちます。

相对于浏览器视图向右移动100px，向下移动50px。并且拖动滚动条时位置固定不变。
#div1{
    width:200px;   
     height:200px;    
        border:2px red solid;   
        position:fixed;    
        left:100px;    
        top:50px;
}
<p>文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本。</p> 
....

4. Relative を Absolute と組み合わせて使用​​します

css+div レイアウト (1) - css+div は、テーブル Layout_html/css_WEB-ITnose を実装します

CSS レイアウト レイアウト モデル

以上がCSSレイアウトモデルとは何ですか? CSSの3つのレイアウトモデルの紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。