Einführung in das CSS-Boxmodell und die Positionierung

Gemeinsame verwandte Attribute und Attributwerte des Box-Modells

/*基本属性*/padding: padding-left/right/top/bottom
border: border-left/right/top/bottom  border-radiusmargin: margin-left/right/top/bottom/*定位*/position                //把一个元素放在静态的static、相对的relative、绝对的absolute、固定的fixed位置中left right top bottom   //元素距原位置的左右上下的偏移量overflow                //设置元素溢出其区域发生的事情clip                    //设置元素显示的形状vertical-align          //设置元素垂直对齐的方式z-index                 //设置元素的堆叠次序/*浮动*/float    //浮动 left right none inheritclear    //去掉浮动 left right both inherit 123456789101112131415161718

CSS-Floating

Zunächst müssen Sie wissen, dass div ein Block ist. Ebenenelement und belegt eine eigene Zeile auf der Seite, von oben Die untere Anordnung ist der legendäre Fluss. Wie im Bild unten

gezeigt, können Sie sehen, dass eine Zeile auf der Seite div1 und div2 aufnehmen kann, selbst wenn die Breite von div1 sehr klein ist div2 wird nicht hinter div1 eingestuft, da sich das div-Element in einer eigenen Zeile befindet.
Beachten Sie, dass sich die oben genannten Theorien auf Divs im Standardablauf beziehen. Egal wie komplex das Layout ist, der grundlegende Ausgangspunkt lautet: „So zeigen Sie mehrere div-Elemente in einer Zeile an“.
Offensichtlich kann der Standard-Stream den Bedarf nicht mehr decken, daher müssen Floats verwendet werden. Floating kann als 让某个div元素脱离标准流，漂浮在标准流之上，和标准流不是一个层次 verstanden werden. Angenommen, div2 im Bild oben schwebt, bricht es vom Standardfluss ab, aber div1, div3 und div4 befinden sich noch im Standardfluss, sodass div3 automatisch nach oben verschoben wird, die Position von div2 einnimmt und neu organisiert wird ein Fluss. Wie im Bild gezeigt:

Wie aus dem Bild ersichtlich ist, gehört div2 nicht mehr zum Standardfluss, da es auf Float eingestellt ist, und div3 bewegt sich automatisch nach oben und ersetzt die Position von div2, div1, div3 und div4 werden so angeordnet, dass ein neuer Fluss entsteht. Und weil Floats über dem Standardfluss schweben, blockiert div2 einen Teil von div3 und div3 sieht „kurz“ aus.

Hier verwendet div2 左浮动(float:left;)，可以理解为漂浮起来后靠左排列, und der rechte Float (float:right;) ist natürlich rechts angeordnet. Mit links und rechts ist hier der linke und rechte Rand der Seite gemeint.

Wenn wir div2 nach rechts verschieben, ist der Effekt wie folgt:

Zu diesem Zeitpunkt ist div2 ist nahe am rechten Rand der Seite angeordnet, div3 ist nicht mehr blockiert und der Leser kann den oben erwähnten Fluss aus div1, div3 und div4 deutlich erkennen.

Bisher haben wir nur ein div-Element (div2) floaten lassen.

Als nächstes fügen wir Left Floating zu div2 und div3 hinzu. Der Effekt ist wie folgt:

Ähnlich Da div2 und div3 schwebend sind, gehören sie nicht mehr zum Standardfluss, sodass div4 automatisch nach oben verschoben wird und mit div1 einen „neuen“ Standardfluss bildet. Floating schwebt im Standardfluss, sodass div2 div4 erneut blockiert.

Wenn div2 und div3 gleichzeitig auf Float eingestellt sind, folgt div3 auf div2. Ich weiß nicht, ob den Lesern bisher aufgefallen ist, dass div2 in jedem Beispiel schwebend ist, aber das ist der Fall not Es folgt nicht nach div1. Daher können wir eine wichtige Schlussfolgerung ziehen:

假如某个div元素A是浮动的，如果A元素上一个元素也是浮动的，那么A元素会跟随在上一个元素的后边(如果一行放不下这两个元素，那么A元素会被挤到下一行)；如果A元素上一个元素是标准流中的元素，那么A的相对垂直位置不会改变，也就是说A的顶部总是和上一个元素的底部对齐。1

Um den Lesern das Verständnis zu erleichtern, geben wir noch ein paar Beispiele.
Wenn wir div2, div3 und div4 so einstellen, dass sie nach links schweben, ist der Effekt wie folgt:

Gemäß der obigen Schlussfolgerung: Start Bei der div4-Analyse wurde festgestellt, dass das obere Element div3 schwebend ist, sodass div4 auf div3 folgt. div3 hat festgestellt, dass das obere Element div2 ebenfalls schwebend ist, und div2 hat festgestellt, dass das obere Element div1 im Standardfluss ist Element, sodass die relative vertikale Position von div2 unverändert bleibt und die Oberseite weiterhin an der Unterseite des div1-Elements ausgerichtet ist. Da es schwebend bleibt, befindet sich die linke Seite nahe am Rand der Seite, sodass die linke Seite vorne ist und sich div2 ganz links befindet.

Wenn div2, div3 und div4 alle so eingestellt sind, dass sie nach rechts schweben, ist der Effekt wie folgt:

Das Prinzip und der linke Float sind grundsätzlich gleich, Sie müssen jedoch auf die entsprechende Beziehung achten. Da es nach rechts schwebt, befindet sich die rechte Seite nahe am Rand der Seite, sodass die rechte Seite die Vorderseite ist und sich div2 ganz rechts befindet.
Wenn wir nur div2 und div4 nach links verschieben, ist der Effekt wie folgt:

依然是根据结论，div2、div4浮动，脱离了标准流，因此div3将会自动上移，与div1组成标准流。div2发现上一个元素div1是标准流中的元素，因此div2相对垂直位置不变，与div1底部对齐。div4发现上一个元素div3是标准流中的元素，因此div4的顶部和div3的底部对齐，并且总是成立的，因为从图中可以看出，div3上移后，div4也跟着上移，div4总是保证自己的顶部和上一个元素div3(标准流中的元素)的底部对齐。

至此，恭喜读者已经掌握了添加浮动，但还有清除浮动，有上边的基础清除浮动非常容易理解。

经过上边的学习，可以看出：元素浮动之前，也就是在标准流中，是竖向排列的，而浮动之后可以理解为横向排列，清除浮动可以理解为打破横向排列。

清除浮动：

语法： clear : none | left | right | both 

none : 默认值，允许两边都可以有浮动对象 
left : 不允许左边有浮动对象 
right: 不允许右边有浮动对象 
both : 不允许有浮动对象12345678

根据上边的基础，假如页面中只有两个元素div1、div2，它们都是左浮动，场景如下：

此时div1、div2都浮动，根据规则，div2会跟随在div1后边，但我们仍然希望div2能排列在div1下边，就像div1没有浮动，div2左浮动那样。这时候就要用到清除浮动（clear），如果单纯根据官方定义，读者可能会尝试这样写：在div1的CSS样式中添加clear:right;，理解为不允许div1的右边有浮动元素，由于div2是浮动元素，因此会自动下移一行来满足规则。而其实这种理解是不正确的，这样做没有任何效果。

对于CSS的清除浮动(clear)，一定要牢记：这个规则只能影响使用清除的元素本身，不能影响其他元素。

怎么理解呢？就拿上边的例子来说，我们是想让div2移动，但我们却是在div1元素的CSS样式中使用了清除浮动，试图通过清除div1右边的浮动元素(clear:right;)来强迫div2下移，这是不可行的，因为这个清除浮动是在div1中调用的，它只能影响div1，不能影响div2。

要想让div2下移，就必须在div2的CSS样式中使用浮动。本例中div2的左边有浮动元素div1，因此只要在div2的CSS样式中使用clear:left;来指定div2元素左边不允许出现浮动元素，这样div2就被迫下移一行。

Das obige ist der detaillierte Inhalt vonEinführung in das CSS-Boxmodell und die Positionierung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!