[CSS Notes 7] CSS-Layoutmodell

1. CSS-Layoutmodell
Nachdem wir die Grundkonzepte und Boxmodelltypen des CSS-Boxmodells geklärt haben, können wir uns mit dem Grundmodell des Webseitenlayouts befassen. Das Layout-Modell ist wie das Box-Modell das grundlegendste und zentralste Konzept von CSS. Das Layoutmodell basiert jedoch auf dem Boxmodell und unterscheidet sich von dem, was wir oft als CSS-Layoutstile oder CSS-Layoutvorlagen bezeichnen. Wenn das Layoutmodell die Grundlage ist, dann ist die CSS-Layoutvorlage das Ende, der externe Ausdruck.
CSS enthält drei grundlegende Layoutmodelle, die auf Englisch wie folgt zusammengefasst werden: Flow, Layer und Float.
In Webseiten gibt es drei Layoutmodelle:
1. Fließmodell (Float)
3. Ebenenmodell (Ebene)

2 , Flow-Modell 1

Lassen Sie uns zunächst über das Flow-Modell sprechen. Flow ist der Standard-Layoutmodus für Webseiten. Das heißt, die HTML-Webelemente der Webseite verteilen im Standardzustand den Webseiteninhalt gemäß dem Flussmodell.

Das Fluid-Layout-Modell weist zwei typische Merkmale auf:

Erstens werden Blockelemente vertikal erweitert und in der Reihenfolge von oben nach unten innerhalb des enthaltenden Elements verteilt, da in Standardmäßig die Breite von Blockelemente beträgt 100 %. Tatsächlich belegen alle Blockelemente Positionen in Form von Zeilen.

3. Flussmodell 2

Zweiter Punkt: Unter dem Flussmodell werden Inline-Elemente horizontal von links nach rechts innerhalb des enthaltenden Elements angezeigt. (Inline-Elemente sind nicht so dominant wie Blockelemente und belegen eine eigene Zeile)

4. Floating-Modell

Blockelemente sind so dominant, dass sie eine eigene Zeile belegen Blockelemente sollen nebeneinander angezeigt werden. Was tun? Machen Sie sich keine Sorgen, indem Sie das Element auf „Float“ setzen, kann dieser Wunsch erfüllt werden.

Elemente wie p, p, table, img usw. können standardmäßig als schwebend definiert werden. Der folgende Code kann zwei p-Elemente in einer Zeile anzeigen.

p{ width:200px; height:200px; border:2px red solid; float:left; } <p id="p1"></p> <p id="p2"></p>

Natürlich können Sie auch zwei Elemente gleichzeitig so einstellen, dass sie nach rechts schweben, um eine einzeilige Anzeige zu erreichen.

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

Kann eine Zeile angezeigt werden, indem zwei Elemente gesetzt werden, eines links und eines rechts? Natürlich:

p{ width:200px; height:200px; border:2px red solid; } #p1{float:left;} #p2{float:right;}

5. Was ist das Ebenenmodell

Was ist das Ebenenlayoutmodell? Das Ebenenlayoutmodell ähnelt der sehr beliebten Ebenenbearbeitungsfunktion in der Bildsoftware PhotoShop. Im Bereich Webdesign ist das Ebenenlayout jedoch aufgrund der Mobilität der Webseitengrößen nicht beliebt . Die lokale Verwendung des Ebenenlayouts auf einer Webseite bietet jedoch immer noch Vorteile. Erfahren Sie mehr über das Ebenenlayout in HTML.

So positionieren Sie HTML-Elemente in Webseiten genau. Genau wie die Ebenen in der Bildsoftware PhotoShop kann jede Ebene genau positioniert und bedient werden. CSS definiert eine Reihe von Positionierungseigenschaften zur Unterstützung des Ebenenlayoutmodells.

Das Ebenenmodell hat drei Formen:

1. Absolute Positionierung (Position: absolut)

Relative Positionierung (Position: relativ)

3 . Feste Positionierung (Position: fest)

6. Ebenenmodell: absolute Positionierung

Wenn Sie die absolute Positionierung im Ebenenmodell für ein Element festlegen möchten, müssen Sie position:absolute festlegen (was absolute Positionierung angibt). Positionierung) Diese Anweisung Ziehen Sie das Element aus dem Dokumentfluss und verwenden Sie dann die Attribute links, rechts, oben und unten, um es relativ zu seinem nächstgelegenen übergeordneten Block mit einem Positionierungsattribut absolut zu positionieren. Wenn kein solcher enthaltender Block vorhanden ist, ist er relativ zum Body-Element, also relativ zum Browserfenster.

Der folgende Code kann das p-Element relativ zum Browserfenster um 100 Pixel nach rechts und 50 Pixel nach unten verschieben.

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

7. Ebenenmodell: relative Positionierung

Wenn Sie die relative Positionierung im Ebenenmodell für ein Element festlegen möchten, müssen Sie position: relative (Anzeige der relativen Positionierung) festlegen left, right, top, Die Eigenschaft „bottom“ bestimmt die Versatzposition des Elements innerhalb des normalen Dokumentflusses. Der Prozess der relativen Positionierung besteht darin, zunächst ein Element im statischen (Float-)Modus zu erzeugen (und das Element schwebt wie eine Ebene) und sich dann relativ zur vorherigen Position zu bewegen. Die Richtung und Amplitude der Bewegung werden durch die linke und rechte Position bestimmt , oben und unten bleibt die Position vor dem Versatz unverändert.

Der folgende Code verschiebt sich relativ zur vorherigen Position um 50 Pixel nach unten und 100 Pixel nach rechts;

#p1{ width:200px; height:200px; border:2px red solid; position:relative; left:100px; top:50px; } <p id="p1"></p>

Was bedeutet „die Position vor dem Versatz bleibt unverändert“?

Sie können ein Experiment durchführen und Text in das Span-Tag schreiben. Der folgende Code:

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

Obwohl das p-Element relativ zu seiner vorherigen Position versetzt ist, bleibt die vorherige Position des p-Elements weiterhin erhalten, sodass das nachfolgende span-Element hinter der vorherigen Position des p angezeigt wird Element.

八、层模型：固定定位
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）！