In den letzten zwei Monaten habe ich zeitweise als Künstler an mehreren Websites gearbeitet. Dabei habe ich ein besseres Verständnis für die Standardentwicklung von DIV+Css gewonnen. Es gibt zwei Dinge, die mir am meisten geholfen haben: Zum einen habe ich das CSS-Box-Modell vollständig verstanden, zum anderen habe ich das Problem der „geschlossenen schwebenden Elemente“ gelöst, das mich schon lange beschäftigt:
Wenn ein untergeordnetes Element Float verwendet, kann das übergeordnete Element im Allgemeinen nicht immer genau wissen, wo das untergeordnete Element endet, sodass der untere Rand des übergeordneten Elements immer durch die Mitte oder sogar die Oberseite des untergeordneten Elements verläuft, was sehr unangenehm aussieht.
Zuerst habe ich nach dem untergeordneten Element ein <br /> oder <div></div> hinzugefügt und sein Attribut auf „clear:all;“ gesetzt, aber das würde viele nutzlose Leerzeichen und sogar einige Websites erfordern Sie müssen den ASP-Code ändern, um diese leeren Tags automatisch hinzuzufügen, was nur als letzter Ausweg angesehen werden kann.
Später stellte ich fest, dass das übergeordnete Tag, wenn es ebenfalls auf Float gesetzt ist, an der richtigen Position geschlossen werden kann. Auf diese Weise muss nicht viel ASP-Code geändert werden die Notwendigkeit, das Clear-Attribut hinzuzufügen. Wenn das leere Tag nicht aus der Vorlage hinzugefügt werden kann, sondern aus dem ASP-Code hinzugefügt werden muss, besteht keine Notwendigkeit, den ASP-Code zu ändern. Sie müssen nur den übergeordneten Container auf Floating setzen Sie müssen immer noch den ASP ändern und dann die Einstellungen des übergeordneten Containers ändern. Wenn Sie den übergeordneten Container auf schwebend einstellen und ihn Schicht für Schicht schweben lassen, wird das Problem immer gelöst. Obwohl dies viel Ärger ersparen kann, kann es leicht dazu führen, dass die gesamte Seite mit schwebenden Elementen gefüllt wird. -_-!!! Dies kann nur als mittlere Strategie angesehen werden.
Als ich später im Internet nach anderen Dingen suchte, fand ich zufällig jemanden, der sagte, dass das Problem einfach durch das Hinzufügen der folgenden zwei Eigenschaften zu den CSS-Eigenschaften des übergeordneten Containers gelöst werden würde:
Beispiel-Quellcode
[www.downcodes.com] Überlauf: automatisch;
_Höhe: 1%;
Ich habe es versucht und es hat wirklich gut funktioniert. Dies sollte derzeit als die beste Lösung für dieses Problem angesehen werden: Es besteht keine Notwendigkeit, die Aufgabe der Seite zu ändern, und es besteht grundsätzlich keine Notwendigkeit, die übergeordnete Seite zu ändern Container – sogar der übergeordnete Container des übergeordneten Containers. Wenn Sie Änderungen vornehmen, fügen Sie einfach zwei indifferente Attribute zum übergeordneten Container hinzu, und schon sind Sie fertig.
