Eines der Dinge, die Sie bemerkt haben, als Sie anderen
Code durchlaufen haben, ist, dass manchmal, wenn Sie sich mit der Höhe und der Breite eines Elements verwirren.
Sie finden heraus, dass es nicht mehr groß genug ist, um den gesamten Text zu halten, den Sie
anzeigen wollten.
Also, was können Sie tun, wenn der Inhalt nicht mehr
in die Box passt, die Sie mit Ihrer Höhe und Breite erstellt haben.
Nun, Sie können einen Eigenschaftsüberlauf verwenden, um zu bestimmen
, wie Menschen auf diesen Inhalt zugreifen können oder ob sie überhaupt darauf zugreifen können.
Die vier Werte für den Überlauf
enthalten sichtbar, was im Grunde bedeutet, dass Sie einen Rahmen gezeichnet haben.
Und da ist eine ganze Reihe von Text drin,
der Text wird tatsächlich über die Box gehen.
Egal, was passiert, der Inhalt ist sichtbar, auch wenn er außerhalb der Linien geht.
Versteckt tut so ziemlich das Gegenteil.
Es steht: [SOUND] Wenn du etwas in dieser Box hast und es zu groß ist,
ist es weg.
Du kannst es nicht sehen.
Jetzt ist das keine gute Idee, denn es wird Probleme verursachen,
wenn der Benutzer die Schriftgröße in seinem Browser erhöht.
Also, wenn Sie eine Art von 600 x 800 Pixel-Box gemacht haben,
und Sie denken, oh das wird großartig sein, kein Problem.
Jeder wird in der Lage sein, das zu lesen.
Was passiert, wenn jemand hineingeht und die Schriftgröße vergrößert?
Ihre Box wird nicht größer, aber der Text tut es so, dass
sie den Inhalt möglicherweise nicht sehen können.
Eine dritte Option besteht also darin, einen Überlauf zu geben.
Und was dies tun wird, ist, dass es dem
Element tatsächlich eine horizontale und vertikale Bildlaufleiste gibt.
Selbst wenn es sich nur um einen Absatz handelt, hat Ihr Absatz plötzlich eine Bildlaufleiste, damit die
Leute alles sehen können, was darin ist.
Der endgültige Wert ist auto, und was er tut, ist es, oh,
ich werde nur Scrollbalken hinzufügen, wenn nötig.
Je nachdem, wie die Person die Website gerade betrachtet.
Ich werde voran gehen und
einige Ressourcen auflisten, um Ihnen einige Beispiele zu zeigen, wie Überlauf aussieht.
Aber im Augenblick werden wir weitermachen und weitermachen.
Denn was ich mit Ihnen teilen wollte, ist diese Idee anderer Anzeigewerte.
Auch hier ändern sich die Browser immer.
HTML5 und zukünftige Versionen ändern sich ständig und
sie versuchen, neue Unterstützung hinzuzufügen.
Das Problem ist, wenn Sie diese neuen
coolen Tools sehen, funktionieren sie nicht immer in jedem Browser.
Inline, Inline-Block, Block und keiner werden überall funktionieren.
Aber hier sind ein paar mehr, die langsam beginnen, Akzeptanz zu gewinnen.
Und das sind Tisch, Grid und Flexbox.
Für Grid und Flexbox überlasse ich es Ihnen, irgendwie damit zu spielen.
Aber ich wollte Ihnen ein Beispiel zeigen, wo viele meiner Schüler die
Tischanzeige wirklich hilfreich finden.
Wie eine Tabellenanzeige funktioniert, ist, dass Sie keine tatsächliche Tabelle mit Ihrem
HTML-Code erstellen, noch haben Sie die Tag-Tabelle.
Aber Sie sagen Ihrem Browser, dass Sie ihn so strukturieren wollen, als wäre es eine Tabelle.
Sie würden also jede Art von enthaltendem Element anzeigen lassen: Tabelle.
Und dann alles, was Sie in schönen Spalten aufstellen möchten,
würden Sie display: table-cell verwenden.
Das klingt also sehr verwirrend, also
wollte ich sicherstellen, dass ich dir ein Beispiel gegeben habe, um mit mir durchzugehen.
Also habe ich hier einen Code, der im Grunde nur ein div ist,
ein paar divs mit einigen Absätzen darin.
Und was ich tun wollte, war, dass ich sicherstellen wollte, dass sie nicht
den gleichen Inhalt haben.
Wie Sie sehen können, ist jedes der divs jetzt nebeneinander, weil wir gesagt haben, dass
wir nicht wollen, dass sie untereinander liegen.
Aber das ist wirklich nicht das, was du gehofft hast, dass es aussieht.
Also lasst uns voran gehen und versuchen, diesen Float links hinzuzufügen.
Save, ich werde hier rüber gehen und mich erfrischen.
Und Sie können sehen, es sieht ein bisschen besser aus.
Also, das ist großartig, weil wir wollten, dass alles nebeneinander ist.
Aber was ich jetzt tun werde, ist, dass ich dir etwas zeigen werde, das nicht
wirklich gut funktioniert.
Und das ist diese Idee, wenn ich die Größe ändere.
Jetzt können Sie diese Idee sehen, dass der Überlauf wirklich wichtig sein könnte, weil
jetzt die Dinge außerhalb der divs selbst gehen.
Außerdem habe ich wirklich keine Art von Marge zwischen ihnen.
Also lassen Sie uns voran und fügen Überlauf, Versteckt,
oder Scroll hinzu, nur um Ihnen zu zeigen, wovon ich dort für eine Sekunde gesprochen habe.
Ich werde es auffrischen.
Und jetzt können Sie sehen, dass alles in der Content-Box enthalten ist, und
ich kann tatsächlich hier reingehen und ich kann jedes einzelne von ihnen scrollen.
Ich bin eigentlich kein großer Fan davon,
weil ich nicht mag, dass die Leute wissen müssen, dass sie scrollen können.
Also werden wir hier etwas Neues ausprobieren, statt dessen, was ich tun werde, ist
die Breite auf 30% zu setzen, und ich werde voran gehen und den Inline-Block verwenden.
Und schauen wir uns an, wie das jetzt aussieht.
Ich muss mich daran erinnern, dass ich ein neues Stylesheet verwende, also muss ich
meinen HTML-Code ändern, damit ich dieses Stylesheet verwende.
Die Anzahl der Male, als ich mit diesen Beispielen für Sie kam, wo ich vergessen habe,
das Stylesheet zu ändern, oder ich vergaß und es falsch nannte, war wirklich peinlich.
Also hoffe ich, dass du dieselben Probleme meidest, die ich hatte.
Hier drüben werde ich es auffrischen.
Sie können sehen, dass dies nicht der Blick ist, auf den wir hoffen.
Es ändert sich die Größe, aber es tut einfach nicht, was wir wollen, weil jeder seine
eigene besondere Höhe hat, weil wir wirklich wollen, dass es einfach dazu passt.
Hier kommt die Tabellenzelle ins Spiel.
Ich werde meine Anzeige von Inline-Block in Tabellenzelle ändern.
Und einmal, wenn ich zu aktualisieren gehe,
werde ich wirklich wissen, warum das nicht funktioniert.
Aber ich will dir zeigen, wenn ich auf „Refresh“ klicke, sieht es
hier wirklich okay aus, weil es geschafft hat, so dass alles klappt.
Je nachdem, in welchem Browser Sie sich befinden, funktioniert dies möglicherweise nicht.
Denn was Sie wirklich sagen wollen ist, wenn ich voran gehen und
diese gebrauchte Tabellenzelle machen werde, vergessen Sie nicht, in Ihren Körper zu gehen und zu sagen, Anzeige.
Alles klar und ich werde mich erfrischen und es wird gleich aussehen,
es wird nur ein besserer Codierungsstil sein.
Jetzt werde ich versuchen, hier
in diesem CSS-Kurs viele Beispiele für Codierung zu setzen, damit Sie damit spielen können.
Aber ich kann nicht genug betonen, dass, manchmal wird es nicht genau das gleiche
für Sie funktionieren, weil Sie vielleicht einen anderen Browser verwenden.
Möglicherweise verwenden Sie denselben Browser, aber eine andere Version.
Das Wichtigste ist, dass du da reingehst
und weiter diese neuen Werte ausprobierst, siehst, was passiert und damit spielst.
Wenn es Zeit für Ihr endgültiges Projekt kommt, dann ist es, wenn Sie
wirklich genau darauf achten, dass alles in jedem Browser gut aussieht.
Das Letzte, was ich sehr schnell erwähnen möchte, war diese Idee der Sichtbarkeit.
Und es gibt an, ob ein Element von einem Benutzer gesehen werden soll oder nicht.
Jetzt sprachen wir darüber früher, als ich über Display keine sprach, aber
was geht auf Sichtbarkeit ist, dass man tatsächlich sehen kann, dass Raum für sie übrig war.
Da ist einfach nichts.
Wenn Sie also Sichtbarkeit verwenden, sind die Optionen sichtbar, ausgeblendet oder
ausgeblendet, wenn Sie Tabellen verwenden.
Wenn Sie dies sehen und sich fragen, was der Unterschied zwischen Anzeige und
Sichtbarkeit ist.
Denken Sie daran, dass
der Browser mit keiner Anzeige so wirkt, als ob er nicht einmal da ist.
Du siehst gar nichts.
Wenn die Sichtbarkeit ausgeblendet ist, wird der Browser den Raum verlassen
, den dieses Element aufnehmen würde, es zeigt es einfach nicht an.
Also endlich, lasst uns voran gehen und überprüfen. Die
Anzeige ist nur ein Werkzeug der vielen, die wir für
die Positionierung der Elemente auf Ihrer Seite verwenden werden.
Frühes Design, das zu entscheiden, wie Ihre Seite aussehen soll, bevor Sie mit dem Programmieren beginnen,
wird die Dinge einfacher machen.
Code nicht denken, dass ich Float-rechtes Design verwenden möchte, und dann entscheiden, oh,
ich muss Float genau hier verwenden.
Nutzen Sie alle verschiedenen Werkzeuge, die wir haben,
wie zum Beispiel Inspect-Element, um Ihre verschiedenen Optionen zu sehen.
Und es wird Ihr Codierungsleben so viel einfacher machen.
Wir möchten zu vermeiden, speichern aktualisieren, speichern aktualisieren.
Verwenden Sie stattdessen diese Tools und
Sie werden feststellen, dass Sie wirklich gute Entscheidungen in Ihrem Design und Ihrem Code treffen.
Danke.