【CSSメモ7】CSSレイアウトモデル-CSSチュートリアル-php.cn

【CSSメモ7】CSSレイアウトモデル

黄舟

リリース： 2016-12-29 13:53:14

オリジナル

1483 人が閲覧しました

1. CSS レイアウトモデル
CSS ボックスモデルの基本概念とボックスモデルタイプを理解したので、Web ページレイアウトの基本モデルを詳しく説明します。レイアウトモデルは、ボックスモデルと同様、CSS の最も基本的かつ中心的な概念です。ただし、レイアウトモデルはボックスモデルに基づいており、私たちがよく CSS レイアウトスタイルや CSS レイアウトテンプレートと呼ぶものとは異なります。レイアウトモデルが基礎である場合、CSS レイアウトテンプレートは最終的な外部表現です。
CSS には、英語で要約すると、Flow、Layer、Float という 3 つの基本的なレイアウトモデルが含まれています。
Web ページでは、要素には 3 つのレイアウトモデルがあります:
1. フローモデル (Flow)
2. フロートモデル (Float)
3. レイヤーモデル (Layer)

2. まずフローモデルについて説明します。 , フローは、デフォルトの Web ページレイアウトモードです。つまり、デフォルト状態の Web ページの HTML Web 要素は、フローモデルに従って Web ページのコンテンツを配信します。

流体レイアウトモデルには 2 つの典型的な特性があります:

まず、ブロック要素は垂直方向に拡張され、含まれる要素内で上から下に順番に配置されます。これは、デフォルトでは、ブロック要素の幅がすべて 100% であるためです。実際、ブロック要素は行の形式で位置を占めます。

3. フローモデル 2

2 番目のポイント、フローモデルの下では、インライン要素は、含まれる要素内で左から右に水平に表示されます。 (インライン要素は 1 行を占めるブロック要素ほど支配的ではありません。)

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

ブロック要素は 1 行を占めるほど支配的です。2 つのブロック要素を並べて表示したい場合はどうすればよいでしょうか。心配しないでください。要素を float に設定すると、この願いを達成できます。

デフォルトではどの要素もフローティングにすることはできませんが、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）！