Was ist der Hauptunterschied zwischen „fr' und Prozenteinheiten im CSS-Rasterlayout für Spaltenbreiten?

Der Unterschied zwischen Prozent- und Fr-Einheiten im CSS-Rasterlayout

Bei der Verwendung des CSS-Rasterlayouts ist es wichtig, den Unterschied zwischen Prozent- und Fr-Einheiten bei der Definition der Breite zu verstehen von Spalten.

fr-Einheiten

Die fr-Einheit steht für „Bruchzahl“. Einheit“ und es funktioniert nur mit dem im Container verfügbaren freien Speicherplatz. Bei Verwendung von fr-Einheiten berechnet der Browser die Breite jeder Spalte basierend auf dem verbleibenden Platz unter Berücksichtigung der Rasterlücken.

Im folgenden Code ist der Rastercontainer beispielsweise in jeweils 12 Spalten unterteilt Nehmen Sie den gleichen freien Platz innerhalb des Containers ein:

grid-template-columns: repeat(12, 1fr);

Prozentsatzeinheiten

Prozentsatzeinheiten, auf der Definieren Sie andererseits die Breite jeder Spalte als Prozentsatz der gesamten Containerbreite. Dies bedeutet, dass die Breite jeder Spalte auf der Grundlage der tatsächlichen Breite des Containers berechnet wird.

Im folgenden Code hat beispielsweise jede Spalte eine Breite von 8,33333 %, was 100 % dividiert durch 12 ist:

grid-template-columns: repeat(12, calc(100% / 12));

Warum Prozentangaben dazu führen, dass Spalten überlaufen

Die Der Hauptunterschied zwischen Fr- und Prozenteinheiten besteht darin, wie sie mit Gitterlücken umgehen. Bei fr-Einheiten werden Gitterlücken vom freien Platz des Containers abgezogen, bevor die Spaltenbreiten berechnet werden. Dadurch wird sichergestellt, dass die Spalten nicht über die Breite des Containers hinausragen.

Allerdings werden bei Prozenteinheiten Rasterlücken zu den Spaltenbreiten hinzugefügt. Das bedeutet, dass, auch wenn die Gesamtbreite der Spalten 100 % betragen kann, das Hinzufügen von Gitterlücken dazu führen kann, dass die Spalten über die Breite des Containers hinauslaufen.

Um dieses Problem zu beheben, können Sie entweder fr-Einheiten verwenden oder passen Sie die Prozentberechnungen an, um Netzlücken zu berücksichtigen.

Das obige ist der detaillierte Inhalt vonWas ist der Hauptunterschied zwischen „fr' und Prozenteinheiten im CSS-Rasterlayout für Spaltenbreiten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!