【CSSメモ7】CSSレイアウトモデル
1. CSS レイアウト モデル
CSS ボックス モデルの基本概念とボックス モデル タイプを理解したので、Web ページ レイアウトの基本モデルを詳しく説明します。レイアウト モデルは、ボックス モデルと同様、CSS の最も基本的かつ中心的な概念です。 ただし、レイアウト モデルはボックス モデルに基づいており、私たちがよく CSS レイアウト スタイルや CSS レイアウト テンプレートと呼ぶものとは異なります。レイアウト モデルが基礎である場合、CSS レイアウト テンプレートは最終的な外部表現です。
CSS には、英語で要約すると、Flow、Layer、Float という 3 つの基本的なレイアウト モデルが含まれています。
Web ページでは、要素には 3 つのレイアウト モデルがあります:
1. フロー モデル (Flow)
2. フロート モデル (Float)
3. レイヤー モデル (Layer)
流体レイアウト モデルには 2 つの典型的な特性があります:
まず、ブロック要素は垂直方向に拡張され、含まれる要素内で上から下に順番に配置されます。これは、デフォルトでは、ブロック要素の幅がすべて 100% であるためです。実際、ブロック要素は行の形式で位置を占めます。
3. フロー モデル 2
2 番目のポイント、フロー モデルの下では、インライン要素は、含まれる要素内で左から右に水平に表示されます。 (インライン要素は 1 行を占めるブロック要素ほど支配的ではありません。)
4. フローティング モデル
デフォルトではどの要素もフローティングにすることはできませんが、CSS を使用してフローティングとして定義することができます。p、p、table、img などの要素はフローティングとして定義できます。次のコードは、1 行に 2 つの p 要素を表示できます。
p{ width:200px; height:200px; border:2px red solid; float:left; } <p id="p1"></p> <p id="p2"></p>もちろん、2 つの要素を同時に右にフローティングするように設定して、1 行表示を実現することもできます。
p{ width:200px; height:200px; border:2px red solid; float:right; }左右2つの要素を設定して1行表示することはできますか？もちろん:
p{ width:200px; height:200px; border:2px red solid; } #p1{float:left;} #p2{float:right;}5. レイヤー モデルとは何ですか レイヤー レイアウト モデルとは何ですか?レイヤー レイアウト モデルは、画像ソフトウェア PhotoShop で非常に人気のあるレイヤー編集機能のようなもので、各レイヤーを正確に配置して操作することができます。しかし、Web デザインの分野では、レイヤー レイアウトは Web ページ サイズの流動性のために一般的ではありませんでした。 。ただし、Web ページ上でローカルにレイヤー レイアウトを使用することには依然として利点があります。 HTMLのレイヤーレイアウトについて学びましょう。
WebページにHTML要素を正確に配置する方法 画像ソフトPhotoShopのレイヤーと同じように、各レイヤーを正確に配置して操作することができます。 CSS は、レイヤー レイアウト モデルをサポートするための一連の配置プロパティを定義します。
レイヤーモデルには 3 つの形式があります:
1. 絶対位置決め (位置: 絶対)
2. 相対位置決め (位置: 相対)
3. レイヤーモデル: 絶対Positioning
要素のレイヤー モデルで絶対位置を設定したい場合は、position:absolute (絶対位置を示す) を設定する必要があります。このステートメントの機能は、要素をドキュメント フローの外にドラッグし、 left、right、top、bottom の相対的な属性。位置決め属性を持つブロックを含む最も近い親が絶対的に配置されます。そのような包含ブロックが存在しない場合、それは body 要素に対して相対的、つまりブラウザ ウィンドウに対して相対的になります。 次のコードは、p 要素をブラウザ ウィンドウに対して右に 100 ピクセル、下に 50 ピクセル移動できます。p{ width:200px; height:200px; border:2px red solid; position:absolute; left:100px; top:50px; } <p id="p1"></p>7. レイヤー モデル: 相対位置 レイヤー モデルで要素の相対位置を設定したい場合は、position:relative (相対位置を示す) を設定する必要があります。これにより、要素の通常のドキュメント フローが決まります。の左、右、上、下の属性。相対位置決めのプロセスでは、まず静的 (フロート) モードで要素を生成し (要素はレイヤーのように浮遊します)、次に前の位置に対して相対的に移動します。移動の方向と振幅は左と右によって決まります。 、top、bottom 属性では、オフセット前の位置は変更されません。
次のコードは、前の位置に対して下に 50 ピクセル、右に 100 ピクセル移動します。
#p1{ width:200px; height:200px; border:2px red solid; position:relative; left:100px; top:50px; } <p id="p1"></p>「オフセット前の位置は変更されない」とはどういう意味ですか? 実験を行って、span タグにテキストを書き込むことができます。次のコード:
<body> <p id="p1"></p><span>偏移前的位置还保留不动，覆盖不了前面的p没有偏移前的位置</span> </body>
p 要素は前の位置に対してオフセットされますが、p 要素の前の位置は保持されるため、後続のspan 要素は p 要素の前の位置の後ろに表示されます。
八、层模型：固定定位
fixed：表示固定定位，与absolute定位类型类似，但它的相对移动的坐标是视图（屏幕内的网页窗口）本身。由于视图本身是固定的，它不会随浏览器窗口的滚动条滚动而变化，除非你在屏幕中移动浏览器窗口的屏幕位置，或改变浏览器窗口的显示大小，因此固定定位的元素会始终位于浏览器窗口内视图的某个位置，不会受文档流动影响，这与background-attachment:fixed;属性功能相同。以下代码可以实现相对于浏览器视图向右移动100px，向下移动50px。并且拖动滚动条时位置固定不变。
#p1{ width:200px; height:200px; border:2px red solid; position:fixed; left:100px; top:50px; }
<p>文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本。</p> ....九、relative和absolute组合使用
使用position:absolute可以实现被设置元素相对于浏览器（body）设置定位以后，大家有没有想过可不可以相对于其它元素进行定位呢？答案是肯定的，当然可以。使用position:relative来帮忙，但是必须遵守下面规范：
1、参照定位的元素必须是相对定位元素的前辈元素：
<p id="box1"><!--参照定位的元素--> <p id="box2">相对参照元素进行定位</p><!--相对定位元素--> </p>
从上面代码可以看出box1是box2的父元素（父元素当然也是前辈元素了）。
2、参照定位的元素必须加入
position:relative; #box1{ width:200px; height:200px; position:relative; }3、定位元素加入position:absolute，便可以使用top、bottom、left、right来进行偏移定位了。
#box2{ position:absolute; top:20px; left:30px; }这样box2就可以相对于父元素box1定位了（这里注意参照物就可以不是浏览器了，而可以自由设置了）。
以上就是【CSS笔记七】CSS布局模型的内容，更多相关内容请关注PHP中文网（www.php.cn）！
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7504
15
1378
52
78
11
19
55
ブートストラップにスプリットラインを書く方法
Apr 07, 2025 pm 03:12 PM
ブートストラップスプリットラインを作成するには2つの方法があります。タグを使用して、水平方向のスプリットラインを作成します。 CSS Borderプロパティを使用して、カスタムスタイルのスプリットラインを作成します。
ブートストラップに写真を挿入する方法
Apr 07, 2025 pm 03:30 PM
ブートストラップに画像を挿入する方法はいくつかあります。HTMLIMGタグを使用して、画像を直接挿入します。ブートストラップ画像コンポーネントを使用すると、レスポンシブ画像とより多くのスタイルを提供できます。画像サイズを設定し、IMG-Fluidクラスを使用して画像を適応可能にします。 IMGボーダークラスを使用して、境界線を設定します。丸い角を設定し、IMGラウンドクラスを使用します。影を設定し、影のクラスを使用します。 CSSスタイルを使用して、画像をサイズ変更して配置します。背景画像を使用して、背景イメージCSSプロパティを使用します。
HTML、CSS、およびJavaScriptの役割：コアの責任
Apr 08, 2025 pm 07:05 PM
HTMLはWeb構造を定義し、CSSはスタイルとレイアウトを担当し、JavaScriptは動的な相互作用を提供します。 3人はWeb開発で職務を遂行し、共同でカラフルなWebサイトを構築します。
ブートストラップのフレームワークをセットアップする方法
Apr 07, 2025 pm 03:27 PM
Bootstrapフレームワークをセットアップするには、次の手順に従う必要があります。1。CDNを介してブートストラップファイルを参照してください。 2。独自のサーバーでファイルをダウンロードしてホストします。 3。HTMLにブートストラップファイルを含めます。 4.必要に応じてSASS/LESSをコンパイルします。 5。カスタムファイルをインポートします（オプション）。セットアップが完了したら、Bootstrapのグリッドシステム、コンポーネント、スタイルを使用して、レスポンシブWebサイトとアプリケーションを作成できます。
ブートストラップボタンの使用方法
Apr 07, 2025 pm 03:09 PM
ブートストラップボタンの使用方法は？ブートストラップCSSを導入してボタン要素を作成し、ブートストラップボタンクラスを追加してボタンテキストを追加します
ブートストラップの日付を表示する方法
Apr 07, 2025 pm 03:03 PM
回答：ブートストラップの日付ピッカーコンポーネントを使用して、ページで日付を表示できます。手順：ブートストラップフレームワークを紹介します。 HTMLで日付セレクター入力ボックスを作成します。ブートストラップは、セレクターにスタイルを自動的に追加します。 JavaScriptを使用して、選択した日付を取得します。
VueでBootstrapの使用方法
Apr 07, 2025 pm 11:33 PM
vue.jsでBootstrapを使用すると、5つのステップに分かれています。ブートストラップをインストールします。 main.jsにブートストラップをインポートしますブートストラップコンポーネントをテンプレートで直接使用します。オプション：カスタムスタイル。オプション：プラグインを使用します。
