Tailwind CSS - Teil 1 - Die Dokumentation erklären

1. Kursvorschau: Hallo und herzlich willkommen in dieser Klasse. Und diese Klasse, werden wir Sie schnell begleiten, um ein Rückenwind UI Designer zu werden. Dieser Kurs wird finanziert, diese Klasse ist freundlich, das zu tun. Sie wissen nichts über J1 CSS. Als wir mit den Grundkonzepten und Stillelementen beginnen, werden wir zunächst die wesentlichen Themen und Konzepte gründlich erläutern und durch die notwendige Rückenwind CSS Dokumentation wachsen durch die notwendige Rückenwind CSS Dokumentation um Ihnen die Grundlagen dieser Klasse zu vermitteln. Dieser Kurs wird also hauptsächlich die Theorieseite der Kindergesichter sein. Und nach diesem Kurs haben wir Glukose ist niedrig. Die anderen Klassen werden die praktische Seite von Tilman CSS sein, wo wir tatsächlich in Projekte eintauchen und ein paar nette Websites mit bis zu einem CSS implementieren. 2. 1 Background: Okay, also bevor wir die Projekte in diesem Kurs machen, wollen wir die verschiedenen Abschnitte zum Beispiel ein CSS durchlaufen. Also in diesem Video werden wir die Hintergrundabschnitte für die Klassen diskutieren und sagt, ich will CSS. Gehen wir also voran und beginnen mit dem Hintergrundfarbbereich. Nun, es gibt viele verschiedene Farben, die Sie verwenden können. Um die Hintergrundklasse zu verwenden, müssen Sie nur bg schreiben und dann von der gewünschten Farbe gefolgt. Zum Beispiel wird BGO Block uns die schwarze Farbe geben. Ich werde Juli, August, die weiße Farbe sein. Und auch wenn Sie einen Farbton dieser Farbe haben möchten, können Sie den Strich 5000100 verwenden, die und Sie können BG-Transparenz tun oder es transparent machen. Also wieder, es ist sehr einfach, die Farben mit dem Hintergrund zu verwenden. Alles, was Sie tun müssen, ist nur BG, um anzuzeigen, dass es eine Hintergrundfarbe ist. Und dann die Farbe, die Sie wollen, und dann ist der Schatten alles, wenn Sie wollen. Je höher die Zahl, desto dunkler ist der Farbton. Okay, also gehen wir jetzt weiter zu verwenden, die, wie Sie hier sehen können, wir grün haben. Wir können es zum Beispiel in Blau ändern , und dann machen wir es in einen blauen Knopf. Jetzt gehen wir runter und reden über die Deckkraft. Also ist es sehr einfach Login. Sie müssen nur bg Fettleibigkeit verwenden. Und je höher die Fettleibigkeit ist, desto dunkler ist das im Grunde dunkler. Und je weniger die Chance, desto mehr Transparenzen. Es ist sehr selbsterklärend. Und lasst uns jetzt runtergehen. Wir haben die Verantwortung für Tailwind. Alles, was wir tun müssen, ist die verschiedenen Fakten zu verwenden. Zum Beispiel, wenn wir eine bestimmte Farbe für mittlere Geräte mit nur ihrem MD verwenden wollen. Und dann schreiben wir die Farbe, die wir für große Geräte wollen, LG für kleine Geräte, SM, so weiter und so weiter. Jetzt haben wir den Hover-Effekt. Um den Hover zu benutzen, muss ich nur einen Hover vor dem Auto haben, das wir wollen. Und dann, wenn wir den Mauszeiger darüber bewegen und die Farbe ändert sich zu dem, was sie will. Zum Beispiel hier drüben verwenden wir mehrere Hunderte, so dass die, der Rotton wird höher sein, so dass es dunkler sein wird. Und lasst uns jetzt in den Fokus rücken. Wenn wir also darauf klicken, wird es weiß. Wie Sie sehen können, ist die Hintergrundfarbe grau mit einem Farbton von 200. Und wenn wir darauf klicken, wird es weiß. Hintergrund Fettleibigkeit ist sehr einfach als auch. Sie setzen nur die VG, die Hintergrund ist, und dann drehen Sie die Deckkraft und dann die Anzahl der Fettleibigkeit, desto höher ist es, desto mehr Piketty und desto weniger ist es, desto transparenter ist es selbsterklärend. Nun, gehen wir zum Hintergrund Ursprung. Um diesen schönen Effekt zu haben, genau wie ein Briefmarke, hat er diesen coolen Effekt um ihn herum, um ihm diesen Ursprung und diese Authentizität zu verleihen. Sie können Hintergrundursprung Grenze verwenden, und dann können wir Hintergrundursprungs Padding verwenden. Also, um es zu geben, ist mehr Polsterung, wie Sie in Nummer 2 sehen können. Und wenn Sie es etwas geben wollen, wenn Sie es zu einem Sicherungsinhalt machen wollen, dann wird es angezeigt. Der Slack ist genau so, wie er eine Nummer drei zeigt. Und auch, lassen Sie uns auf die spezifischen gehen , die wir nicht wiederverwenden werden, die nur lohnt, es abzudecken. Jetzt Hintergrundposition. Es ist also sehr einfach. Ich meine, das ist sehr gesunder Menschenverstand. Wie Sie sehen können, wenn Sie nach unten auf den Verwendungsbereich gehen, können wir sehen, ob Sie BG LefTop es tun, wer wird den Hintergrund nach links und nach oben kleben. Wenn Sie nur die Spitze zu tun, war dies auf die obere Perle Ihr Thema zu bekommen oder springen Sie in die obere rechte Ecke. So weiter, so weiter. Also gehen wir jetzt auf den Hintergrund Wiederholungen. Bei Hintergrundwiederholungen können Sie also einen Hintergrund haben, der sich grundsätzlich wiederholt, bis er den gesamten Bildschirm ausfüllt. Oder Sie können keine Wiederholungen haben, was es im Grunde nur einmal tut. Wählen Sie einfach die Hintergründe aus. Wie Sie hier sehen können. Sie können horizontal wiederholen ist auch, dass es horizontal verteilt ist. Wieder ist sehr einfaches Zeug. Sie können nur wollen, um Dokumentation und alles, was Sie wollen, wollen Sie ins Detail gehen. Du kannst es einfach hier rüber sehen. Sie haben Wiederholungen vertikal wieder, nur Vesikel wiederholt sich. Also wärst du einfach GIPHY und ich sah Peter vertikal. Okay, jetzt gehen wir zu Ihrer Hintergrundgröße. Also, welche Hintergrundgröße? Okay, also Hintergrundgrößen sind ziemlich selbsterklärend, wie 0, 0, 2 tut. Es zeigt Sie im Grunde automatisch auf seine Standardgröße. Also über die Bildgrößen wird es zeigen, wie es ist. Wir haben gedeckt. Nun, wenn Sie bg Abdeckung verwenden, War es tun wird, wird es im Grunde den gesamten Bereich abdecken, die gesamte Szene. Also, das ist im Grunde gibt es keine Leerzeichen. Wenn wir jetzt nach unten gehen, haben wir enthalten, enthalten wird im Grunde machen das Bild so groß wie es ohne sein kann, ohne das Seitenverhältnis zu ändern und auch ohne es zu beschneiden. Wir haben auch reaktionsschnell. So verantwortungsvoll im Grunde machen es reaktionsschnell. Und so jetzt gibt es Hintergrundbild weg. Hintergrundbild. Wir können BGN auf verwenden, um das Hintergrundbild keines zu machen. Es gibt also kein Hintergrundbild und wir können die verschiedenen Klassen verwenden, wie Sie hier sehen können, können wir haben. Gradienten, so einfach. So implementiert es die Farbverläufe von unten nach oben. Wir haben zwei oben rechts. Also im Grunde macht es einen Farbverlauf nach oben rechts, von unten nach oben rechts und so weiter und so weiter. Wie es dort heißt, haben wir auch lineare Farbverläufe. Und so gibt es ein Element und Zutat Hintergrund. So können Sie wie die Richtung verwenden, in die Sie gehen wollen, genau wie ich es erklärt habe. Und dann können Sie in den Farben, die Sie wollen. So zum Beispiel, von 400 bis VI, lesen, 500 zu zeigen, im Grunde, dass Sie in der Schule setzen und dann werden wir den Gradienten für Sie tun. Also dann haben wir Farbverlaufsstopps. Also, wieder, genau wie ich es erklärt habe, aber die Farbe hört auf. So können Sie im Grunde eine Startfarbe haben und es geht von grundsätzlich einer Startfarbe zu Weiß zu Weiß. Und wir können von einer Farbe zu einer Farbe haben. Also von einer Anfangskultur und in Farbe. Und wir können auch drei Farben haben. Also von einer Farbe zu einer anderen Farbe zu einer anderen Farbe. So unterstützt grundsätzlich von einer bis drei Farben. Grundsätzlich fasst die Hintergrundklassen für dieses Video zusammen. Auch hier habe ich vielleicht ein paar Klassen übersprungen, weil einige von ihnen unnötig waren und Sie sie nicht wirklich nur unter bestimmten Umständen verwenden. Das sollte Ihnen also ein gutes Verständnis der Hintergrundfarben geben , die wir in unseren Projekten verwenden werden. Alles klar, Leute, jetzt, da wir die Gruppe der Hintergrundklauseln besprochen haben, lasst uns weitermachen und tatsächlich einige dieser Klassen implementieren , um zu sehen, wie sie in Aktion aussehen. Okay, zuerst machen wir ein neues div und geben wir ihm eine Hintergrundfarbe. So geben Sie ihm eine Hintergrundfarbe blau mit einem Blatt von 300. Und lassen Sie uns die Höhe davon auf der Höhe des Bildschirms machen. Wie Sie sehen können, haben wir diese Hintergrundfarbe. Jetzt erhöhen wir das Blatt, um es dunkler zu machen. Wie Sie sehen können, ist dunkler geworden. Wenn wir es zu einer bestimmten Farbe für zum Beispiel große Geräte machen wollen , können wir das mit LG und dann Semikolon tun, im Grunde mit dem, was wir wollen, kein Semikolon, Doppelpunkt. Und dann können wir färben, was wir wollen. Zum Beispiel sind Sie bei 600. Also, jetzt, wenn die Breite wird Gerät erlaubt, dann ändert sich die Hintergrundfarbe zu ihm. Jetzt lasst uns auch die Fettleibigkeit machen. So zum Beispiel, würde hier nicht das Gegenteil für große Geräte tun. So können wir haben, wenn das Gerät groß ist, können wir BG Fettleibigkeit 50 tun. Und dann sollte das es im Grunde transparenter machen. Wie Sie sehen können, ist das Rot jetzt transparenter. Und jetzt reden wir über den Hover-Effekt. Wenn wir darüber schweben wollen, können wir es als Farbe Zola zum Beispiel machen, schweben Sie über Vg, grün und ich werde wie ein 100 tun. Also, wenn ich jetzt den Mauszeiger über, wird das div grün. Lassen Sie uns nun auch das Hintergrundbild abdecken. Ist noch eine wichtige Sache, die wir in unseren Projekten verwenden werden. Wieder, hey, ich versuche, das Wichtigste zu decken, weil es Tausende von weicheren bestimmte CSS gibt und es viele unnötige Dinge gibt. Also werde ich hauptsächlich das Fundament-Zeug abdecken. Wenn Sie in die Details kommen wollen, können Sie immer gehen und sagen eine CSS-Websites und Sie können im Grunde alles finden, was Sie wollen. Die Sonaten haben ein neues div. Und das gibt ihm ein Hintergrundbild mit Stil zum Beispiel. Also machen wir Hintergrundbild. Sie finden die URL, also ist das in Ordnung. Nur ein Rückenwind Logo und ich bin immer noch Bild. Okay, nehmen wir das zum Beispiel. Und jetzt lasst es uns stylen. Also einige Klassen, wir werden minimale Höhe des Bildschirms verwenden. Eigentlich, nein, lassen Sie uns das entfernen. Für jetzt. Wir werden bg benutzen. Keine Wiederholungen, VEGF oben. Lassen Sie mich also aufhören, damit sich das Bild wiederholt. Und VEGF gestürzt im Grunde richten Sie es ganz nach links oben. Und auch als diese Höhe geben, aber das gibt uns die Höhe des Bildschirms. So wird es im Grunde alle nehmen die volle Höhe des Bildschirms. Und wie Sie Ihren Kopf sehen können, wenn wir ihn größer machen, wenn wir dieses Panel größer machen. So können Sie sehen, dass Aktien mit der oberen linken Seite ändern wir es nach oben. So eine Art von LefTop. Wir werden nur BG, die oben, im Grunde Mitte und machen es Top-Aktien oben drauf, du und Watson. Watson, Watson wird im Grunde in diese Position gehen. Es wird auch über die Hintergrundgröße gesprochen. Es gibt also ein paar Größenklassen, die wir verwenden können, um das Hintergrundbild zu ändern, die Größe davon. Zunächst einmal lassen Sie uns das Bild ändern, weil wir etwas wollen, das Sie mögen können, etwas mit einem Hintergrund bei unserem nächsten perfekt, weil es einen guten Hintergrund hat, so dass wir sehen können, wie viel im div im Grunde abdeckt. Also lasst uns dieses Bild ändern. Und jetzt, wenn wir, wenn wir die Vigenere Wiederholungen BG verwenden, zum Beispiel, BG Abdeckung gestrichelt im Grunde bedeckt den gesamten Bildschirm mit dem Bild. So Vg Abdeckung, wie Sie jetzt sehen können, das ganze Bild. Das ganze div ist mit dem Bild bedeckt. Wenn wir das tun, wir enthalten, dann wird es im Grunde nicht ausschneiden würde das Bild. Also ist es im Grunde versuchen Sie, das gesamte Bild in diesem div zu bekommen. Und wenn wir BGO zwei machen, dann würde es tatsächlich die tatsächlichen Abmessungen des Bildes erhalten und es wird innerhalb des div angezeigt. Ok? Wie Sie sehen können, der Grund, warum ich werden wollte, wurde der Grund, warum ich werden wollte,so groß, weil es eine Dimension dieses Bildes gibt. Also für die Verlaufsfarben, Es gibt eigentlich drei Arten von Kreuzen, die wir verwenden können. So können Sie nur eine Startfarbe haben, die schließlich transparent wird. Also lasst uns weitermachen und das tun. Lassen Sie uns ein div haben, und geben Sie ihm eine Farbe. Also lasst uns, geben wir ihm tatsächlich einen Gradienten von Strand-Gradienten nach R. Also geht es nach rechts. Und wir werden alle gestoppt den Farbverlauf von verwenden, zum Beispiel, blau mit dem Farbton von 500. Und wir werden es nur verlassen, wie Sie sehen können, wird von YouTube, die Sie transparent sollten. Und jetzt lasst uns den anderen machen, wo man von Farbe zu einer anderen Farbe haben kann. So können wir eine andere Farbe im Grunde haben, die zwei ist, zum Beispiel lila. Oder lasst uns einfach die Farbe ändern. Lassen Sie uns von tun, von Trauer, eine 100, zwei blaue 600. Und wir haben 100 bis 600. Wie Sie jetzt sehen können, haben wir einen Farbverlauf mit zwei Farben, drei Farben. Sie können das auch mit einer mittleren Farbe tun. So können wir sie auch hineinlegen, was in diesem Fall blau sein wird. Und wir können tun, wir können durch Gnade tun, wie Sie sehen können, jetzt haben wir die rote. Jetzt haben Sie also grüne, blaue und rote Farbverläufe, offizielle Kopien, die unsere Farbverläufe im Grunde abdecken. Wenn wir also die Richtung des Gradienten ändern wollen, können wir das von der Klasse aus tun. Also haben wir BG Gradient zu unserem in diesem Fall geht im Grunde nach rechts. Also von links nach rechts, wir tun 22 cr. Also oben rechts, das wird die Richtung von im Grunde die Richtung nach oben rechts sein, zum Beispiel, GB wird sein, tut mir leid, würden Sie unsere unten rechts sein? Es hängt also von der Richtung ab, die Sie wollen. Sie können im Grunde die Richtung des Gradienten wählen und es wird diese Richtung grundsätzlich für Sie umsetzen. Das deckt so ziemlich diesen praktischen Aspekt der Hintergrundgruppenklassen ab. Ich meine, ich habe nicht alles abgedeckt, was wir in der Theorie getan haben. Hauptsächlich denke ich, dass ich den Hintergrund nur verpasst habe, weil wir im Grunde nur versuchen die wichtigsten Dinge zu decken, die wir tatsächlich verwenden werden, und die Dinge, die tatsächlich praktisch sind. Wenn Sie also ins Detail gehen möchten, können Sie immer bis zu einem CSS durchgehen und Sie können diese Klassen zuerst ausprobieren. 3. 2 Border: Lassen Sie uns nun die Randradius-Gruppen abdecken. Diese Gruppe von Klassen wird sehr wichtige Projekte sein , die wir umsetzen werden. Also lass uns sie abdecken. Also haben wir keine abgerundet. Dies hat im Grunde keinen Grenzradius für die Gewässer des Elements, das wir verwenden. Wir haben SM abgerundet. Dies gibt Ihnen im Grunde einen kleinen Grenzradius von 0,125 REM. Und wir haben gerundet, was Ihnen im Grunde einen mehr Grenzradius von 0,25 RAM, RAM gibt. Und wenn wir nach unten gehen, wird der Grenzradius mehr wie, effektiver. Und es wird, es gibt Ihnen im Grunde mehr höheren Grenzradius. Und wenn wir wie zum Beispiel haben wollen, können wir auch angeben, die eigentliche Holz ist, dass wir wollen Ziel. Also, wenn wir wollen voll zu tun, wollte, zum Beispiel, tun Sie nur den oberen Grenzradius, Sie könnten das tun, können Sie t. So können wir im Grunde die genauen Wörter angeben , die ich verwenden will, um die richtige wollen wir tun könnten sind wir am unteren Rand wollten, könnten Sie B tun, und wir können auch die Größe davon angeben. Also ja, es ist sehr einfach zu bedienen. Wenn wir also jetzt nach unten scrollen, können wir uns diese Beispiele im Grunde ansehen. So wie Sie sehen können, haben Sie abgerundet, glätten Sie das Wasser, es ist sehr minimal. Und wenn Sie wie haben, haben wir sie abgerundet, haben MD und Algen. Algen, wie Sie sehen können, hat es den höchsten Grenzradius. Also haben wir auch Pillen und Kreise. Damit wir das voll machen können, um uns einen Kreis zu geben. Und Sie können haben, so wie Sie sehen können, ist das Wasser wirklich stark mit der um es für jetzt. Und wir haben auch das Nicht-Selbst abgerundet. Wir haben bereits einen Grenzradius für eine bestimmte Klausel. Wir können entfernen, dass die Wahl abgerundet nicht, wie Sie sehen können, dass der Header, das Wasser ist weg. Und wir können auch eine bestimmte Grenze Radius von den Elementen oben oder rechts oder unten Randradius wählen angeben und wir können im Grunde eine Kontrolle sie. Und die Person, die die genauen Töpfereien setzt, will ich die Breite. Wie Sie sehen können, ist es sehr einfach, selbsterklärend. Hast du nicht einfach die Grenze gesteckt und dann die Nummer eingelegt. Je höher die Zahl, desto mehr Breite wird das Modell haben. Und wenn Sie einen bestimmten Farbton anvisieren wollen, können Sie das mit Blackboard tun, dass sie für, was sind unsere G54 oben sind 48 L für links, so weiter und so weiter. Und wie Sie hier sehen können, haben wir die verschiedenen Grenzen, Breite, die Höhe, die Breite, desto mehr Elite denken wir sollten, wie Sie sehen können. So auch bei einzelnen Klängen, genau wie wir es erklärt haben. Grundsätzlich zielgerichtet mit der spezifischen Website. So T für Top oder Fluoride vor etwas Alpha links gekauft. Wie Sie sehen können, können wir tatsächlich reden, es gibt Wasser würde ein div haben und weniger im Grunde geben Sie ihm einen Grenzradius mit, zum Beispiel, abgerundeten SM. Lassen Sie uns also eine Höhe von 12, 10, 12 geben und rot machen. Und dann diese zwei abgerundeten SM. Wie Sie sehen können, haben wir eine wirklich kleine Radien. Lassen Sie uns das ungenutzte gerundete LG erhöhen. Und wie Sie sehen können, haben wir viel stärkeren Grenzradius. Nun, lassen Sie uns auch abgerundet verwenden, um einen kompletten Kreis zu machen. Wie Sie jetzt sehen können Kreis. Und jetzt nach dieser Runde und Essen ist nicht abgerundet, um es zu machen, ihren eigenen Radius zu entfernen. Wie Sie sehen können, funktioniert das. Und nun lasst uns die Spitze des Wassers anvisieren, das es ist. Lassen Sie uns einfach eine Registrierung geben, führen Sie die CI aus, und wir werden drei Excel machen. Wie Sie sehen können, ist der obere Grenzradius wirklich stark und es gibt keine Grenze auf der Unterseite. Also, jetzt, OK, so geben wir es jetzt einige Rahmenbreite, die Sie tun müssen wie Grenzen, Ihre Brieftasche, Sie, zum Beispiel, das gibt Ihnen, was die Breite, wie Sie sehen können. Jetzt als die Grenze, die rechte Seite, wollen wir es nur geben, damit wir Grenze rechts tun können 8. Und das sollte uns im Grunde nur die rechte Seite Wasser geben. Und jetzt lassen Sie uns zum Beispiel, Grenze Indigo 600 tun. Und das sollte dir einen Kolorismus geben. So ist die rechte Seite jetzt mit der Farbe Indigo und einem Farbton von 600 gefärbt. So dass Sie im Grunde das ändern können, indem zum Beispiel Rand, oben, links, unten verwenden. Sie können das spezifische Wasser, das Sie wollen, ausrichten. Und das deckt im Grunde alles ab, was in Bezug auf die Grenzen wichtig ist. 4. 3 Flexbox und grid: Jetzt werden wir die Flexbox- und Gitterglukosen abdecken. Das ist sehr wichtig, weil wir das in anderen Projekten sehr viel verwenden. Und dies ist eine der grundlegenden, eine der grundlegenden Gruppenklassen, die Sie immer verwenden werden, wenn Sie, wenn Sie mit Telemachus uns arbeiten. Beginnen wir zunächst mit der Flex-Richtung. Wie Sie hier sehen können, haben wir vier Klassen, Vortrag, die im Grunde als Elemente ist. Innerhalb der Elemente, die Sie in einem div hinzufügen möchten, eine Zeile. Und wenn Sie umgekehrt gehen oder im Grunde drehen Sie es und im Grunde setzen Sie es von rechts nach links anstelle von Restaurants. Und Flex Coase, die im Grunde an den Elementen innerhalb einer Spalte div, wird es seine in einer vertikalen Weise hinzufügen. Und Flux Kern umgekehrt wird es im Grunde, im Grunde die Elemente umkehren. Also beginnend von unten nach oben statt von oben nach unten. Hier drüben haben wir die Reihe. Genau wie ich erklärt habe, wenn Sie Flexor verwenden, wenn Sie diese drei Elemente hier drüben haben, wenn Sie div haben wollte 23. Nun, die hinzugefügt in einer horizontalen Art und Weise, so dass sie auf der rechten Seite von jedem hinzugefügt werden. Und wenn Sie, wenn Sie flexible Reverse anwenden, wird es im Grunde die 0 anwenden, fügen Sie sie den ganzen Weg nach rechts und zum linken Atom, im Grunde eins nach dem anderen nach links. Und wenn Sie Flusskohle verwenden, um sie in einer vertikalen Art und Weise hinzuzufügen, wie Sie genau dort sehen können. Und wenn Sie flex verwenden, flex column reverse, das wird sie von unten nach oben hinzufügen, um es reaktionsschnell zu machen. Wieder, wie wir erklärt haben, die andere Gruppe kreuzt, müssen wir nur den Gerätebildschirm angeben. Und dann können Sie im Grunde die Klassen hinzufügen, die Sie eine Bestellung wünschen, um das auf verantwortungsvolle Weise zu verkaufen. Flex Wrap Dies ist auch für die Projekte sehr wichtig, die wir viel verwenden. Also, was das tut, ist, dass wir, wenn Sie von hier aus fortfahren, drei Arten haben. Sie haben Flex Wrap, Flex Wrap Reverse und FlexEurope. Also wollen wir Ihre App nicht, dann können Sie Flexner anwenden. Und was dies tun wird, ist, dass selbst wenn wir eine glatte haben , die kleiner ist als unser Inhalt, das letzte Element war, es wäre im Grunde nicht verpackt und Unsicherheit in der nächsten Zeile. Es wird im Grunde auf der gleichen Linie bleiben. Und wenn Sie Flex Wrap verwenden, wie Sie sehen können, wo wir Flex Wrap verwendet haben, haben wir drei Elemente in diesem Hauptdiv, das heißt, das das Extra verwendet. Nun, das dritte Element wird im Grunde an die zweite Zeile angehängt, anstatt auf der gleichen Zeile fortzufahren, weil es nicht in eins passen kann und sicher ist, dass es im Grunde in der nächsten Zeile eingefügt wird. Und wenn wir schnell umgekehrt sind, was dies im Grunde tut, fügt es die Elemente von unten nach oben oder von links nach rechts hinzu, im Grunde in diesem Fall. Und wieder, um es reaktionsschnell zu machen, geben wir einfach den spezifischen Gerätenamen an und wir können die spezifischen Flex-Wrap-Klassen einfügen . Beginnen wir also mit Flex eins. Dadurch kann ein Flex-Element nach Bedarf wachsen und schrumpfen und ignoriert die gleiche Anfangsseite. Also im Grunde, wenn wir haben, sagen wir, wir haben ein Element, eine Entwicklung, die Flex verwendet, drei Elemente, die Flex eins hat. Dann sehen wir, wir haben drei Elemente. Jedes Element wird im Grunde nehmen die Hälfte des Raumes dieser Entwicklung ist Fluss. Wenn wir also drei haben, dann würde Israel ACE2 aufnehmen, genau wie wir zuvor mit dem erklärt haben, mit der Angabe eines spezifischen Gewichts, wie zum Beispiel mit der dritten Hälfte. In diesem Fall müssen Sie das tun. Wir können einfach sagen, flex eins und es ist automatisch würde dort mit für uns setzen. So zu sagen, in diesem Fall haben wir auf dieses Beispiel herausgefunden. Hier drüben. Wir haben drei Elemente, das ist Flex eins, und sie teilen ein Drittel der übergeordneten Elemente. Also teilen sie sich ein Drittel des Lehrplans und zwei, weil sie hart für sie waren, würden sie jeweils CO2 nehmen, also automatisch, einfach, also lasst uns gehen und es sieht so aus, als ob keine Wellenlänge, so auch, ist es uns erlaubt Integral und Getränk unter Berücksichtigung ist nicht Schuhgröße. Es wird also im Grunde sehen, wie viel Inhalt es für diesen Artikel gibt. Und es wird die Größe von x entsprechend der Inhaltsseite anpassen. Größe, die im Grunde Anfangsgröße ist. Für Flex One. Wenn es einen Flex gibt, wird er ihn grundsätzlich entfernen. Sie sehen, dass Sie zum Beispiel schwarz verwenden. Sie haben viele Klassen. Ich möchte nur den Flexner entfernen, besonders Sie sehr praktisch, wenn Sie das tun wollen. Zum Beispiel, debuggen Sie etwas oder ähnliches, stellen Sie sicher, dass es funktioniert. Sie können das leicht mit Flexibel tun, da Sie den anderen Prozess nicht entfernen müssen , um wieder eine Responsive zu machen, genau wie ich zuvor mit dem anderen Gruppenprozess erklärt habe, können Sie einfach die spezifische Bildschirmbreite angeben. Also MD, SM, LG, und dann setzen Sie die Flex-Klassen, die Sie wollen, so wird es reagieren. Und das fasst so ziemlich den Flex zusammen. Also, jetzt gehen wir zur Flex-Crew. So haben wir Flex gezogen Euro und Flex-Gruppe. Also, wenn wir diese verwenden, weil es verhindert, dass der Artikel tatsächlich mit der Bildschirmbreite wächst. Also haben wir Beine wuchs auf dann wird es im Grunde nehmen so viele Arten es kann im Grunde verfügbar. Werde nicht so gut. Sie wieder, wie ich erklärt habe, wir haben dieses Beispiel. Sehen Sie die Elemente, die eine Sperre haben, das mittlere Element. Dieser verwendet Fixtures Sie, wie Sie im Code sehen können. Und jetzt, wenn wir es größer oder kleiner machen, Flammen wachsen, werden Sie immer gesperrt sein und es würde nicht wachsen. Und andere Elemente verwendet fest wachsen auf. So wird es tatsächlich wachsen und wachsen und wachsen. Und es wird tatsächlich im Grunde erhöht und alle nehmen jede, jede verfügbare Größe und es wird ausgeführt werden. Es wird im Grunde zunimmt, legt entsprechend fest. Jetzt, und wir haben zwei Klauseln, Spülung 0 und fix Schrumpfungen, schrumpft, lässt das Element nicht schrumpfen. Und schrumpfen, ermöglicht es, zu schrumpfen. Das ist so ziemlich es. Es sei denn, decken Sie nur über Inhalt. Diese werden ein paar wichtige Gruppen von Klassen sein. So rechtfertigt gelehrt, es ist alles im Grunde. Sobald wir also ein Element haben, das, nur wenn ich beginne, die Elemente im Inneren verwendet , wird es in einer von links nach rechts angewendet werden. Also, wenn wir zum Beispiel eine Spalte haben, dann wird es von oben nach unten sein. Und wenn wir im Grunde eine Reihe haben, dann wird es von links nach rechts angewendet. Begründen Ende wird im Grunde genau so handeln, wie wenn wir eine Zeile umgekehrt haben. Also, wenn wir eine Zeile haben und wir Zeilenumkehrung verwenden, um zu rechtfertigen und wird das im Grunde tun. Dann werden die Elemente für die Verwendung einer Zeile hinzugefügt. Dann fügen Sie die Elemente von rechts nach links und Spalte zwei andere von unten nach oben. Begründen Zentrum wird im Grunde zentriert, um eine Spalte in der Mitte des Bildschirms wie vertikale, vertikale Santa Anna zu haben , für die Verwendung von Wachstum wird es im Grunde horizontal zentriert , rechtfertigen zwischen ihm wird im Grunde geben einen Raum zwischen den Elementen entsprechend, wie viel Platz es auch gibt. Auch diese vor allem zwischen Bäumen um und vor allem Zotten. Diese sind also in der Funktionalität sehr ähnlich. So Unterschiede zwischen gibt nur gleichen Raum zwischen den Elementen. Nur die Elemente drehen sich um, tatsächlich kümmert sich um die um die Gegenstände, nicht zwischen den Gegenständen. Nehmen wir an, wir haben Elemente in einem div. Nur die erste und letzte haben wir im Grunde eine gleiche Menge an Speicherplatz, also zwischen einem und dem tatsächlichen div. Auf der linken Seite des einen wird es den gleichen Abstand zwischen genau wie drei und der rechten Seite haben. Also diese 21 und linke Seite werden gleiche Ränder haben, würde genau wie drei und die rechte Seite, das basiert auf denen zwischen den Seiten. Also gibt im Grunde gleichen Raum zwischen den Elementen und den umgebenden Elementen. Also im Grunde ist das Eltern-Container auch, der übergeordnete Container hat auch den Rand zwischen dem Element und dem Container wird der gleiche wie der Rand zwischen den Elementen und den Elementen sein. Also ja, es ist ziemlich verwirrend. Ich empfehle Ihnen, es im Grunde in der Dokumentation zu überprüfen und damit herumzuspielen, damit Sie im Grunde verstehen können, aber im Grunde ist der Wechsel zwischen hauptsächlich, was wir wild verwenden werden, um Sprache um eine bestimmte bereit, wir werden das benutzen. Okay, also lasst uns jetzt die hier gezeigten Beispiele durchgehen. Also haben wir den Start rechtfertigen. Es fügt es im Grunde von links nach rechts hinzu. Richten Sie die Mitte aus. Die Elemente werden in der Mitte hinzugefügt. Wir müssen nur zu Ende, dies wird auf der rechten Seite hinzugefügt werden. Ich denke, ich habe den Fehler von ihr vor gemacht, weil ich sagte von n vorgeschlagen wird, wird das gleiche wie mit Flexor umgekehrt sein, aber es ist eigentlich nicht, weil flexible, reversible ado, im Grunde eine auf dem ersten Element hinzugefügt wird, wie eine, und dann wird der zweite hinzugefügt. Es ist also ein bisschen anders, im Grunde zu rechtfertigen und die Elemente nach rechts auszurichten. Während Fluss, Fluss durch umgekehrte im Grunde Flip sie, wie auch es 1, 2, 3 wird 321 sein. Ich wollte das nur klären, bevor ich fortfahre. Also Raum zwischen so, was dies tut, es kümmert sich um den Abstand zwischen den Elementen und es wird seine gleichermaßen, gleich zwischen ihnen. Also 123 wird zwischen ihnen haben, der Abstand zwischen ihnen wäre gleich. Während Raum herum, wir kümmern uns nicht wirklich um das Spezifische, na ja, wir kümmern uns um den Abstand zwischen den Elementen, aber die gleichen Mengen werden zwischen eins und dem Container und drei auf dem Kontinuum liegen. Der Abstand zwischen einem und der linken Seite, also der Abstand zwischen dem Behälter und dem eins, wird der gleiche sein wie der Abstand zwischen drei und dem Container auf der rechten Seite. So dass der Abstand, Abstand um diese Elemente werden gleich sein. Und bitte gleichmäßig, Es ist im Grunde gibt gleichen Abstand zwischen, zwischen allem, also zwischen den Elementen und zwischen den, zwischen den Elementen als auch. Das deckt also die Rechtfertigungsinhalte ab. Nun gehen wir weiter, um Gegenstände zu rechtfertigen. Okay, jetzt lassen Sie uns decken, rechtfertigen Gegenstände, die wir eigentlich nicht wirklich brauchen, um dies zu decken , weil es so ziemlich wie gerechtfertigt ist. Genau wie Inhalte rechtfertigen. Der einzige Unterschied besteht darin, dass dies bei Rastern verwendet wird. Also meine ich das einzige, was wirklich ist, wirklich Ihre Klasse, suggestive Item Stretch-Klausel zu dehnen. Das ist anders. Ich meine, das gibt es, dass es genau so sein wird, wie die Flex-Gruppe es war, dem Artikel zu erlauben, so viel spezifisch für die Rechtfertigung aufzunehmen. Begründen Sie Inhalte ist, dass Elemente nicht Raum gleichmäßig Raum und Abstand zwischen verwenden. Es hat keine Diskurse und es hängt von Waren ab. Also ja, das ist so ziemlich es. So können wir jetzt weitergehen und zum nächsten Abschnitt übergehen. Richten Sie also den Inhalt aus. Ich werde das nicht abdecken und es wird das kurz abdecken. Die Hauptunterschiede zwischen dem rechtfertigen Inhalt und Rechtfertigung von Elementen ist sehr einfach. Der Unterschied besteht darin, dass es Dienstprogramme zur Verfügung stellt, um zu steuern wie Zeilen in mehrjährigen Flex- und Grid-Containern positioniert werden. So haben Sie diese Kurse, wie Sie Inhalte konsumieren, zentrieren Sie bewusstes Denken, genau wie wir abgedeckt, und sie rechtfertigen den Rechtfertigungs-Inhalt und rechtfertigen Elemente. So Wettbewerbe und mischen Sie den Inhalt. Zentrieren Sie es und beginnt es im Grunde von links nach rechts und richten Sie es bis zum Ende aus. Spezifische Sachen, die wir wollen und sind Unterschiede ist, dass es steuert, wie ROS Sauerstoff und reifen Flex verärgerte Behälter. Gruppe von Klassen sind Ausrichtungselemente. So richten wir Elemente bietet Dienstprogramme für die Steuerung, wie Flex und Rasterelemente entlang einer kontinuierlichen Querachse positioniert werden. Also im Grunde erlaubt es Ihnen, die Elemente virtuell zu positionieren. Also haben wir Dinge Gedanken. Beginnen wir mit den Elementen Gedanken. Wie Sie sehen können, sind alle Artikel im Grunde gestoppt den Bestand nach oben. Und wir haben ausgesandt, ob sie tatsächlich in der Mitte ausgerichtet sind. Und wir haben Ende mit einem. Also im Grunde sind sie an den Boden geklebt. Und wir haben Grundlinie. Baseline ist im Grunde, wenn sie sind, wenn der Inhalt von ihnen zentriert ist. Lassen Sie uns nun auch die Gesellschaft abdecken. Wir haben auch Stretch, die wir nicht abgedeckt haben. Strecken im Grunde streckt die Höhe sollte mit dem Behälter übereinstimmen. So wird es ausgestreckt. deckt so ziemlich die Ausrichtungsgegenstände jetzt ab. Dies fasst also unsere Flex- und Grid-Gruppe von Klassen zusammen. Wie Sie aus allen Abschnitten sehen können, die wir behandelt haben. Ich hoffe, das ist im Grunde, wenn Sie etwas brauchen und Sie im Grunde mehr darüber im Detail erfahren möchten, gehen Sie einfach weiter und sagen Sie, wenn die Dokumentation ich es sehr empfehle , weil es alles im Detail erklärt, aber deckt grundsätzlich das gesamte Flex-Flex-Box-Modell und das Gittersystem ab. 5. 4 Layout: potente Gruppe von Klassen ist die Container-Klassen. Und dann wird es im Grunde eine Klasse sein. Dies ist eine weitere wichtige Aufgabe, die wir in unseren Projekten einsetzen und Sie werden in Ihrer Zukunft viel nutzen. Tones verwendet Projekte. Also haben wir einen mit seinem Container gekreuzt und wir können es verwenden, für grundsätzlich können wir als MMD LG für die Breakpoints haben. So erlaubt es grundsätzlich, enthält im Grunde Gegenstände und Inhalte. Also legen Sie im Grunde Ihre Gegenstände in einen Behälter und gibt dann mit ihm, es wird automatisch die maximale Breite anpassen, so dass, wie Ihr Bildschirm bekommt mich zwei verschiedene Geräte unterschiedliche Breite haben. Überprüfen Sie also im Grunde die Breite und es wird eine maximale Breite für dieses aktuelle Gerät haben. Also lassen Sie uns einfach ein Beispiel zeigen. So wird es nuklearer. So wie Sie es jetzt teilen können, haben wir, unsere Gerätebreite ist 446. Wenn wir das erhöhen würden, wird es im Grunde zunehmen und bis Sie 640 bekommen. Also gehen wir zurück zu der Dokumentation ist zu erklären. Also haben wir SM-Geräte ist keine Geräte. Also würde der Container nicht haben, wenn wir einen Bildschirm mehr als 640 Pixel haben, wird er im Grunde eine maximale Breite von 640 Pixeln haben. Also, jetzt sind wir bei 640. Wie Sie sehen können, ist die maximale Breite 10. Also jetzt ist die maximale Breite zwei oder 640, obwohl unser Gerät 744 Pixel ist. Warum? Weil wir zurück zur Kommutierung gehen. Wie Sie sehen können, ist der nächste MD. Md erfordert, dass der Bildschirm über 768 Pixel liegt. Einer ist darüber, dann wird es die maximale Breite auf die 768 setzen. Also wollte ich im Grunde erreichen, dass, sobald wir Hunderte erhalten, die maximale Breite erhöht überschreitet. Also haben wir diese Haltepunkte. So passt ein Container automatisch die maximale Breite an, so dass der Inhalt nicht über Bord geht. Und es sieht nicht aus, es sei denn, Sie mögen eine bestimmte Klasse, mit der Sie Ihre Inhalte überlaufen können. Und dann würde es nicht gefallen, wenn Sie flex wrap none verwenden, dann würde es erlauben, dass der Inhalt auf dem Bildschirm bleibt. Ansonsten erlaubt es Ihnen, den Inhalt im Bildschirm zu behalten und der Benutzer müsste nicht scrollen. Also weiß ich, dass das Ding der erste ist, der erste Haltepunkt. Gehen wir zur Dokumentation. Der erste Haltepunkt hat eine maximale Breite von 100. Und das würde angewendet werden, wenn Ihr Bildschirm Geräte unter sechshundertsechshundertvierzig Pixel. Das fasst den Container zusammen und wie er im Grunde hält, enthält die Elemente und wie es, wie er es reagiert. Jetzt werden wir die Positionierung abdecken, die Positionsgruppe der Klassen. Diese sind sehr wichtig, wenn Sie Ihre Elemente positionieren, wenn Sie sie auf Ihrem Stehen verwenden. Also, was wir vor allem die absolute oder relative Positionierung abdecken , weil diese diejenigen sind, die wir während des gesamten Projekts verwenden werden. Und Sie werden sie als Rolle in den zukünftigen Projekten nutzen. Lassen Sie uns also die absolute Position abdecken. Zunächst einmal werde ich tatsächlich die relativen Grade entdecken. Das ist, was wir meinen, verwenden, um relative Position ermöglicht Positionen und Elemente entsprechend dem normalen Fluss des Dokuments. Wenn Sie also keine Elemente davor haben und dann das nächste Element danach im Code hinzufügen, wird es tatsächlich direkt danach positioniert. Also gleich nachdem der andere endet, wird dieser positioniert sein. So wie Sie sehen können, eine sehr Werbung Eltern und Sie haben absolutes Kind. Also, wenn wir das haben, haben wir zum Beispiel den Absatz Allel Eltern-div, nachdem es sein wird, wird im Grunde direkt nach ihrem relativen Elternteil eingefügt. Absolute Positionierung. Mit absoluter Positionierung können Sie also ein Element außerhalb des normalen Dokumentflusses positionieren, wodurch die benachbarten Elemente so wirken, als ob das Element nicht existiert. Also würde der davor das aktuelle Element nicht wirklich beeinflussen. Nehmen wir also an, wir haben im Code ein div, und dann den nächsten Schritt, nachdem es absolut positioniert ist. Jetzt ist das erste Element, bevor es relativ über der Positionierung positioniert ist, es würde nicht das nachfolgende Element beeinflussen. Also würde es nicht direkt danach eingefügt werden, als ob es nicht mit dem Verwandten sein könnte. Also in diesem Fall, wie Sie hier sehen können, haben wir einen absoluten Schrei. So wie Sie sehen können, wenn wir statische Positionierung und die erste und die Sekundäre mit absoluter Positionierung verwenden. Wie Sie sehen können, ist das absolute Kind statisch. Statische Aufnahme ist grundsätzlich fixiert Versuch ihrer statischen musikalisch und tatsächlich schreien, hat seinen eigenen Stil, kümmert sich nicht um alle anderen Zellen. Es wird sogar oben auf ihnen sein. Will es, je nachdem, wie Sie es positioniert haben und wie Sie es grundsätzlich ausgerichtet haben, als auch. Das ist also der Unterschied zwischen absoluten und relativen, was wir im Grunde meinen. Verwenden Sie. 6. 5 Sizing: Okay, Leute, jetzt werden wir über die Größenklassen sprechen. Zuallererst haben wir die Breite. Wie Sie hier sehen können, haben wir die verschiedenen Klassen dafür. Und das macht sie mit deinen Pixeln. Wir haben mit Px, was mir genau ein Pixel gibt. Mit deinen 25. Es gibt Ihnen fünf. Wie Sie sehen können, hat jede Klasse ihre genauen Maße. Wir haben auch diese Fische wachsen mit der Hälfte. Es gibt den Prozentsatz von 52. Es wird genau 50 Prozent der Bildschirmbreite sein. Drittens wird im Grunde das dritte des Bildschirms machen. Wenn Sie die Details herausfinden möchten, können Sie im Grunde zur Dokumentation auf Chairman CSS gehen. Wir haben auch automatische Breite. Also mit 0, um die divs-Breite entsprechend dem Element an den Inhalt dieses div anzupassen entsprechend dem Element . Wir haben auch Bildschirmbreite. So W Bildschirm würde im Grunde, was wir die Breite des Bildschirms finden. Und es würde die divs mit dementsprechend auf den Bildschirm setzen, wo Anzüge, die die Breite der Breite gefüllt haben, im Grunde die gesamte Bildschirmbreite sein werden. Wir haben auch eine feste Breite. So können Sie grundsätzlich die gleiche benutzerspezifische Breite anpassen. Wie Sie hier sehen können, haben wir acht und Sie können die verschiedenen Größen sehen. Und in Bezug auf die gezeigten Zahlen. Wir haben auch Flüssigkeitsbreite. Jetzt mit durch. Wie Sie sehen können, wenn wir die Hälfte der beiden Typen haben, können wir zwei Elemente haben, und sie werden den gesamten Abschnitt nehmen. Oder wir können wie drei Drittel, drei, drei Drittel haben , oder wir können zum Beispiel Spaltungen haben. Ein Drittel und zwei Drittel ermöglicht es Ihnen, eine sehr schöne Dynamik mit genau wie wir mit Flexing Bouchra im Grunde haben. Wir haben auch voll, die im Grunde auch genau wie mit Bildschirm und Art der gleichen Sache und nimmt die gesamte Fläche. In diesem Fall wählen Sie die Breite reaktionsschnell, können Sie die verschiedenen Styling basierend auf den Bildschirmen wählen, Bildschirmgrößenprogramm für mittlere Geräte, können wir mit Klasse gewöhnt haben und für kleine Geräte können wir eine haben Kundenklasse und auf diese Weise wird es für immer reagieren. Und jetzt haben wir diese tatsächlich. Nun dieses Glutamin mit diesem entdeckte das wichtigste Zeug, das so wichtig war wie einige andere Sachen sind sehr detailliert darüber sie sie nur unter bestimmten Umständen verwenden würde. Während wir nur die Sachen abdecken, die Sie hauptsächlich verwenden werden. Für Min-Breite. Wir können haben, wir können eine minimale Breite angeben, so dass, wenn die , zum Beispiel, wie wenn wir Elemente haben, es wäre nicht kleiner als die minimale Breite. Wie Sie in diesem Fall sehen können, legen wir Ihre Schuhe und es wird 0 Pixel sein. Aber wenn wir eine andere Zahl angeben, als es offensichtlich diese Zahl respektieren sollte. Minimum war voll, um im Grunde 100 Prozent. Gehen wir nun zu anderen wichtigen Klauseln über. Wir haben wieder auf Responsivität reagiert. Wieder, wie wir bereits erklärt haben, können wir die Mindestbreite basierend auf der Bildschirmgröße und Masse festgelegt haben, die im Grunde entsprechend der Bildschirmgröße und der maximalen Breite angepasst wird . Wieder, es ist ziemlich dasselbe Zeug. Ich muss es nur irgendwie wissen. Verwendet zwei Bedingung, wenn Sie bestimmte Sachen beschuldigen wollen. Aber abgesehen davon, wieder, dasselbe. Also haben wir max-Breite, Euro macht die maximale Breite von 0 Pixel, im Grunde 0, in diesem Fall. Und wenn Sie max, keine haben, wird das die maximale Breite so machen, wie Sie es hätten, wenn Sie die maximale Breite hätten, würde sie im Grunde entfernen. Und maximale Breite extra glatt. Grundsätzlich wird es in tun, es würde auf 20 RAM für maximale Breite eingestellt werden. Auch diese Klassen können Sie sie auschecken, wenn Sie möchten. Ihr Dschibuti zeigt, aber ja. So scrollen Sie das Meer mehr nach unten. Lassen Sie uns einfach über die Verwendung von diesem gehen. Also in diesem Fall haben wir maximale Breite mg, die im Grunde das Maximum mit Medium gemischt wird. Wenn wir nach oben gehen, können wir sehen, dass die maximale, maximale Breite wird auf 20 REM für das Maximum eingestellt. Wie Sie hier drüben sehen können, haben wir ihm einen großen Teil des Bildschirms gegeben. Die Breite des Bildschirms ist ein großer Teil seiner Crew. Thermisch ist Motor. Wir können sehen, dass, wenn wir weitermachen und ich kleiner werde , aber nur größer werden, das Spiel bleibt. Wir gehen, Lasst uns das langsam machen. Also lassen Sie uns glatter gehen und wir gehen, weil langsam, wie Sie sehen können, ist das Glücksspiel wieder begann, das ist ein Axon mit dann war es so Gambia. Jetzt können wir runtergehen. Lasst uns jetzt auf die Höhe gehen. Also lasst uns über die Bedeutung einer Höhen gehen. Also wieder, über die Höhe von 0 Pixeln, ist es wieder genau das gleiche wie die anderen Klassen, die ich erklärt habe. Hp x gibt eine Höhe von einem Pixel. Und Sie haben alle diese anderen benutzerdefinierten Klassen, die Sie O2 verwenden können. Also im Grunde habe ich gerade entsprechend der Höhe des Buttons getan , entsprechend dem Inhalt davon eingestellt. Also die O2, wie Sie sehen können, wird es versuchen,. Ich werde versuchen, die Höhe entsprechend dem Inhalt dieses Haushalts anzupassen. Also, wenn wir nach unten gehen, haben wir diese Bildschirmhöhen. Hey, Bildschirm wird im Grunde überprüfen, die höchste der Bildschirm der Geschwindigkeit, die Sie verwenden. Und es wird füllen, wird die gesamte Höhe davon zu viel die Bildschirmgröße nehmen, im Grunde. Wir haben eine feste Höhe. Wir haben wieder, genau wie wir es mit einer festen Breite getan haben, haben wir alle diese Zahlen, mit denen Sie eine bestimmte Höhe angeben können. Wir haben volle Höhen, und in diesem Fall wird es o geben, um die Höhen des Elternteils zu entsprechen. Also, über die Eltern dieser Division, wird es die gleiche Höhe entsprechen. Um es wieder ansprechbar zu machen, können wir verschiedene verwenden. Also, wenn wir es reaktionsschnell machen wollten, können wir die verschiedenen Gerätenamen verwenden. So md für mittlere Geräte als N für kleine Geräte, LG und alles. Und dann können wir die genauen Höhen Klassen angeben. Und dann wird das die Höhe reaktionsschnell machen. Und je nach Bildschirmbreite tut es mir leid, im Laufe der Bildschirmgröße. Gehen wir in Eile zu ihnen. Auch hier, genau wie min-width, haben wir diese spezifischen Klassen, um die minimale Höhe der, die Elemente von Elementen zu steuern . Die minimale Höhe von 0 macht es zu 0 Pixel, minimale und minimale Höhe des Sturzes machen es zu einem Minimum von 100 Prozent. Eine minimale Höhe Bildschirm wird es entsprechend den Bildschirmen Höhen machen. Wie Sie sehen können, haben Sie eine zwei, die minimale Höhe ist tatsächlich auf voll eingestellt. Und wir haben diese Illustration eines, das Ihnen das im Grunde zeigt. Und Sie machen es wieder reaktionsschnell, wir können die spezifischen Klauseln für verschiedene Bildschirmgeräte angeben. Macs Höhen. Also jetzt von Oxiden gegen sie wird wie Max-Breite sein. Sie haben diese Kurse für die maximale Höhe. Und Sie können speziell so ziemlich wie für die Höhe und Breite. Und Sie haben diese Beispiele, wie Sie Overhead können, genau wie ich zuvor erklärt habe. Und ja. Das fasst das That so ziemlich die Größe der Gruppenklassen zusammen. Also gehen wir jetzt zum Editor und lassen Sie uns versuchen, diese Kurse zu implementieren, über die wir gerade gesprochen haben. Lassen Sie uns durch die Breite des Bildschirms gehen. Also lasst uns einige der Klassen hier benutzen. Zunächst einmal ist tun Hedge 12 W Bildschirm. Also im Grunde wird es eine Höhe von 12. Wir nehmen eine komplette Breite. Und jetzt geben wir diesem eine Hintergrundfarbe von Blau, Schatten von 500. Wie Sie sehen können, nimmt es tatsächlich die vollständigen Wörter auf. Es wird WIR hautlos zu haben, ist zum Beispiel W acht. Das wird uns im Grunde eine feste Breite von acht geben. Nun, auch wenn wir eine größere Dimension haben wir verschiedene Bildschirmgrößen gibt es mit Homies wird immer feste Breite von 12, zum Beispiel, in diesem Fall möchte ich eine große offene 24, und das wird im Grunde noch größer machen. Jetzt bewegen wir uns fließend. Also, jetzt lasst uns ein div haben oder wir müssen darin, dass, wer jeder hat, seine eigene Breite hat. Also lasst uns Flicks benutzen. Und dann in diesem werden wir W0, W1 über 23. Das wird also die Hälfte davon dauern. Und ein anderer wird auch eine andere Hälfte nehmen. Oder lasst uns zwei weitere Gutes tun, zwei Viertel, ein Viertel, 1 über 4. Und dann haben wir noch einen, 1 über 4 von dieser gemeinsamen Basis. Und das gibt ihm eine Hintergrundfarbe. Also lassen Sie uns dieses grün machen mit vg green mit einem Blatt von 100. Und diese, Machen wir es VGB mit Schafen von 600. Und dieser muss 600 sein. Und jetzt wollen wir das tatsächlich in Aktion sehen. Für die übergeordnete Komponente ist das Hydrogel. Lassen Sie uns also eine feste Kammhöhe geben. Wie Sie sehen können, haben wir das erste div. Es dauert die Hälfte für im Grunde nehmen die Hälfte des Bildschirms. Und dann die anderen beiden, Sie haben jeweils eine Quote. Also, wenn wir, zum Beispiel, tun, jeder eine der dritte. Wenn wir die Breite ändern und sie zu einem Drittel für jeden machen, dann nimmt jeder im Grunde ein Drittel des Anteils des Bildschirmbreitenanteils ein. Jetzt können wir sehen, Lassen Sie uns versuchen, diese neue ansprechende zu wissen. Für mittlere Geräte, die wir angeben können, können wir machen, dass dies ein 4.5 ist und welche Geräte wir nehmen eine dritte für die Herstellung von Geräten oder was auch immer, 3.5. drei. Ich weiß für andere Geräte, die für ein Drittel stimmen. Also, wenn wir die Breite ändern, wie Sie für das, was Sie verschiedene Geräte zu verfolgen. So wird es jetzt ein Drittel des Weges in Anspruch nehmen. Wenn Sie eine größere machen, wird es die Hälfte dauern. Lassen Sie uns nun die minimale Breite abdecken. Also lassen Sie uns ein div mit einer Breite von 20 für eine feste Breite von 24. Und lass es uns blau machen, BW für den Schatten von 200. Und lassen Sie uns auch eine Höhe von 2024 geben. Und wie Sie sehen können, haben wir diese Erhöhung der Blätter Sie ein 100, um es klarer zu machen. Und wie Sie sehen können, jetzt, wenn wir Mindestbreite von verwenden würden, zum Beispiel, fallen, wie Sie waren und wo es voll ist. Das würde sie dazu bringen, dass du voll sein willst. Wie Sie sehen können, wurde es auf 24 eingestellt, feste Breite von 24. Aber wenn wir Mindestbreite dafür haben, wird es immer minimal gebildet werden. Lassen Sie uns nun die Glukosen abdecken und wir beginnen mit fester Höhe. Lassen Sie uns also mit 24 gehen und geben Sie die Hintergrundfarbe. Wie sollen wir ihm nur eine Höhe von 12 geben? Und wie Sie sehen können, im Wesentlichen 124024. Wieder, so wie es mit der gleichen Sache war. Und nun lassen Sie uns die volle Höhe mit dem Bildschirm abdecken. Und das wird im Grunde die Höhe des Bildschirms überprüfen und dann wird es damit übereinstimmen. Und wieder, genau wie die anderen Klassen. Also für die Höhe wird die gleiche wie die Breite Zeug sein, die ich bereits erklärt habe. Die einzigen Unterschiede, die es im Grunde auf die Höhe und die Breite anwenden. Es gibt also nicht viel Sinn, es tatsächlich zu decken. Auch hier fasst das die Größenklassen zusammen. So können wir jetzt zum anderen Gruppenprozess übergehen. 7. 6 Spacing: Gehen wir nun zum Dispatching von Gruppenklassen über. Beginnen wir zunächst mit Polsterung. Dies ist sehr wichtig, weil wir es viel in unseren Vorhersagen verwenden. Es wird also ziemlich einfach sein, alt wie Sie aus der Permutation p 0 sehen können, wir geben ihm einen Abstand von 0 Pixeln rundum. Also alle tun oben links, rechts und unten PSA X mit genau einem Pixel. Und wie Sie sehen können, sind alle anderen Eigenschaften, wie Sie aus der Dokumentation sehen können, ziemlich klar. Also, je höher die im Grunde mehr Polsterung oder überprüfen Sie es. Und Sie können auch spezifische Befunde angeben. So können Sie auch px und py verwenden. Px gibt im Grunde seine horizontale Polsterung und Puyi gibt es vertikale Polsterung. So wird es nur links und rechts tun, wenn Sie horizontal tun und es wird oben und unten filtern. Vertikal, so vertikale px ist horizontal. Sie können auch angeben, dass die spezifische Seite, für die Sie Finanzierung erhalten möchten, zum Beispiel Padding Top Six, die es im Grunde eine Polsterung oben von 1.50.5 REM geben wird. Und Sie können Padding Grade und Padding tun, links Padding Watson im Grunde die spezifische Site angeben, zu der Sie Padding hinzufügen möchten. Also, jetzt gehen wir zu xi. Nun, okay, also haben wir, also sind das einige Beispiele von ihr. Wir haben, wie Sie sehen können, Polsterung oben sechs, Sie können sehen, dass der Bereich, der mit diesen Streifen hervorgehoben wurde , die Ihnen die Polsterung direkt dort zeigt. So Polsterung oben sechs, können Sie sehen, dass es eine Polsterung an der Spitze hinzugefügt. Polsterung rechts, gibt Ihnen etwas Polsterung auf der rechten Seite. Und doch im Grunde selbsterklärend. Jetzt können wir die Beispiele für das Padding sehen. Polsterung horizontal PXE. Das gibt Ihnen im Grunde eine Polsterung von h auf beiden horizontalen Seiten, also links oder rechts. Und Sie haben vertikale Polsterung, die, wie Sie sehen können, nur für oben und unten ist. Also ein normales Padding, wie Sie aus der Abbildung sehen können, wird das Padding tatsächlich auf alle gleich angewendet obwohl Padding und dann die Zahl verwendet wird, die Sie hinzufügen möchten. Und eine Responsive zu machen, ist sehr einfach. Wir müssen nur den spezifischen Gerätebildschirm angeben und dann können wir das Padding dafür hinzufügen. So können wir mehrere Codons für verschiedene Geräte haben. Okay, also gehen wir jetzt zum Rand. Marge ist auch diese Gruppe von Gasen sind sehr wichtig, weil wir es viel verwendet jetzt Projekte und Sie werden es viel in Ihren zukünftigen Kindern vorhersagen. Also wieder, es wird so ziemlich wie die Polsterung sein. Also gibt es keinen Sinn zu decken bekommen. Ich meine, jede Klasse hat ihre Eigenschaften auf die Rechte. Konkret, sehr gut erklärt. Sie können überprüfen, ob die Kommutierung aufgelöst wird. Sie möchten auschecken, ob Sie die Details dazu sehen möchten. Aber wie auch immer, wir können übergehen, diese Randbereiche im Grunde zu verwenden. Also der Unterschied zwischen Modulen, wieder, alles wird so ziemlich wie sehr ähnlich wie Putting sein. Die einzigen Unterschiede. Polsterung wird auf die innerhalb der Elemente angewendet, und Morgan wird auf die äußeren Feinde angewendet. Also würde der Rand im Grunde gegeben beobachten zwischen den Strömungselementen und den Elementen. Im Grunde ist es da. Also sind alle Feinde nah an uns oder im Grunde in Modelle zwischen ihnen gesetzt. Während Padding es tatsächlich auf das Element selbst angewendet wird und es tatsächlich innen gepolstert wird. Das Element wird tatsächlich Gaumen sein. Also ja, das ist so ziemlich das Gleiche. Also, wenn wir auf diese gehen, sind die Ränder zu einem einzigen Standort. Wir können im Grunde mth verwenden, wie Sie sehen können, gilt, um den oberen Rand zu wollen, oder? Wir geben es Moderat, relativ selbsterklärend. keinen Sinn, die Details wirklich zu besprechen. Ich meine, es ist sehr selbsterklärend. Und Sie können horizontalen Rand wieder haben, gibt es nur für die linke und rechte Seite gilt. Es gibt ihm eine multinomial am linken und rechten Rand Vertikal, sind Sie nach oben und unten? Und ja, es ist ziemlich behindert. Und wenn Sie eine Responsive machen möchten, können Sie den Gerätebildschirm angeben. Und dann können Sie auch die spezifischen Module hinzufügen, die Sie verwenden möchten. Wichtig ist auch bei den Margen, dass man negative Margen haben kann. Es gibt also eine, es gibt viel Marge zwischen zwei Elementen oder mal sehen, die anderen Elemente haben viel Marge und das bewirkt, dass das aktuelle Element weiter entfernt ist. Wir können tatsächlich negative Werte anwenden. Und das wird uns im Grunde erlauben, ihre aktuellen Elemente zu verschieben und es näher an die anderen Elemente zu machen , indem einige der tatsächlich verwendeten Waren entfernt werden. Es ist also sehr einfach, Sie geben nur ein Negativ vor dem tatsächlichen an. Also, wenn wir das Modul haben würden, ist das nächste Modul auf 272. In diesem Fall können wir minus vor der, vor der tatsächlichen Klasse tun. Und das wird eigentlich im Grunde seine Umkehrung anwenden. Also entfernt es tatsächlich die Marge, nicht absolut. Also lassen Sie uns auch einige dieser Gase anwenden, über die wir gerade gesprochen haben. Also lasst uns ein neues div erstellen und ihm eine Klasse von Hintergrund, Farbe geben. Hintergrundfarbe, rot, das Blatt von 500. Und lassen Sie uns einen Text einfügen, nur um zu sehen, wie alles aussieht. Ok? Und dann werden wir ein paar H1 mit Hallo haben. Und jetzt geben wir ihm einen gewissen Spielraum. So können Sie sehen, dass mit dem Hallo wird ein Modul haben. Also geben wir ihm eine Marge von Modul 12. Und wie Sie sehen können, hat das eigentliche H1 jetzt einen Rand links, oben, rechts und unten. Und es gibt tatsächlich jeweils einen anderen. So können wir im Grunde sehen, wir haben zwei H 1s und sagte dieses div, nur um diese Marge zu sehen. Wie Sie jetzt sehen können, haben wir, das erste Modul, hat die ersten drei Elemente, hat Module auf dem zweiten nicht. Und wie Sie sehen können, entfernen Sie die volle den Rand von den ersten Elementen, die im Grunde zusammengeklebt werden. Und wenn wir Rand hinzufügen, horizontal zum Beispiel, dann für das erste Element, das MX verwendet, zum Beispiel 12. Und wie Sie sehen können, wird der Rand nur horizontal angewendet. Und wenn wir MEIN tun, wird es vertikal angewendet. Und wenn Sie es auf allen Seiten anwenden möchten, würde nur M Cohan tun, für alle Seiten im Grunde. Sehen wir, wir wollen die Marge von der riesigen reduzieren und nach oben verschoben. Wir können negative Marge anwenden. Marge. So können wir minus Rand oben tun und wir können 12. Und das wird im Grunde nach oben verschoben und es wird es auf der gleichen Ebene schaffen. Das ist, wenn Sie negative Module anwenden möchten. Nun lassen Sie uns etwas Polsterung anwenden. Also lassen Sie uns diesem einen Padding von geben, zum Beispiel, indem Sie sechs hinzufügen. Und das sollte Ihnen im Grunde etwas Polsterung geben. Und diese Art von Rand oben dies tun Polsterung 12. Wie Sie sehen können, haben wir keine, Da vor, wenn wir Marge verwenden, wurde der Rand auf die äußeren Elemente angewendet. Deshalb hatten wir das Leerzeichen. Aber jetzt wird in diesem Fall tatsächlich innerhalb des Elements angewendet. Und deshalb gibt es keine Leerzeichen mehr und das eigentliche Auffüllen wird anstelle des Moduls angewendet. Okay, das fasst so ziemlich die Polsterung und Margenglukosen zusammen. Wir können nun mit dem nächsten Abschnitt fortfahren. 8. 7 Typography: Alles klar, Leute, jetzt werden wir die Schriftfamiliengruppe der Klassen abdecken. Also sind die font-family Klassen hauptsächlich drei. Also haben wir die Schrift Sans, Serif und Formel. Und Sie haben diese Standardvoreinstellungen, die Sie verwenden können. Und natürlich können Sie Ihre Kunden nutzen, wenn Sie möchten, aber diese sind bereits mit Tim und CSS verfügbar. Juden, zum Beispiel, San-Seriif, müssen Sie nur vier Söhne als Tuch zu tun. Und Sie dienen in Uniform dienen. Und Monospace-Schriftart auf einem verwenden zu müssen und dass ich diese Schriftarten anwenden sollte. Und wir werden die Schriftgröße abdecken ist sehr einfach, wie Sie aus der Klasse sehen können. So haben Sie Zugang, der extra klein ist. Wir werden Montage haben, die sehr klein ist, was im Grunde ist. Und dann haben Sie Basis und Sie haben große. Wenn Sie nach unten gehen, wird das Telefon größer. Und ab gehen wir auf den Gebrauch. Zeigt das an. Wenn wir nach unten gehen, werden die Klassen größer. Und ja, Sie können es reaktionsschnell machen indem Sie verschiedene Schriftarten für verschiedene Geräte anwenden, für verschiedene Bildschirmgeräte teilen. Also, jetzt werden wir das Schriftgewicht abdecken. Wieder, es ist sehr einfach. Wie Sie aus den Klassen sehen können, haben wir Fontan, was ihm ein Schriftgewicht von 100 für eine zusätzliche Rechte gibt , weil iteriert von Mengen von 200. Und wenn wir in dieser Liste gehen, erhöht sich das Schriftgewicht. Und was dies tut, ist macht es fetter mischen die Schriften dicker. So wie Sie aus der Verwendung sehen können, wird auf die Verwendung gehen. Dies steuert also die unterschiedliche Art und Weise eines Elements mit dem Schriftgewicht, um, das Gewicht zunimmt, im Grunde mobil wird, die Zeilenhöhen abzudecken. Auch dies ist sehr einfach, da wir die führende erhöhen, erhöht sich die Zeilenhöhe auch so, zum Beispiel, wenn wir das Schlafen innerhalb des Absatzes verwenden und wir haben wie zum Beispiel, führen entspannt, dann die Abstand zwischen den Zeilen wird höher sein. Also hätten wir mehr Platz zwischen den Linien. Also das letzte Stück, das Sie zwischen dem Stickstoff und der irreführenden Verwendungslinie verwenden wollen, Highschool, werden Sie haben. Wie Sie sehen können, wenn wir nach unten gehen, können wir von den verschiedenen Notwendigen sehen. So haben Sie führende, Motorschlitten, normale gute Taten. Wenn wir nach unten gehen, erhöht sich die führende und dann desto mehr Abstand gibt es zwischen den Linien. So deckt das für die, Das deckt alles für die Zeilenhöhe ab. Lassen Sie uns den Stiltyp für Listen abdecken. Diese Gruppenklassen ermöglichen es Ihnen, die Liste grundsätzlich zu verkaufen. Wenn wir also keine Liste haben, dann wird das im Grunde die Aufzählungspunkte aus der Liste entfernt. Und wie Sie hier sehen können, wenn wir blaue Punkte haben wollen, dann können wir Listen-Disc verwenden. Und das wird, das wird uns im Grunde Aufzählungspunkte für jeden, für jeden Listeneintrag geben. Und wenn wir Zahlen haben wollen, und wir werden diese Dezimalzahl verwenden und das wird uns wie 1, 2, 3, 4, jedes Listenelement, das es nummeriert, Textausrichtung Gruppe von Klassen. Diese sind sehr wichtig, weil wir sie in den hier abgedeckten Projekten und Ressourcen verloren verwenden . Wir haben also Texte übrig. Das ist im Grunde Allianzen Apps von links nach rechts. Srilanka Text aus Australien und Texte in, richtet die Textmitte. Es ist extra Transit von rechts nach links und sagt rechtfertigen, dass es im Grunde zu einem Block macht. Wie Sie sehen können, wenn wir auf das Beispiel gehen, ist dies ein gutes Beispiel dafür, wenn Sie verstehen, was ich mit Textur so weit meine. Also für Text links, wie Sie sehen können, geht der Text von links nach rechts. Und CentOS wird zentriert und schreibt wird, wird von rechts nach links ausgerichtet. Und nimmt zu rechtfertigen, wie Sie sehen können, ist es ein Block, also wird es den Abstand und alles in den Zeilen abkühlen, so dass es im Grunde eine Blockstruktur hat, quadratische Struktur. Also, jetzt lasst uns durch Zecken Farbe gehen. Auch hier ist dies sehr wichtig, um dies viel in den Projekten zu verwenden. Also haben wir Text transparent, um die Schecks transparent zu machen und Texte Strömungen, um ihm die Collage zu geben, die Sie hier sehen können , wie ein hellschwarzer Textblock wird es im Grunde schwarz machen. Und wie Sie sehen können, jede Farbe würde im Grunde die Textfarbe und das Blatt machen , wenn Sie das Schülerdokument erhöhen , als je dunkler die Farbe sein wird. So wie Sie sehen können, scheidet es 500 aus und dann müssen Sie eine 100100 ausscheiden ist viel dunkler als 500 Bildung durch das so ziemlich zusammenfasst, lasst uns runter gehen. Also in Bezug auf die Verwendung dieser Gelehrten einfachen Text und die Farbe, die Sie wollen, und dann können Sie das Blatt präsentieren, was Sie wollen und es anzuwenden, wie durch Texte gehen. Fettleibigkeit. Also die Fettleibigkeit im Grunde die mehr High-End-Zahl. Also würden wir Fettleibigkeit als Text das Neuron entgegengesetzt verwenden. Und dann setzen Sie die Anzahl der Effizienz, das Niveau von im Grunde, je höher das Niveau der Fettleibigkeit, desto undurchsichtiger wird es sein, und je weniger Grad an Fettleibigkeit, desto transparenter zu sein. Wenn wir zu den Beispielen gehen, wie Sie sehen können, haben wir diese Texte und der erste hat Deckkraft von einem 100, sehr undurchsichtig und nicht transparent und verloren sein. Man hat eine Dichte von 0 und wie Sie sehen können, sieht es ziemlich transparent aus. So werden Sie die Farben dahinter sehen oder wenn Sie etwas dahinter haben. Ok. Das fasst es so ziemlich zusammen. Cover Text Deko Also haben wir diese drei Ursachen zugrunde liegenden Linien. Wir sind keine Unterstriche, so ziemlich selbsterklärend. Also zugrunde liegende, zugrunde liegende Zustände, wie Sie aus dem Beispiel sehen können, verursacht Durchgestrichen es im Grunde und keine Unterstreichung entfernt das unterstrichene. Also, wenn Sie unterstreichen die Netzhaut online und es ist Form von Festnetz für Sie, so ziemlich fasst die Typografie Abschnitt. Ich hoffe, alles ist sehr klar. Also, das so ziemlich Summen dieser Klassen hoch.