Die meisten Webdesigner glauben, dass sie CSS ziemlich gut kennen. Schlie\u00dflich 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\u00fcssen, da sie auf den gesunden Menschenverstand hinauslaufen. Aber im Grunde gibt es viele unklare Details, die nur wenige Designer wirklich verstehen.<\/p>\n
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<\/strong>. Von den Tausenden von Menschen, die getestet wurden, weniger als 14 % haben es richtig gemacht<\/strong>.<\/p>\n Die Frage l\u00e4uft auf Folgendes hinaus:<\/p>\n Nehmen wir an, Ihre Website verf\u00fcgt \u00fcber ein Container-Div und darin ein Inhalts-Div:<\/p>\n Geben wir diesem Inhalts-Div nun einen oberen Rand:<\/p>\n Okay, es sind also 10 % … aber 10 % von Das<\/strong>? Das ist die Frage Nur 13,8 % der Menschen wissen, wie man richtig antwortet<\/strong>. Und denken Sie daran: Diese Personen haben Zugriff auf Google!<\/p>\n Was ich an dieser Frage liebe, ist das Es scheint, als ob die Antwort offensichtlich sein sollte.<\/strong>. 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\u00f6glichkeiten, wie der Browser eine solche Marge berechnen kann.<\/p>\n Wie w\u00e4re es also, wenn ich es f\u00fcr Sie eingrenze, da es sich bei der Pr\u00fcfungsfrage eigentlich um eine Multiple-Choice-Frage handelt? Hier sind Ihre Optionen:<\/p>\n Denken Sie daran, dass nur 13,8 % der Menschen die richtige Antwort aus dieser Liste ausw\u00e4hlen k\u00f6nnen. Das ist viel schlimmer als der Zufall!<\/p>\n Schauen Sie sich die Antworten genau an. Sie werden sehen, dass es eigentlich nur zwei Dinge gibt, die Sie wissen m\u00fcssen:<\/p>\n Erstens ist ?<\/p>\n Nun, das ist kein Geschenk, aber Sie k\u00f6nnen wahrscheinlich Ihrem Instinkt vertrauen. Wenn ich ein Div auf 50 % der Breite seines Containers einstelle und dann m\u00f6chte, dass sein linker und rechter Rand den Rest des Raums ausf\u00fcllen, w\u00fcrde ich sie nat\u00fcrlich auf jeweils 25 % festlegen (also addieren sich die Prozents\u00e4tze zu 100 %). ). Damit dies funktioniert, m\u00fcssen die prozentualen Margen auf den Abmessungen des Containers basieren.<\/p>\n Tats\u00e4chlich geben zwei Drittel der Personen, die den Test absolvieren, diesen Teil der Antwort richtig.<\/p>\n Zweite, ?<\/p>\n Wenn Sie aufgepasst haben, sind Sie wahrscheinlich bereits auf der Hut. Damit so wenige Menschen die richtige Antwort w\u00e4hlen, muss es sich doch um eine Fangfrage handeln, oder?<\/p>\n Und doch, ich wette, Sie k\u00f6nnen es kaum glauben. die H\u00f6he der Antwort.<\/strong> Nun, das ist es nicht.<\/p>\n Ja, wir sprechen hier von einer h\u00f6heren Marge. Ja, die Gr\u00f6\u00dfe dieses Randes ist ein vertikales Ma\u00df. Ja, wenn ein Block 50 % der H\u00f6he seines Containers hat und Sie ihm eine Kopffreiheit von 25 % gegeben haben, w\u00fcrden Sie erwarten, dass er 25 % der H\u00f6he des Containers betr\u00e4gt. <\/p>\nDie Frage<\/h4>\n
.content {\r\n margin-top: 10%;\r\n }\r\n <\/pre>\n\n
Container oder Inhalt?<\/h4>\n
Breite oder H\u00f6he?<\/h4>\n