ホームページ > 記事 > ウェブフロントエンド > 【CSSメモ7】CSSレイアウトモデル
【CSSメモ7】CSSレイアウトモデル
- 黄舟オリジナル
- 2016-12-29 13:53:141432ブラウズ
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）！