HTML学習（6）：CSSレイアウトモデル

1. CSSレイアウトモデル

CSSボックスモデルの基本概念とボックスモデルのタイプを理解しているので、Webページレイアウトの基本モデルを掘り下げることができます。ボックスモデルと同様に、レイアウトモデルはCSSの最も基本的で中心的な概念です。ただし、レイアウトモデルはボックスモデルに基づいており、よく言われるCSSレイアウトスタイルやCSSレイアウトテンプレートとは異なります。レイアウトモデルがこれである場合、CSSレイアウトテンプレートは最後であり、式の外部形式です。
CSSには、3つの基本レイアウトモデルが含まれています。英語で要約すると、フロー、レイヤー、フロートです。
Webページには、要素の3つのレイアウトモデルがあります。

フローモデル（Flow）
フローティングモデル（Float）
レイヤーモデル（レイヤー）

3つのレイアウトモデルは正確には何ですか？次のセクションでは、詳細を紹介します。

2.フローモデル（1）

まず、フローモデルについて説明します。フローは、デフォルトのWebページレイアウトモードです。つまり、ページのデフォルト状態のHTMLページ要素は、フローモデルに従って配布されます。

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

1つ目のポイントは、デフォルトの状態ではブロック要素の幅が100％であるため、ブロック要素が上にある要素から下に向かって含まれている要素内で垂直方向に拡張されることです。実際、ブロック要素は行の位置を占めます。たとえば、右側のコードエディターの3つのブロック要素タグ（div、h1、p）の幅は100％と表示されます。

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>流动模式下的块状元素</title>
<style type="text/css">
#box1{
    width:300px;
    height:100px;
}
div,h1,p{
    border:1px solid red;
}
</style>
</head>
<body>
    <div id="box2">box2</div><!--块状元素，由于没有设置宽度，宽度默认显示为100%--> 
    <h1>标题</h1><!--块状元素，由于没有设置宽度，宽度默认显示为100%--> 
    <p>文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段。</p><!--块状元素，由于没有设置宽度，宽度默认显示为100%--> 
    
    <div id="box1">box1</div><!--块状元素，由于设置了width:300px，宽度显示为300px-->
</body>
</html>

ここに画像の説明を挿入

3.フローモデル（2）

次に、フローモデルでは、インライン要素は、含まれている要素内で左から右に水平に表示されます。（インライン要素は、ブロック要素としてそれほど支配的で排他的ではない場合があります）

インライン要素のラベルには、右側のコードエディターでa、span、em、およびstrongがすべてインライン要素です。

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>流动模式下的内联元素</title>
<style type="text/css">

</style>
</head>
<body>
    <a href="http://www.imooc.com">www.imooc.com</a><span>强调</span><em>重点</em>
    <strong>强调</strong>
</body>
</html>

ここに画像の説明を挿入

4.フローティングモデル

ブロック要素は非常に横暴なため、すべて1行で表示されます。2つのブロック要素を並べて表示したい場合はどうでしょうか。心配しないで、この欲求を達成するために要素をフロートに設定します。

どの要素もデフォルトではフローティングできませんが、CSSを使用してフローティングとして定義できます。div、p、table、imgなどの要素はフローティングとして定義できます。次のコードでは、2つのdiv要素を続けて表示できます。

div{
    width:200px;
    height:200px;
    border:2px red solid;
    float:left;
}
<div id="div1"></div>
<div id="div2"></div>

エフェクト画像：
ここに画像の説明を挿入
もちろん、2つの要素を同時にフローティングに設定したり、1行を表示したりすることもできます。

div{
    width:200px;
    height:200px;
    border:2px red solid;
    float:right;
}

効果画像：
ここに画像の説明を挿入
別の友人が尋ねました、1行表示を実現するために、左と右の2つの要素を設定できますか？もちろん：

div{
    width:200px;
    height:200px;
    border:2px red solid;
}
#div1{float:left;}
#div2{float:right;}

効果画像：
ここに画像の説明を挿入

5.レイヤーモデル

レイヤーレイアウトモデルとは何ですか？レイヤーレイアウトモデルは、画像ソフトウェアPhotoShopで非常に人気のあるレイヤー編集機能に似ています。各レイヤーは正確に配置できますが、Webデザインの分野では、Webページのサイズのアクティビティのため、レイヤーレイアウトは一般的ではありません。ただし、Webページでローカルにレイヤーレイアウトを使用すると便利です。HTMLのレイヤーレイアウトについて学びましょう。

画像ソフトウェアPhotoShopのレイヤーと同様に、HTML要素をWebページに正確に配置する方法は、レイヤーごとに正確に配置できます。CSSは、レイヤーレイアウトモデルをサポートする一連の配置プロパティを定義します。

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

位置：絶対
相対配置（位置：相対）
位置：固定

6.レイヤーモデルの絶対配置

あなたは絶対位置の素子層モデルのために設定したい場合は、設定する必要があり位置：絶対（絶対位置を表す）、この文の役割は、ドキュメントフローの要素からドラッグして、使用されるleft、right、top、bottom場所属性とその最も近いにプロパティを相対親には絶対配置用のブロックが含まれています。そのような包含ブロックがない場合、それはbody要素に相対的です。つまり、ブラウザウィンドウに相対的です。

たとえば、次のコードでは、div要素をブラウザウィンドウに対して100ピクセル右に、50ピクセル下に移動できます。

div{
    width:200px;
    height:200px;
    border:2px red solid;
    position:absolute;
    left:100px;
    top:50px;
}
<div id="div1"></div>

効果は次のとおりです。
ここに画像の説明を挿入

7.レイヤーモデル相対配置

要素のレイヤーモデルの相対位置を設定position:relative（表示相对定位）する場合は、それを設定する必要がありleft、right、top、bottomます。これにより、属性を介した通常のドキュメントフローでの要素のオフセット位置が決まります。相対配置のプロセスは、最初にstatic(float)要素を生成し（そして要素をレイヤーのようにフロートさせ）、前の位置に対して相対的に移動します。移動の方向と振幅は、オフセットの前に、左、右、上、下の属性によって決定されます。そのまま残ります。

次のコードは、前の位置から50ピクセル下に移動し、100ピクセル右に移動することを実装しています。

#div1{
    width:200px;
    height:200px;
    border:2px red solid;
    position:relative;
    left:100px;
    top:50px;
}

<div id="div1"></div>

効果図：それ
ここに画像の説明を挿入
は何“偏移前的位置保留不动”と呼ばれていますか？

実験を行い、右側のコードエディターの19行のdiv後にspanラベルを追加して、ラベルにspanテキストを書き込むことができます。次のコード：

<body>
    <div id="div1"></div><span>偏移前的位置还保留不动，覆盖不了前面的div没有偏移前的位置</span>
</body>

エフェクト画像：
ここに画像の説明を挿入
div要素は前の位置からオフセットされていますが、div要素の前の位置は保持されているため、次のspan要素はdiv要素の前の位置に表示されています。後ろ。

8.レイヤーモデル固定配置

fixed：absolute位置決めタイプと同様に、固定位置決めを示しますが、その相対移動座標はビュー（画面上のWebページウィンドウ）自体です。ビュー自体は固定されているため、画面上のブラウザウィンドウの位置を移動したり、ブラウザウィンドウの表示サイズを変更したりしない限り、ブラウザウィンドウのスクロールバーで変更されないため、固定された配置要素は常に配置されますブラウザウィンドウ内のビューの特定の位置はbackground-attachment:fixed;、属性関数と同じように、ドキュメントフローの影響を受けません。次のコードは、ブラウザービューに対して100px右に、50px下に移動できます。また、スクロールバーをドラッグすると位置が固定されます。

#div1{
    width:200px;
    height:200px;
    border:2px red solid;
    position:fixed;
    left:100px;
    top:50px;
}
<p>文本文本文本文本文本文本文本文本文本文本文本文本
文本文本文本文本文本文本文本文本文本文本文本文本文本
文本文本文本文本文本文本文本文本文本。</p>
....

効果画像：
レイヤーモデル固定配置

9.絶対と組み合わせた相対

友達は6つのセクションで絶対配置方法を学びました。ブラウザ（本体）に対する相対的なposition:absolute set要素の配置を使用した後、他の要素に対して相対的に配置できるかどうか考えましたか？もちろん、答えはイエスです。支援に使用しますが、次の仕様に従う必要があります。position:relative

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

<div id="box1"><!--参照定位的元素-->
    <div id="box2">相对参照元素进行定位</div><!--相对定位元素-->
</div>

上記のコードから、box1はbox2の親要素であることがわかります（もちろん、親要素は先行要素でもあります）。

2.参照される要素を位置に追加する必要があります。相対。

#box1{
    width:200px;
    height:200px;
    position:relative;        
}

3.位置決め要素の追加位置：絶対、上、下、左、右を使用して位置をオフセットできます。

#box2{
    position:absolute;
    top:20px;
    left:30px;         
}

このようにして、box2を親要素box1に対して相対的に配置できます（参照オブジェクトはブラウザではない場合がありますが、自由に設定できます）。

相対と絶対の組み合わせ

さくらんぼ~~

56件の元の記事を公開・ 23のような・ 20,000以上の訪問

プライベートの手紙の懸念