Hi.
Heute werden wir über das Box-Modell sprechen.
Und was das Box-Modell ist, ist wirklich ein allgemeines Konzept von CSS
, das Ihnen hilft, Ihr Element zu dimensionieren und dort zu platzieren, wo Sie es wollen.
Eines der ersten Dinge, über die wir reden werden, ist Höhe und Breite.
Ich weiß, dass ich dies bereits ein wenig in einigen meiner anderen Vorlesungen verwendet habe, aber
ich wollte sehr spezifisch sein, wie es funktioniert.
Und eines der ersten Dinge, die Sie wissen müssen, ist, dass die Höhe und
Breite eines Inline-Elements der Inhalt selbst ist.
Wenn Sie also einen Link haben,
ist die Höhe und Breite dieses Links nur der Text des anklickbaren Teils des Links.
Elemente, die nicht inline sind, Dinge, die Block sind, Inline-Block, Dinge wie diese,
sie können Höhe und Breite Eigenschaften nehmen, und wir haben dies in der Anzeige-Vorlesung gesehen.
Jedes Mal, wenn Sie etwas inline haben, wenn Sie ihm eine Höhe und
eine Breite geben, ignoriert der Browser es einfach.
Alles andere, der Browser geht großartig, ich kann voran gehen und das für Sie ändern.
Einige der anderen Dinge, über die wir dann nachdenken möchten, wenn wir Elemente haben,
ist, wie sie auf den Bildschirm passen.
Eine der einfachsten Möglichkeiten für
Sie, Dinge strategisch auf Ihrer Seite zu platzieren, besteht darin, Grenzen um sie herum zu setzen.
Selbst wenn Sie diese Grenzen später in Ihrem Endprodukt nicht wollen,
finde ich es sehr hilfreich, diese Vorstellung davon zu haben, wie viel Platz ein Element einnimmt.
So kann jedes Element einen Rahmen um ihn herum haben, sei es inline
, Block oder Inline-Block.
Und diese Rahmeneigenschaften geben an, welchen Stil-Rahmen Sie wollen,
welche Breite des Rahmens und welche Farbe.
Sie sind ziemlich unkompliziert.
Der Rahmenstil ist der einzige, der angegeben werden muss.
Wenn Sie keine Farbe angeben oder keine Breite angeben, gibt es kein Problem.
Es wird standardmäßig schwarz und wahrscheinlich ein Pixel.
Aber Sie müssen entscheiden, welche Art von Stil Sie wollen.
Also, in diesem Fall, habe ich gesagt, für alle meine divs, möchte ich, dass sie einen festen
Rahmen mit einem Pixel um sie herum haben, und ich kann dir nicht sagen, welche Farbe das ist, denn
ich bin noch nicht ganz so geeky, aber ich würde etwas wie blau erraten.
Die Rahmenart, die Sie angeben möchten, während die meisten Benutzer immer Volumenkörper verwenden,
gibt es viele verschiedene Stile.
Sie können gepunktet, gestrichelt, gerillt, geriffelt, versteckt, eingelassen, Anfang verwenden.
Es gibt viele verschiedene Dinge, die Sie tun können, und
es ist wirklich ein stilistischer Unterschied Ihrerseits.
Ich schenke ihnen nicht wirklich viel Aufmerksamkeit, denn ich habe immer nur solide selbst verwendet.
Sobald Sie entschieden haben, welche Art von Stil Sie möchten, können Sie die Breite und Farbe angeben.
Also, wenn es an der Zeit ist, um die Breite einzustellen, wenn Sie sich entscheiden, können Sie es in
einer Anzahl von Pixeln einstellen oder Sie können die Schlüsselwörter verwenden, dünn, mittel oder groß.
Wenn es an der Zeit ist, die Farbe zu machen,
können Sie dasselbe tun, was wir die ganze Zeit getan haben.
Sie können einfach den Namen verwenden, wie blau, den RGB-Wert,
den Hex-Wert, oder einfach nur damit Sie wissen, es ist auch transparent.
So kann es einfach die Farbe von dem annehmen, was darunter ist.
Wenn Sie also angeben, wie groß Ihre Grenze sein soll,
können Sie auf vier verschiedene Arten angeben.
Im ersten Beispiel geben Sie ihm nur eine Nummer.
In diesem Fall drei Pixel.
Und was es tun wird,
ist, dass es einen Drei-Pixel-Rahmen um das gesamte Element genau so legen wird.
Wenn Sie sich entscheiden, es zwei Werte zu geben, wird es eine Drei-Pixel-Grenze auf
der oberen und unteren, und eine Zehn-Pixel-Grenze auf der linken und der rechten.
Dies ist eine wirklich gängige Möglichkeit, Dinge einzurichten, wenn Sie Grenzen und
andere Eigenschaften machen, weil es eine wirklich schöne Kurzschrift
ist, die immer noch sehr einfach zu verstehen und zu lesen ist.
Wenn du ihm drei Werte gibst, ist es ein bisschen schwieriger, und ich
stolpere immer über das, was es ist, also werde ich das Bild auftauchen, nur um sicherzugehen.
Der erste Wert ist immer der obere Wert.
Sie möchten, dass Ihr oberer Rand 3 Pixel hat.
Die 10 Pixel sind für die linke und rechte, und die 20 Pixel sind für den unteren Bereich.
Der letzte ist, wenn Sie vier Werte angeben, und wenn Sie vier Werte angeben,
bedeutet das im Grunde oben, rechts, unten, links.
Und das wird die Grenze auf vier verschiedene Werte setzen.
Die meisten Leute verwenden also entweder den einen Wert,
die vier Werte, und ein paar Leute verwenden die beiden Werte ebenfalls.
Meistens, und einer der Gründe, warum ich dir das zeige, ist, dass es wirklich einschüchternd sein kann,
und du fragst dich, was Leute tun, wenn sie los sind.
Das ist es, was sie tun.
Sie benutzen Kürzel, damit sie keine Grenze rechts,
Grenze links, Rand oben, Rand unten haben müssen.
Marge ist im Grunde der Raum, der außerhalb Ihrer Grenze liegt.
Es ist zwischen, wenn ich sage, du und dein Nachbar, oder
was ich wirklich sagen sollte, ist zwischen dem Element und dem Nachbarn des Elements.
Es gibt dir also den Ellenbogenraum, in dem du nicht willst, dass dich jemand berührt.
Mit Rändern, wenn Sie ihm eine positive Marge geben,
sagen Sie im Grunde, bewegen Sie Ihr Element nach rechts oder unten.
Wenn Sie ihm eine negative Marge geben,
haben Sie tatsächlich, dass es näher an den Nachbarn.
Sie lassen es sich nach links oder oben bewegen.
Padding ist im Konzept sehr ähnlich zu Rand, aber
stattdessen ist dieser Raum zwischen dem Element und seiner Grenze.
Es gibt ihm ein wenig zusätzlichen Platz im Inneren.
Sie könnten es fast als Quetschen des Textes in einigen Fällen vorstellen.
Auf die gleiche Weise, wenn Sie positive Werte für das
Auffüllen haben, verschieben Sie es vom Element nach außen.
Du gibst ihm mehr Platz.
Wenn Sie ihm eine negative Polsterung geben, bewegen Sie den Rahmen tatsächlich nahe oder
vielleicht sogar oben auf die Elemente, die sich daneben befinden.
Also mit Marge und Padding, alles, was Sie tun werden, ist einen numerischen Wert zu geben.
Du gibst ihm etwas wie 3 Pixel oder 10%.
Sie geben ihm keine Art von Farbe.
Es wird immer transparent sein.
Die Polsterung wird immer die gleiche Farbe wie das Element haben, und der Rand
wird immer die gleiche Farbe des Elternteils haben, wahrscheinlich der Körper der Seite.
Sie können, genau wie die Grenze, in diesem ein bis vier Werte definiert werden.
Also, wenn Sie Rand drei Pixel setzen, wird es ein Drei-Pixel-Rand um alles sein.
Wenn Sie Padding, zehn Pixel, fünf Pixel sagen, haben Sie oben,
unten, links und rechts.
Lassen Sie mich Ihnen ein kurzes Bild von dem zeigen, wovon ich rede.
In diesem Fall ist hier mein Text mein tatsächliches Element.
Ich habe gesagt, das ist es, was ich machen will.
Das Blau ist die Grenze um mein Element.
Das Gelb ist die Polsterung.
Es ist dieser Abstand zwischen meinem Text und der Grenze, und diese Orange ist der Rand, und
was Sie sagen, ist, dass Sie mich nicht in die Nähe von irgendetwas anderes bringen.
Gib mir so viel Platz um mich herum.
Es könnte also Ihre Absätze nach unten verschieben.
Es könnte Ihre divs nach unten und über bewegen.
Also, üben Sie das einfach.
Und wenn du mehr und mehr damit
spielst, macht es mehr Sinn, welcher Spielraum ist und welcher die Polsterung ist.
Eines der Dinge, die Sie verstehen müssen, wenn Sie Padding und
Rand und Rand tun, und all diese Dinge ist, dass in HTML sagt, Ihre Höhe und
Ihre Breite additiv ist.
Und was das bedeutet, ist, wenn Sie sich entscheiden, dass die Breite Ihres Elements
200 Pixel betragen soll, müssen Sie wahrscheinlich berücksichtigen,
wie groß all diese anderen Aspekte und Eigenschaften sind.
In diesem Fall ist ein Teil der Breite der Rand plus der Rahmen plus die
Polsterung plus das eigentliche Element mit sich selbst.
Und so summiert sich alles wirklich, um das zu bekommen, was wir die tatsächliche
Breite Ihres Elements betrachten.
Und das ist wichtig, wenn Sie auf Ihre Seite schauen und
sie entwerfen und versuchen zu entscheiden, wie viel Platz jedes Element einnehmen soll.
Wenn wir also dieses Beispiel hier betrachten, wo ich die Breite 100px habe, ist
die Polsterung 10px, der Rand ist 5px und der Rand ist 1px.
Ich hoffe, dass Sie gerade jetzt die Mathematik in Ihrem Kopf machen, und
ich verspreche, nicht viel mehr Mathematik als das zu geben, aber Sie tun es, um herauszufinden,
wie viel Breite dieses Element tut, tut dieses div, tatsächlich auf der Seite benötigt.
Und in diesem Fall beträgt die Breite 132 Pixel.
Die 100, plus 10, plus fünf, plus eins, plus eins, plus fünf, plus zehn.
Alles summiert sich.
Die Höhe ist auf die gleiche Weise Ihre Höhe plus die obere und untere Polsterung, der
obere und untere Rand und der obere und untere Rand.
Also, wenn wir über Marge reden,
wollte ich nur diese Folie hineinwerfen, obwohl sie
nicht mit vielen anderen Dingen verbunden ist, über die wir reden müssen.
Aber es liegt daran, dass der Rand sehr wichtig ist
, wenn Sie Elemente auf einer Seite zentrieren möchten.
Wenn wir Text zentrieren wollen, konnten wir einfach Text ausrichten Mitte verwenden,
und alles sah wirklich gut aus.
Aber wenn Sie Elemente zentrieren wollen, ist es ein bisschen schwieriger.
Und so ist die Standardmethode, dies zu tun, die Befehlsspanne Null auto zu verwenden.
Also, wenn Sie sich erinnern, die erste Null, das steht für oben und unten, und
so wird es sich nicht wirklich darum kümmern.
Das Auto ist, was es nach links und rechts setzt.
Jetzt wird dies nur funktionieren, wenn das Element zufällig display: block
ist, wenn das Element nicht schwebt, ist das Element eine Breite hat, die nicht automatisch ist,
was bedeutet, dass Sie es einstellen.
Und das letzte ist, wenn das Element nicht feste oder absolute Position ist.
Jetzt habe ich die Position noch nicht abgedeckt.
Und die gute Nachricht ist, da ich es nicht gedeckt habe, haben Sie sich wahrscheinlich nicht
damit vermasselt und Sie müssen sich um diese beiden Dinge keine Sorgen machen. Wenn
Sie jedoch versuchen, Ihre Elemente zu senden, kehren Sie zu dieser Folie zurück, falls erforderlich,
und aktivieren Sie diese, um sicherzustellen, dass alle diese Eigenschaften passen.
Und das ist der beste Weg, die Dinge im Augenblick zu zentrieren.
Schließlich, wenn wir darüber sprechen, möchte ich eine weitere Option hinzufügen, und
das heißt Box-Dimensionierung.
Und was Box-Dimensionierung tut, ist, dass einige der Mathematik aus dieser additiven Höhe
und additiven Breite.
Was Ihre Optionen sind, ist, dass Sie Content-Box haben können, also Box-Dimensionierung Content-Box,
und das ist nur Ihr Standard-Additiv.
Sie müssen sich daran erinnern, wie viel Platz Sie nutzen.
Der nächste wird Border-Box genannt.
Und border-box berücksichtigt tatsächlich die Breite, den Inhalt, das Padding und
den Rahmen.
Wenn Sie also sagen, dass die Breite 200 Pixel betragen
soll, wird das Element nicht tatsächlich 200 Pixel machen.
Es wird 200 Pixel abzüglich der Polsterung und des Rahmens machen.
Eines der letzten Dinge, die man sich merken sollte, ist, dass wir Polsterung und
Grenze berücksichtigen, es wird keine Marge berücksichtigen.
Schließlich ist
eines der Dinge, die ich Ihnen in diesem Beispiel in nur einer Sekunde zeigen werde,
verschiedene Möglichkeiten, wie Sie die Höhe und Breite verschiedener Elemente einstellen können.
Und es gibt zwei gängige Wege, dies zu tun.
Die erste wird absolut genannt, und
das ist, wenn Sie ein Element auf eine bestimmte Größe setzen.
Du sagst, ich will, dass es so viele Pixel oder so viele Millimeter oder so
viele Zentimeter sind.
Pixel ist eine sehr gebräuchliche Methode, um Größen festzulegen.
Die andere Art von Messung ist, was ich Flüssigkeit nenne, und
es legt die Größe relativ zu umgebenden Elementen oder den übergeordneten Elementen fest.
So können Sie Dinge wie Prozent verwenden.
Sie können vw verwenden, was für
Ansichtsfensterbreite steht, vh, die für Ansichtsfensterhöhe steht.
Sie können sogar Dinge wie em und rem verwenden, die nicht häufig verwendet werden, aber
sie legen tatsächlich die Größe relativ zu ihren Eltern fest.
Also gehen wir weiter und gehen zu meinem Beispiel, damit
wir nur ein wenig damit spielen können.
Es wird nicht ausreichen, um alles zu demonstrieren, was wir tun können, aber
hoffentlich wird es Ihnen den Einstieg bringen.
Was ich hier habe, ist eine sehr einfache HTML-Datei
, wo ich eine linke und rechte Seite habe.
Aber wie Sie sehen können, sind sie jetzt nicht links und rechts.
Sie sind einfach übereinander.
Das erste, was ich wissen will, ist, kannst du diese Divs nebeneinander stellen?
Wir müssen eine Art Kombination aus Display, Höhe und
Breite und Polsterung verwenden.
Also lasst uns weitermachen und das tun.
Also hier drüben in meiner CSS-Datei,
sofort können Sie diese Art der Hintergrunddinge sehen, die ich getan habe.
Nun, wenn Sie wollen, dass die Dinge nebeneinander sind, müssen Sie ihnen eine Breite geben,
denn jetzt nehmen sie 100%.
Eine Option wäre, dass Sie voran gehen und es auf eine Art von Pixeln setzen.
Und sagen Sie vielleicht 200 Pixel und 200 Pixel, und sehen, was passieren würde,
sehen, ob es klappt.
Das Problem dabei, da ich meinen Code hier entkommentiere, ist, dass, wenn
Leute verschiedene Browsergrößen verwenden, Ihre Zahlen möglicherweise zu groß oder zu klein sind.
Also, was ich hier getan habe, ist, dass ich vorangegangen bin und meine Breite auf 48% eingestellt habe.
Nun, das ist wirklich großartig, und ich werde
nur für eine Sekunde aus dieser einen Zeile kommen, weil die meisten Leute die Idee bekommen, dass Sie
die Breite auf etwas kleineres setzen wollen.
Was sie vergessen, ist, dass, obwohl sie nur 48% in Anspruch nehmen,
in der Tat werde ich es sogar etwas wirklich Kleines machen.
20%, sie gehen nicht nebeneinander.
Sie müssen also daran denken, dass Sie diese Flüssigkeitsmessungen verwenden möchten.
Also gehen wir zurück, ich werde es auf 40% zurücksetzen.
Selbst wenn Sie es wirklich dünn machen, bis Sie dem Browser sagen,
oh, ich weiß, dass das blockiert ist, aber ich
werde es in Inline-Block ändern, es wird nie Blockelemente nebeneinander sein lassen.
Deshalb müssen Sie daran denken, beide Elemente zu tun.
Also lassen Sie uns voran gehen und speichern und neu laden.
Und so können Sie sehen, dass ich vorangegangen bin und ich meine Breite gemacht habe.
Ich habe meinen Anzeigeblock gemacht.
Ich habe meine Polsterung.
Ich habe meine Grenze und ich habe etwas Spielraum.
Das letzte, was ich tun werde, nur um dir zu zeigen, was los ist,
ist, dass ich das auf
50% ändern werde, denn das ist ein wirklich häufiger Fehler, den die Leute machen.
Sie sagen, oh, ich will zwei Dinge nebeneinander.
Also werde ich sie je 50% machen.
Vergessen Sie nicht, wenn Sie das tun,
es funktioniert nicht, denn das sind 50%, bevor Sie die Grenze berücksichtigen.
Stellen Sie also sicher, dass Sie mit all diesen Dingen spielen, dass Sie mit
dem Rand spielen, Sie spielen mit dem Padding, Sie spielen mit dem Rand.
So werden Sie Dinge zum Laufen bringen, indem Sie optimieren, optimieren, optimieren, optimieren.
Also lassen Sie uns voran gehen und überprüfen.
Wenn es Zeit für Sie ist, all diese Ideen zu implementieren,
Ihr Box-Modell mit Ihrem Padding, Inhalt, Rand
usw., wollen Sie wirklich Skizzen auf Papier zuerst entwerfen, denn es ist wirklich schwer,
Dinge hineinzuschieben, nachdem Sie bereits einen Umriss erstellt haben, in Ordnung?
Also entwerfen Sie zuerst, Code zweiter.
Das zweite, was Sie vielleicht tun möchten, ist das Box-Modell
zu verwenden, um die Komplexität Ihres Codes zu reduzieren.
Oder zumindest die Komplexität Ihrer Mathematik, die versucht, herauszufinden,
welche Dinge wo passen.
Schließlich, egal was Sie tun,
müssen Sie sich daran erinnern, dass Marge immer berücksichtigt werden muss.
Es kann schwierig sein, wenn Sie zum ersten Mal versuchen, Ihre Seite zusammenzustellen
und Dinge genau dorthin zu bringen, wo Sie wollen, und
wir haben noch nicht einmal über die Positionierung gesprochen, was sogar ein weiteres Element wäre.
Also für jetzt, üben Sie diese Dinge auf kleine Weise.
Verwenden Sie Inspect Element, um damit zu spielen und müssen Ihren Code nicht so sehr ändern.
Bis Sie die Dinge so aussehen, wie Sie wollen.
Und keine Sorge, wir machen alle Fehler.
Wir machen das alle zusammen.
Aber ich denke, Ihre Seite wird hoffentlich näher und
näher an etwas, das Sie wirklich im Internet veröffentlichen möchten.
Gute Arbeit.