Hallo, heute werden wir über Anzeige und Sichtbarkeit auf Ihrer Webseite sprechen.
Wenn es nun an der Zeit ist, Ihre Seite zu erstellen, werde ich Ihnen immer wieder sagen,
dass das Auslegen, wo Sie die Dinge sein wollen, der Schlüssel zu einer wirklich effektiven Seite ist.
Und eines der Dinge, die Sie sich erinnern müssen, ist, dass jedes Element, das wir betrachten,
im Grunde eine Box ist.
Und das Box-Modell ist etwas, das wir in einer zukünftigen Vorlesung behandeln werden.
Aber bevor wir zu den Besonderheiten kommen, will ich nur über ein paar Details reden.
Denn die Funktionsweise der Anzeige auf Ihrem Anzeigeelement wirkt sich auf alle benachbarten
Elemente auf Ihrer Seite aus.
Bevor wir anfangen, möchte ich Sie nur daran erinnern, dass jedes Element auf Ihrer Seite eine Box ist.
Denk einfach so dran.
Und Display ist, wie Sie entscheiden können, ob die Boxen nebeneinander,
untereinander und verschiedene Dinge wie diese sein sollen.
Wenn wir also über die Anzeige sprechen,
gibt es einige gemeinsame Werte, die so ziemlich jeder verwendet, oder
sie sind nur ein Standard, also haben Sie es verwendet, ohne es zu wissen.
Elemente, die inline sind, sitzen neben anderen Elementen, sie nehmen
gerade genug Breite und Höhe ein und nicht mehr, wenn Sie sie auf der Seite platzieren.
Ich betrachte diese als meine guten Kinder in den Minivan-Elementen.
Es ist in Ordnung, wenn ich drei Kinder auf den Rücksitz legen will.
Sie werden sich nicht gegenseitig Ellenbogen, sie sind einfach in Ordnung.
Sie werden sich auskommen.
Die andere Art der Anzeige ist Block.
Und was Block tut, ist, dass er einen Zeilenumbruch zwischen Ihren Elementen erzwingt.
Also, wieder, mit meinem Beispiel,
habe ich ein Kind, das wirklich einfach nicht neben irgendjemandem sitzen kann.
Ich muss sie in ihre eigene Reihe stellen.
Obwohl sie wirklich winzig ist und nicht so viel Platz einnimmt,
hat sie eine ganze Reihe ganz für sich, wenn wir im Auto fahren.
Was an Blockelementen schön ist, ist,
während sie die gesamte horizontale Breite und gerade genug Höhe einnehmen,
können Sie hineingehen und Sie können eine Höhe und eine Breite für diese Elemente festlegen.
Obwohl es Block ist und
Sie die gesamte Breite der Seite reserviert haben, können Sie sagen, aber
ich möchte wirklich nur, dass es 40 Pixel oder die Hälfte der Seite oder so etwas ist.
Mit Inline nimmt es gerade genug Platz ein, und Sie können das nicht ändern.
Du darfst nicht sagen, ich will, dass es größer oder kleiner ist.
Wenn es inline ist, ist das alles, was du bekommst.
Mit Block haben Sie ein wenig mehr Flexibilität, aber
Sie haben das Problem, dass Sie viel Platz reservieren.
Also natürlich,
was wir uns auf diese Idee von etwas ausgedacht haben, das das Beste aus beidem nimmt.
Und das ist Inline-Block.
Elemente, die Inline-Block anzeigen, werden die gleichen wie Inline sein und
dass sie nebeneinander sein können, aber sie akzeptieren auch Höhe und Breite.
Also, wenn Sie zwei Dinge haben, die nebeneinander sein wollen, aber
Sie wollen ihnen viel Platz geben, und im Moment sind sie inline.
Nun, gehen Sie weiter, ändern Sie es in Inline-Block, und
dann können Sie ihm eine Höhe und eine Breite geben.
Und wenn Sie etwas haben, das Block ist und
Sie wollen zwei von ihnen neben jedem, wieder, kein Problem.
Ändern Sie sie in Inline-Block, und Sie können die Breite und Höhe einstellen.
Die vierte, die wir nicht wirklich so viel verwenden, ist die Idee, keine anzuzeigen.
Und was hier passiert, ist, wenn Sie ein Element auf Ihrer Seite haben und
es keine anzeigen lassen, es ist, als ob der Browser vollständig ignoriert, dass es existiert.
Es ist, als hätte es hochgehoben und aus der Seite genommen.
Also diese vier, die Inline, der Block, der Inline-Block und
die keine sind diejenigen, mit denen wir am Anfang wirklich anfangen werden zu spielen.
Also, was ich hier habe, ist nur eine einfache Datei, die
drei Span-Elemente, drei div-Elemente und drei Absatzelemente haben wird.
Wenn Sie sich erinnern, sind Span-Elemente inline, so dass
sie nur so viel Platz einnehmen, wie sie brauchen.
Aber die Divs und die Absätze sind Block, also
nehmen sie mehr Platz ein.
Auf der Seite hier drüben, was ich getan habe, ist, dass ich ein wenig Styling hinzugefügt habe,
was vielleicht Sinn machen kann, wenn wir das erste Mal darüber reden, aber
ich gab jeder meiner Spannweiten eine Höhe und eine Breite.
Grundsätzlich sind alle meine Elemente, eine Höhe und Breite und eine andere Hintergrundfarbe.
Also, wenn wir es uns jetzt ansehen wollen.
Du würdest sehen, dass ich alle meine Spannweiten grün, alle meine Divs blau und
alle meine Absätze eine Art rosa lila Farbe gemacht habe.
Und jeder legt standardmäßig genau so vor, wie es gehen würde.
Der Grund, warum die divs so groß sind wie sie sind und
die Absätze so groß sind, wie sie sind, ist, wieder setzen wir das in unser Stylesheet.
Sie können meine Höhe und meine Breite sehen.
Wenn ich diese nicht standardmäßig einschließen würde,
würden diese divs und Absätze die gesamte Breite des Bildschirms einnehmen, und
sie wären wirklich klein, weil sie nur genug Platz benötigen, um diesen Text zu haben.
Also lasst uns weitermachen und damit spielen.
Normalerweise würde ich in mein Stylesheet gehen und ich würde irgendwie
verschiedene Dinge einfügen, verschiedene Displays und verschiedene Dinge wie diese ausprobieren.
Aber ich hoffe, es wird ein wenig klarer für
Sie sein, wenn ich das stattdessen gleichzeitig mache.
Sie können also mit mir folgen, was inspt-Element ist, oder
Sie können den Code in Ihrer Datei ändern, speichern, aktualisieren, speichern, speichern, aktualisieren, speichern, aktualisieren.
Also habe ich das Element hier durch Klicken mit der rechten Maustaste inspizieren, und
was ich jetzt tun werde, ist, dass ich mit der rechten Maustaste auf eines dieser Span-Elemente klicken werde.
Inspect Element und es taucht es für mich auf.
Jedes Element auf Ihrer Seite,
mit dem Sie spielen können, Sie können entweder mit dem bestimmten Element spielen,
auf dem Sie direkt dort stoßen, oder ich kann sagen, ich will mit allen Spannweiten spielen.
Also schauen wir uns hier runter.
Im Moment habe ich eine Höhe und eine Breite für jedes meiner Spannweitenelemente.
Aber sie sind eigentlich nicht sehr groß.
Also, wie ändern wir das?
Wenn etwas inline ist, aber du ihm eine Höhe und eine Breite geben willst,
gehen wir runter zur Anzeige und ich gehe hierher.
Und ich werde es im Inline-Block versuchen.
Boom, sofort haben meine Spannweiten diese Eigenschaften übernommen.
Also, bevor sie inline waren, waren sie klein.
Wenn sie Inline-Block sind, kann ich sie wirklich schön gestalten.
Und wenn ich sie so ändere, dass sie nur blockieren, können Sie sehen, jetzt sind sie
übereinander, weil Blockelemente nicht gerne nebeneinander sind.
Die letzte Eigenschaft, die ich Ihnen hier zeigen werde, ist diese Idee von keiner.
Wenn Sie keine haben, ist es, als ob die Spannweiten nicht einmal existieren.
Sie haben keinen Platz für sie gespart,
es ist nicht so, als ob Sie überhaupt wissen würden, wenn Sie auf die Seite schauen, dass sie jemals da waren.
So eine Art interessante Sache zu tun und Sie könnten es später verwenden, wenn Sie möchten, dass Dinge
einige Male erscheinen und nicht andere, aber Sie wollen keinen großen Leerraum verlassen.
Also, machen Sie eine Sekunde und
ich werde nur auf ein paar der anderen Dinge klicken.
Also zum Beispiel meine divs, ich kann gehen und ich kann sagen, weißt du was, ich will nur
dieses eine div machen, ich will weitermachen und es inline-block machen, und mal sehen, was passiert.
Das Seltsame ist, dass ich es geändert habe und nichts passiert ist, und
ich frage mich, ob du weißt, warum.
Wenn du Inline-Block hast, sagst du, oh, geh weiter und
setze mich neben andere Leute, wenn ich passe.
Aber wenn Ihre Nachbarn auch Block sind, wird es nicht funktionieren.
Also jetzt, anstatt nur eines zu ändern, werde ich alle divs ändern.
Und Sie können sehen, dass, oh, weil sie etwa 45% sind,
zwei von ihnen passen als nächstes zusammen, aber der letzte nicht.
Es gibt also wirklich keinen guten Weg, sich mit dem Display wohl zu fühlen,
bis Sie diesen Code nehmen und anfangen, Dinge umzuschalten.
Was passiert, wenn es inline ist?
Was passiert, wenn es Inline-Block ist?
Was passiert, wenn es Spannweite ist?
Und achten Sie wirklich genau auf die Tatsache, dass es nicht ausreicht zu wissen, was
das Display für das eine Element ist, an dem
Sie arbeiten, Sie müssen auch das Display für seine Nachbarn kennen.
Aber lasst uns weitermachen und ein bisschen mehr reden.
Wenn wir über Display sprechen,
ist es ziemlich üblich, auch über zwei andere Eigenschaften zu sprechen.
Und diese werden Float und Clear genannt.
Und was float und clear tun ist, dass sie nicht unbedingt sagen, wo die Seite
sein soll, das Element auf Ihrer Seite speziell sein soll, aber
wo Sie es im Allgemeinen einfügen möchten.
Wenn der Browser Dinge auf die Seite legt,
beginnt er standardmäßig in der oberen linken Ecke.
Und es fängt an, sie reinzubringen, also wenn man sich deine Seite anschaut, wäre es wie
das erste, das erste, was, oh, der nächste ist Block, also stelle ich es besser unter.
Und es fügt einfach immer wieder Dinge hinzu.
Also, wenn Ihr Browser wirklich groß ist, können Sie mehr Spannelemente nebeneinander passen,
wenn er klein ist, können Sie weniger passen.
Nun float lässt Sie tatsächlich Dinge neu positionieren, und
es sagt, hey, ich möchte, dass Sie das irgendwie überall schweben,
und wenn ich sage Float rechts, ich möchte, dass Sie es so weit wie möglich nach rechts legen.
Wenn ich sage Float links, ich möchte, dass Sie es so weit wie möglich links legen.
Die anderen Elemente sind sich im Grunde bewusst, und wenn Sie float verwenden,
werden sie sich nicht überlappen, aber die Dinge werden ein wenig verrückt aussehen.
Und wenn du wieder Float hinzufügst, beeinflusst du deine Nachbarn,
weil deine Nachbarn wissen müssen, wohin du gehst.
Deshalb haben wir diese zusätzliche Eigenschaft genannt klar.
Denn manchmal, wenn Sie codieren, wollen Sie einfach sicherstellen, dass die Dinge nicht
nach links oder rechts schweben.
Sie wollen wirklich diesen Raum ganz für sich selbst haben
, in diesem Fall können Sie klar links, klar rechts oder klar beides verwenden.
Klar links, um sicherzustellen, dass links nichts zu dir schwebt.
Klares Recht bedeutet, dass auf der rechten Seite nichts zu dir schwebt.
Und klar beides, gut, wie Sie erraten können,
bedeutet es, dass nichts neben Ihnen schweben sollte.
Also lassen Sie uns weiter gehen und schauen uns ein weiteres Beispiel an, in dem ich
mit demselben Code spielen werde, aber ich werde auch float und clear verwenden.
Also werden wir uns die gleiche exakte Datei ansehen, die wir gerade angeschaut haben,
als ich mit Display-Block, Inline, keiner usw. spielte
, aber jetzt werden wir auch Float werfen und klar in den Mix werfen.
Hier ist der Code, den wir uns ansehen, und hier ist die Website.
Und das erste, was ich tun werde, ist, dass ich mit den Spannweiten hier oben spielen werde, und
ich werde versuchen, sie zu schweben.
Denken Sie daran, wenn Sie etwas schweben, sagen Sie im Grunde, legen
Sie es so weit wie möglich zur Seite, und die anderen Elemente werden sich fast so verhalten, als
wären sie nicht da, aber sie werden es nicht überlappen.
Also geh ich hier runter, gehe zu meinem Schwimmer.
Sagen Sie Float.
Das erste, was ich tun werde, ist, dass ich es einfach nach links schweben werde,
was bedeutet, dass sie sich nicht wirklich zu viel bewegen werden.
Was ich will,
dass Sie suchen, ist, dass im Moment ein wenig Platz zwischen jeder meiner Spannweiten ist.
Wenn ich es nach links ändere, verschwindet dieser Raum und
das div geht auch darunter, weil die Spannweiten oben sind.
Jetzt, wenn ich versuche, es zu ändern und es richtig zu schweben.
Wenn ich es richtig schwebe, möchte ich, dass Sie bemerken, dass sie nicht nur keinen
Platz dazwischen haben, sondern dass sie wieder gleich nebeneinander sind.
Aber wenn Sie schauen, sind die Reihenfolge der A, B und C unterschiedlich.
Weil die ersten Elemente, die es auf der Seite platziert wird, Spanne A
ist und so weit wie möglich nach rechts verschoben wird.
Und wenn es dann Span B macht, bewegt es sich so weit wie möglich nach rechts und
erstreckt sich auch über C.
Das ist also etwas Interessantes,
und Sie können sehen, dass, wenn sie auf der linken Seite wären, die Divs sie überlappen würden.
In Ordnung, also lasst uns weiter gehen und noch ein paar davon machen.
Und ich werde alle meine divs ändern, so dass sie auch sind.
Gehen wir hierher, schweben Sie nach links.
Inzwischen sieht die Seite irgendwie verrückt aus, weil
die Dinge überall laufen und Sie wirklich, Sie wollen wahrscheinlich nicht, dass es so aussieht.
Vor allem, wenn wir wollten, dass alle unsere Absätze wirklich am Ende
der Seite stehen.
Also werde ich hier rauf zu meinen Absätzen gehen.
Und ich werde weitermachen und sagen, ich werde die nicht schweben.
Stattdessen werde ich sagen, dass ich mit dem Schweben fertig bin,
bitte hör auf, Dinge um mich herum zu schweben.
Und ich werde beide Seiten klären.
Also sagen die Absätze jetzt: Holen Sie mich weg von all dieser schwimmenden Verrücktheit.
Ich will nur hier unten sein.
Floating, Clearing, verschiedene Dinge wie diese.
Wenn wir diese Art von wirklich einfachen Codebeispielen in der Vorlesung machen, werden
sie nicht immer so viel Sinn machen, als wenn Sie sie als
Teil von etwas Größerem einbringen.
Aber das Problem ist, dass ich Ihnen keine Beispiele für etwas Größeres zeigen kann, weil Sie
alle ungefähr drei oder vier Minuten in den Code einschlafen würden.
Also mach weiter, tu, was wir schon immer gemacht haben und
spiele mit diesen ein bisschen, bis du die Vorstellung davon hast, was sie tun.
Im Laufe der Zeit
werden Sie anfangen herauszufinden, wann Sie wollen, dass sie diese Art von Aktionen tatsächlich durchführen.