Was Sie nicht über die Berechnung von Prozentsatzrändern in CSS wissen

Die meisten Webdesigner glauben, dass sie CSS ziemlich gut beherrschen. Schließlich gibt es nicht so viel dazu - ein paar Selektortypen, ein paar Dutzend Eigenschaften und einige Kaskadenregeln, an die Sie sich kaum erinnern müssen, da sie sich auf den gesunden Menschenverstand beziehen. Aber wenn Sie auf die kleinste Ebene kommen, gibt es viele obskure Details, die nur wenige Designer wirklich verstehen.

Als ich die Ergebnisse eines kostenlosen CSS-Tests untersuchte, den ich in den letzten sechs Monaten online angeboten habe, habe ich festgestellt eine Frage, die fast Niemand habe recht. Von den Tausenden von Menschen, die den Test gemacht haben, weniger als 14% haben es richtig gemacht.

Die Frage läuft darauf hinaus: Wie berechnen Sie Prozentsatzränder??

Die Frage

Angenommen, Ihre Site hat einen Container div, und darin ein Inhalt div:

Nun geben wir diesen Inhalt div ein oberer Rand:

.Inhalt Margin-Top: 10%;  

Okay, also 10% ... aber 10% davon Was? Das ist die Frage Nur 13,8% der Menschen können richtig antworten. Und denken Sie daran: Diese Leute haben Zugriff auf Google!

Was ich an dieser Frage liebe, ist das Es scheint, als sollte die Antwort offensichtlich sein. So sehr, dass ich vermute, dass die meisten Leute einfach eine Vermutung (und eine falsche Vermutung) annehmen. Aber vielleicht auch tut nicht für dich offensichtlich. Ich meine, wenn Sie Ihre Vorstellungskraft wirklich nutzen, gibt es viele Möglichkeiten, wie der Browser eine solche Marge berechnen kann.

Wie wäre es also, wenn ich es für Sie eingrenzen würde, da die Frage im Test eigentlich Multiple Choice ist. Hier sind Ihre Optionen:

• 10% der Höhe des Inhaltsdiv
• 10% der Höhe des Containers
• 10% der Breite des Inhaltsdiv
• 10% der Breite des Container-Div

Denken Sie daran, dass nur 13,8% der Menschen die richtige Antwort aus dieser Liste auswählen können. Das ist schlimmer als der Zufall!

Schau dir die Antworten genau an. Sie werden sehen, dass es wirklich nur zwei Dinge gibt, die Sie wissen müssen:

Container oder Inhalt?

Erstens ist die Größe des Rands basierend auf der Größe des Inhalts div selbst oder der Größe des Container div?

Nun, das ist kein Gimme, aber Sie können wahrscheinlich Ihren Instinkten vertrauen. Wenn ich ein div auf 50% der Breite seines Containers stelle und dann möchte, dass der linke und rechte Rand den Rest des Platzes ausfüllen, würde ich sie natürlich auf jeweils 25% setzen (die Prozentsätze summieren sich also auf 100%). Damit dies funktioniert, müssen die prozentualen Margen auf den Abmessungen des Containers basieren.

Sicher, zwei Drittel der Testteilnehmer erhalten diesen Teil der Antwort richtig.

Breite oder Höhe?

Zweite, Die Größe des Randes hängt von der Breite oder Höhe des Elements ab?

Wenn Sie aufgepasst haben, sind Sie wahrscheinlich schon auf der Hut. Für so wenige Leute, die die richtige Antwort auswählen, muss dies eine Trickfrage sein, richtig?

Und ich wette, Sie können das kaum glauben die Antwort ist nicht Höhe. Nun ist es nicht.

Ja, wir reden hier von einer Top-Marge. Ja, die Größe dieses Randes ist eine vertikale Messung. Ja, wenn ein Block 50% der Höhe seines Containers beträgt und Sie ihm einen oberen Rand von 25% geben, würden Sie erwarten, dass er 25% der Höhe des Containers beträgt. Und du liegst falsch.

Fühlen Sie sich nicht schlecht, wenn Sie denken, dass es Höhe sein muss. Fast 80% der Testteilnehmer stimmen mit Ihnen überein:

Es macht Sinn… Nein, wirklich!

Glaube es immer noch nicht? Hier ein Zitat aus der W3C-CSS-Spezifikation:

Der Prozentsatz wird in Bezug auf die Breite des Blockes der generierten Box berechnet. Beachten Sie, dass dies auch für Margin-Top und Margin-Bottom gilt.

Dasselbe gilt für die Polsterung oben und unten, falls Sie sich gefragt haben. Bei den Grenzen ist es unzulässig, die Breite in Prozent anzugeben.

An diesem Punkt denken Sie wahrscheinlich, dass die Schöpfer von CSS entweder eine der beiden sind Bonker, oder sie machten nur einen wirklich dummen Fehler. Aber ich bin hier, um Ihnen zu sagen, dass es zwei gute Gründe gibt, vertikale Ränder an der Breite des umgebenden Blocks zu orientieren:

Horizontale und vertikale Konsistenz

Es gibt natürlich eine Abkürzungseigenschaft, mit der Sie den Rand für alle vier Seiten eines Blocks festlegen können:

Marge: 10%;

Dies erweitert sich auf:

Oberkante: 10%; rechte Marge: 10%; Margin-Bottom: 10%; Marge links: 10%;

Nun, wenn Sie eine der beiden Aussagen schreiben würden, würden Sie wahrscheinlich erwarten, dass die Ränder auf allen vier Seiten des Blocks gleich groß sind, nicht wahr? Wenn jedoch der Rand links und der Rand rechts auf der Breite des Containers und der Rand oben und der Rand unten auf seiner Höhe basierten, wären sie normalerweise unterschiedlich!

Zirkulare Abhängigkeit vermeiden

CSS legt den Inhalt in Blöcken an, die vertikal auf der Seite gestapelt sind. Daher wird die Breite eines Blocks normalerweise nur von der Breite des übergeordneten Elements bestimmt. Mit anderen Worten, Sie können Berechnen Sie die Breite eines Blocks, ohne sich darüber Gedanken zu machen, was Innerhalb dieser Block.

Die Höhe eines Blocks ist eine andere Sache. Normalerweise die Höhe hängt von der kombinierten Höhe des Inhalts ab. Ändern Sie die Höhe des Inhalts und Sie ändern die Höhe des Blocks. Sehen Sie das Problem?

Um die Höhe des Inhalts zu ermitteln, müssen Sie die oberen und unteren Ränder kennen, die darauf angewendet werden. Und wenn diese Ränder von der Höhe des übergeordneten Blocks abhängen, haben Sie Schwierigkeiten, weil Sie keinen berechnen können, ohne den anderen zu kennen!

Vertikale Ränder auf der Basis Breite des Containers bricht diese zirkuläre Abhängigkeit und ermöglicht das Layout der Seite.

Ass die Klasse

Da haben Sie es: die schwierigste Frage im Test, und jetzt können Sie sie beantworten. Möchten Sie wissen, wie Sie den Rest des Tests machen würden? Versuch es selber. Ich verspreche, die meisten Fragen sind viel einfacher als diese.

Inzwischen bin ich auf der Suche nach einer neuen schwierigsten Frage! Welche Details von CSS glauben Sie, weiß niemand??

Anmerkung des Herausgebers: Dies wurde für Hongkiat.com von geschrieben Kevin Yank. Kevin hat seit 1999 über das Internet geschrieben, mit Büchern über PHP, CSS und JavaScript. Er hat auch Podcasts gehostet, auf Konferenzen gesprochen und Videotrainings rund um das Web produziert. Jetzt leitet er das Entwicklungsteam von Sit the Test, einer Webanwendung zum Erstellen und Durchführen von Online-Tests.

Mehr zu Hongkiat:

• Webdesign: Gleiche Spaltenhöhe mit CSS
• 6 CSS-Tricks zum vertikalen Ausrichten von Inhalt
• Ein Blick in CSS-Einheiten: Pixel, EM und Prozentsatz
• Ein Blick in: CSS3 Box-Sizing

Lesen Sie jetzt: 10 versteckte CSS3-Eigenschaften, die Sie kennen sollten