Die meisten Webdesigner glauben, dass sie CSS ziemlich gut kennen. Schließlich steckt da nicht viel dahinter: ein paar Arten von Selektoren, ein paar Dutzend Eigenschaften und ein paar Kaskadenregeln, an die Sie sich kaum erinnern müssen, da sie auf den gesunden Menschenverstand hinauslaufen. Aber im Grunde gibt es viele unklare Details, die nur wenige Designer wirklich verstehen.
Als ich mir die Ergebnisse eines kostenlosen CSS-Tests ansah, den ich in den letzten sechs Monaten online angeboten hatte, stellte ich fest, dass dies der Fall war Eine Frage, die fast richtig gestellt wurde. Von den Tausenden von Menschen, die getestet wurden, weniger als 14 % haben es richtig gemacht.
Die Frage läuft auf Folgendes hinaus:
Die Frage
Nehmen wir an, Ihre Website verfügt über ein Container-Div und darin ein Inhalts-Div:
Geben wir diesem Inhalts-Div nun einen oberen Rand:
.content {
margin-top: 10%;
}
Okay, es sind also 10 % … aber 10 % von Das? Das ist die Frage Nur 13,8 % der Menschen wissen, wie man richtig antwortet. Und denken Sie daran: Diese Personen haben Zugriff auf Google!
Was ich an dieser Frage liebe, ist das Es scheint, als ob die Antwort offensichtlich sein sollte.. So sehr, dass ich vermute, dass die meisten Leute nur raten (und falsch raten). Aber es mag Ihnen offensichtlich erscheinen. Ich meine, wenn Sie wirklich Ihrer Fantasie freien Lauf lassen, gibt es viele Möglichkeiten, wie der Browser eine solche Marge berechnen kann.
Wie wäre es also, wenn ich es für Sie eingrenze, da es sich bei der Prüfungsfrage eigentlich um eine Multiple-Choice-Frage handelt? Hier sind Ihre Optionen:
- 10 % der Höhe des Inhaltsteils.
- 10 % der Höhe des Behälterteils
- 10 % der Breite des Inhaltsabschnitts
- 10 % der Breite des Behälterteils
Denken Sie daran, dass nur 13,8 % der Menschen die richtige Antwort aus dieser Liste auswählen können. Das ist viel schlimmer als der Zufall!
Schauen Sie sich die Antworten genau an. Sie werden sehen, dass es eigentlich nur zwei Dinge gibt, die Sie wissen müssen:
Container oder Inhalt?
Erstens ist ?
Nun, das ist kein Geschenk, aber Sie können wahrscheinlich Ihrem Instinkt vertrauen. Wenn ich ein Div auf 50 % der Breite seines Containers einstelle und dann möchte, dass sein linker und rechter Rand den Rest des Raums ausfüllen, würde ich sie natürlich auf jeweils 25 % festlegen (also addieren sich die Prozentsätze zu 100 %). ). Damit dies funktioniert, müssen die prozentualen Margen auf den Abmessungen des Containers basieren.
Tatsächlich geben zwei Drittel der Personen, die den Test absolvieren, diesen Teil der Antwort richtig.
Breite oder Höhe?
Zweite, ?
Wenn Sie aufgepasst haben, sind Sie wahrscheinlich bereits auf der Hut. Damit so wenige Menschen die richtige Antwort wählen, muss es sich doch um eine Fangfrage handeln, oder?
Und doch, ich wette, Sie können es kaum glauben. die Höhe der Antwort. Nun, das ist es nicht.
Ja, wir sprechen hier von einer höheren Marge. Ja, die Größe dieses Randes ist ein vertikales Maß. Ja, wenn ein Block 50 % der Höhe seines Containers hat und Sie ihm eine Kopffreiheit von 25 % gegeben haben, würden Sie erwarten, dass er 25 % der Höhe des Containers beträgt.
Fühlen Sie sich nicht schlecht, wenn Sie dachten, es müsste die Höhe sein. Fast 80 % der Personen, die den Test machen, stimmen Ihnen zu:
Es macht Sinn … Nein, wirklich!
Glauben Sie es immer noch nicht? Hier ist ein Zitat von W3C-CSS-Spezifikationen:
Der Prozentsatz wird in Bezug auf die Breite des enthaltenden Blocks der generierten Box berechnet. Beachten Sie, dass dies auch für den oberen und unteren Rand gilt.
Das Gleiche gilt für die Polsterung oben und unten, falls Sie sich das fragen. Bei Rändern ist es illegal, deren Breite als Prozentsatz anzugeben.
An diesem Punkt denken Sie wahrscheinlich, dass die Ersteller von CSS … sind, oder dass sie einfach einen wirklich dummen Fehler gemacht haben. Aber ich möchte Ihnen sagen, dass es zwei gute Gründe gibt, vertikale Ränder auf der Breite des enthaltenden Blocks zu basieren:
Horizontale und vertikale Konsistenz
Natürlich gibt es eine Abkürzungseigenschaft, mit der Sie den Rand für alle vier Seiten eines Blocks angeben können:
margin: 10%;
Dies erweitert sich auf:
margin-top: 10%; margin-right: 10%; margin-bottom: 10%; margin-left: 10%;
Wenn Sie nun eine der oben genannten Optionen eingeben würden, würden Sie wahrscheinlich erwarten, dass die Ränder auf allen vier Seiten des Blocks gleich groß sind, oder? Aber wenn der linke und rechte Rand auf der Breite des Containers basieren würden und der obere und untere Rand auf seiner Höhe, dann wären sie normalerweise unterschiedlich!
Vermeiden Sie zirkuläre Abhängigkeiten
CSS stellt Inhalte in vertikal auf der Seite gestapelten Blöcken dar, sodass die Breite eines Blocks normalerweise vollständig von der Breite seines übergeordneten Blocks bestimmt wird. Mit anderen Worten: Sie können Berechnen Sie die Breite eines Blocks, ohne sich Gedanken darüber machen zu müssen, um welchen Block es sich handelt.
Die Höhe eines Blocks ist eine andere Sache. Im Allgemeinen die Höhe Dies hängt von der Gesamthöhe Ihres Inhalts ab.. Wenn Sie die Höhe des Inhalts ändern, ändert sich auch die Höhe des Blocks. Sehen Sie das Problem?
Um die Höhe des Inhalts zu ermitteln, müssen Sie die darauf angewendeten oberen und unteren Ränder kennen. Und wenn diese Ränder von der Höhe des Hauptblocks abhängen, sind Sie in Schwierigkeiten, denn Sie können das eine nicht berechnen, ohne das andere zu kennen!
Wenn Sie die vertikalen Ränder auf der Form des Containers basieren, wird diese zirkuläre Abhängigkeit aufgehoben und Sie können das Layout der Seite anpassen.
