Heim > Artikel > Web-Frontend > Drei Möglichkeiten des HTML-CSS-Layouts (natürliches Layout/flüssiges Layout/positioniertes Layout)_HTML/Xhtml_Webseitenerstellung
Drei Möglichkeiten des HTML-CSS-Layouts (natürliches Layout/flüssiges Layout/positioniertes Layout)_HTML/Xhtml_Webseitenerstellung
- WBOYOriginal
- 2016-05-16 16:40:292011Durchsuche
1. Natürliches Layout
Ein Layout ohne Änderungen wird automatisch nach links verschoben.
2. Fließendes Layout
Die oben erwähnte float:left-Situation.
3. Positionierungslayout
Sowohl die relative Positionierung als auch die absolute Positionierung beziehen sich auf das übergeordnete Div-Tag.
Relativ------nimm die ursprüngliche Position dieses Elements als Referenzpunkt
Absolut--nimm den Ursprung (obere linke Ecke) des übergeordneten Div-Tags als Referenzpunkt.
Da die äußere Ebene position:relativ ist und die innere Ebene absolut ist, wird die obere linke Ecke der äußeren Ebene als Verschiebungsreferenz ausgerichtet. Natürlich wird nur position:relative in die äußere Ebene geschrieben, und die beiden Werte von links und oben werden geschrieben, was bedeutet, dass die ursprüngliche Position dieses Elements als Layout-Referenzursprung für die Ausrichtung links und oben verwendet wird .
Eine andere Situation ist, dass es nur eine Position:absolut gibt; es gibt keine Position:relativ in der äußeren Ebene. Welcher Punkt wird in diesem Fall als Referenz gefunden? Das Prinzip zu diesem Zeitpunkt lautet: Wenn in einem übergeordneten Element ein Relativ vorhanden ist, wird das übergeordnete Element als Referenzursprung verwendet. Wenn keine Position vorhanden ist: relativ, wird der Körper als Referenzursprung verwendet. Wenn in der äußeren Ebene von position:absolute kein Relativ vorhanden ist, gibt es keinen Unterschied zwischen den beiden Layouts.
Natürlich ist die letzte Situation: Die äußere Schicht ist: position:absolut; die innere Schicht ist position:relativ, was wird passieren? Gemäß dem ursprünglichen Prinzip bezieht sich „absolut“ auf den Körper als Layoutursprung und „relativ“ auf seine ursprüngliche Position als Layoutursprung. Zu diesem Zeitpunkt bezieht es sich tatsächlich auf die obere linke Ecke der äußeren Ebene als Layoutursprung .
Andere hängen von der tatsächlichen Situation ab.
Ein Layout ohne Änderungen wird automatisch nach links verschoben.
2. Fließendes Layout
Die oben erwähnte float:left-Situation.
3. Positionierungslayout
Sowohl die relative Positionierung als auch die absolute Positionierung beziehen sich auf das übergeordnete Div-Tag.
Relativ------nimm die ursprüngliche Position dieses Elements als Referenzpunkt
Absolut--nimm den Ursprung (obere linke Ecke) des übergeordneten Div-Tags als Referenzpunkt.
Da die äußere Ebene position:relativ ist und die innere Ebene absolut ist, wird die obere linke Ecke der äußeren Ebene als Verschiebungsreferenz ausgerichtet. Natürlich wird nur position:relative in die äußere Ebene geschrieben, und die beiden Werte von links und oben werden geschrieben, was bedeutet, dass die ursprüngliche Position dieses Elements als Layout-Referenzursprung für die Ausrichtung links und oben verwendet wird .
Eine andere Situation ist, dass es nur eine Position:absolut gibt; es gibt keine Position:relativ in der äußeren Ebene. Welcher Punkt wird in diesem Fall als Referenz gefunden? Das Prinzip zu diesem Zeitpunkt lautet: Wenn in einem übergeordneten Element ein Relativ vorhanden ist, wird das übergeordnete Element als Referenzursprung verwendet. Wenn keine Position vorhanden ist: relativ, wird der Körper als Referenzursprung verwendet. Wenn in der äußeren Ebene von position:absolute kein Relativ vorhanden ist, gibt es keinen Unterschied zwischen den beiden Layouts.
Natürlich ist die letzte Situation: Die äußere Schicht ist: position:absolut; die innere Schicht ist position:relativ, was wird passieren? Gemäß dem ursprünglichen Prinzip bezieht sich „absolut“ auf den Körper als Layoutursprung und „relativ“ auf seine ursprüngliche Position als Layoutursprung. Zu diesem Zeitpunkt bezieht es sich tatsächlich auf die obere linke Ecke der äußeren Ebene als Layoutursprung .
Andere hängen von der tatsächlichen Situation ab.
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn