CSS erklärte das Box-Modell anhand von Beispielen.

Heute werde ich das Box-Modell mit CSS-Hintergrundclip- und Hintergrundursprungsfunktionen erklären. Was sind der Hintergrundclip und die Hintergrundfunktionen? Warum werden sie verwendet und der Unterschied zwischen jedem von ihnen?

Nun, dies ist eine Frage, die sich von Start-up-Köpfen zu durchschnittlichen Webentwicklern wandelt. Einige von ihnen sind damit einigermaßen vertraut, andere fragen sich, wo diese beiden Funktionen verwendet werden können.

Bevor Sie diese beiden Funktionen verstehen, müssen Sie das CSS-Box-Modell verstehen. Beginnen wir also damit.

Erstellen Sie zuerst ein Div und platzieren Sie das "p" -Label darin.

Hier sind einige Inhalte ...

und dann gib ihm einige Stile.

div {Hintergrund: # 666; Breite: 300px; Höhe: 250px; } p {width: 200px; Hintergrund: rot; }}

Anscheinend haben wir dem div-Element keine Füllstoffe oder Grenzen gesetzt, sodass das div-Element noch kein Feld oder keine Felder zum Ausfüllen hat und das gesamte Feld ein Inhaltsfeld ist.

Wie im Bild unten gezeigt.

Sie können sich öffnen, indem Sie die Chrome-Software öffnen

Geben Sie dem Div nun einen Abstand von 50 Pixel von oben, unten, links und rechts.

div {Hintergrund: # 666; Breite: 300px; Höhe: 250px; Füllung: 50px; // fülle oben, unten, links, rechts}

Jetzt erhalten wir ein 50px-Füllfeld und innerhalb des Inhaltsfelds, wie in der Abbildung unten gezeigt.

Jetzt haben wir endlich eine 50px Box

Entfernen Sie nun die Breite aus dem "p" -Element, damit die volle Breite des Inhaltsfelds übernommen wird.

p {Hintergrund: rot; }}

Sie können das Ergebnis im Bild unten sehen.

Das 'P'-Element wird erweitert, um die volle Breite der Komponente zu erhalten

Angenommen, Sie fügen "div" ein Hintergrundbild hinzu und stellen das Hintergrundbild "innen" so ein, dass es in die Box passt. Außerdem geben Sie ihm einen Rahmen, da es keinen Rand gibt.

div {Hintergrund: # 666 URL ('https://bit.ly/2gzkSPX') wird nicht wiederholt; Hintergrundgröße: enthält; Rand: 10px festes Schwarz; Breite: 300px; Höhe: 250px; Füllung: 50px; }}

Es wird dann wie auf dem Bild unten aussehen.

Sie können dies auch überprüfen, indem Sie zum Softwarehersteller gehen und auf das Box-Modell klicken, wie in der Abbildung gezeigt

Standardmäßig ist der Ursprung des Divs in das Auffüllfeld eingebettet, das Bild beginnt an der Grenze und wird im Inhaltsfeld angezeigt, während sich das Inhaltsfeld im Füllfeld befindet.

Hintergrund: Polsterbox; / * Standardwert * /

Zum Beispiel möchten wir mit dem Bildfüllfeld beginnen, aber wir möchten nur den Teil des Bildes im Inhaltsfeld anzeigen und dann das div-Hintergrundbild im Inhaltsfeld festlegen.

div {Hintergrund: # 666 URL ('https://bit.ly/2gzkSPX') wird nicht wiederholt; Hintergrundgröße: enthält; Hintergrund-Clip: Inhaltsfeld; Rand: 10px festes Schwarz; Breite: 300px; Höhe: 250px; Füllung: 50px; }}

Sie können die Ergebnisse im Bild unten sehen, da nur ein Teil des Bildes im Inhaltsfeld sichtbar ist, das Bild jedoch mit dem Füllfeld beginnt, da "Box-Orgin" die Standardeinstellung ist.

Anscheinend ist nur der Teil des Bildes im Inhaltsfeld sichtbar und der Rest ist ausgeblendet

Öffnen wir nun den Teil, in dem das Hintergrundbild in die Padd-Box gelangt. Dazu müssen wir das div-Hintergrundbild in die Padd-Box zurückgeben, die der Standardwert war, bevor wir es ändern.

div {Hintergrund: # 666 URL ('https://bit.ly/2gzkSPX') wird nicht wiederholt; Hintergrundgröße: enthält; Hintergrundclip: Polsterbox; Rand: 10px festes Schwarz; Breite: 300px; Höhe: 250px; Füllung: 50px; }}

Wie Sie den Ergebnissen unten entnehmen können, sehen wir jetzt auch den Teil des Bildes, der in die Umhangbox gelangt, da wir den Hintergrundclip in die Paddelbox gelegt haben.

Jetzt können wir auch den Teil des Bildes in der Bildbox sehen

Stellen wir nun sicher, dass unser div-Hintergrundbild mit dem Rahmenfeld beginnt. Dazu müssen wir dem "div" -Hintergrund den Ursprung des Rahmenfelds geben. Erhöhen wir zunächst den Rand, um den Unterschied zu erkennen.

div {Hintergrund: # 666 URL ('https://bit.ly/2gzkSPX') wird nicht wiederholt; Hintergrundgröße: enthält; Hintergrundursprung: Rahmen; Hintergrundclip: Polsterbox; Rand: 20px festes Schwarz; / * Breite jetzt 20px * / Breite: 300px; Höhe: 250px; Füllung: 50px; }}

Wie Sie im Bild unten sehen können, ist ein kleiner Teil des Bildes mit einem schwarzen Rand bedeckt, da die Hintergrundbilder jetzt am Randbereich beginnen, dh ein Teil des Bildes befindet sich hinter dem schwarzen Rand.

Nun beginnt das Bild mit dem Kontrollkästchen

Um zu beweisen, dass das Bild mit einem Rahmen beginnt und sich daher ein kleiner Teil des Bildes hinter dem schwarzen Rand befindet, lassen Sie uns den Rand etwas verschwimmen, damit er verblasst und wir sehen können, welcher Teil des Bildes. jenseits der Grenze.

div {Hintergrund: # 666 URL ('https://bit.ly/2gzkSPX') wird nicht wiederholt; Hintergrundgröße: enthält; Hintergrundursprung: Rahmen; Hintergrundclip: Polsterbox; Rand: 20px festes rgba (0,0,0,0,5); / * width using rgba () * /: 300px; Höhe: 250px; Füllung: 50px; }}
Hier sehen Sie das Bild hinter dem schwachen Rand

Jetzt können Sie den Teil des Bildes hinter dem Rand sehen, und dies beweist, dass das Bild mit dem Rand beginnt, da wir den Hintergrundhintergrund auf das Randfenster setzen.

Jetzt, da Sie den Unterschied zwischen Hintergrund- und ClipArt kennen gelernt haben und auch das CSS-Box-Modell kennen, ist es Zeit, dorthin zu gelangen und damit etwas Großartiges zu schaffen. #Gutglück

Wenn Sie meinen vorherigen Artikel über den Internetzugang verpasst haben, finden Sie hier den Link. Lesen Sie ihn daher unbedingt durch. KLICKEN SIE HIER