TechBlogSD - Alles für WordPress und WEB-Entwicklung
WEB- und WordPress-Anleitungen, Neuigkeiten, Rezensionen zu Themes und Plugins

CSS-Box-Modell-Tutorial

14

CSS ist ein hervorragendes Werkzeug für das Frontend-Webdesign. Die Popularität liegt nicht nur in der Benutzerfreundlichkeit, sondern auch in den robusten Funktionalitäten. CSS wirkt sich auf jedes einzelne Element einer Webseite aus. Daher sollte jeder Webdesigner, der ein Kernentwickler für einfache Layouter ist, die Grundlagen von CSS kennen. Das Box-Modell in CSS ist die Grundlage für die Definition von Layouts und die Positionierung von Elementen auf einer Seite. In diesem Artikel werden wir die Grundlagen des CSS-Boxmodells im Detail untersuchen. Darüber hinaus behandeln wir auch die Analyse des Boxmodells eines Elements in einem Browser.



Was ist das CSS-Box-Modell?

Bei der Verwendung von CSS wird jedes HTML-Element auf einer Webseite als rechteckiger Kasten betrachtet. Daher wird das Konzept als Boxmodell bezeichnet. Dies hilft, das Layout einer Webseite einfach zu definieren und die Elemente so zu positionieren, dass sie nach Bedarf ausgerichtet werden. Im Box-Modell wird der Inhalt eines HTML-Elements in der Mitte positioniert, gefolgt von Auffüllen, Rahmen und Rand wie unten gezeigt:

CSS-Box-Modell-Tutorial

CSS-Box-Modellelement

  • Margin – das ist der Bereich um die Grenze und ist immer transparent. Der Zweck des Rands besteht darin, den erforderlichen Abstand zwischen den Elementen und von den Rändern des Browsers bereitzustellen.
  • Rahmen – Dies ist eine sichtbare Linie um den Inhalts- und Füllbereich. Im Allgemeinen wird es verwendet, um einem Element einen Umriss zu verleihen und kann jede Farbe und Breite haben.
  • Padding – Abstand zwischen dem eigentlichen Inhalt und dem Rand wird als Padding bezeichnet. Wenn der Inhalt sichtbare Umrandungen aufweist, ist es angebracht, einige Auffüllungen zu verwenden. Dies wird dazu beitragen, Platz zwischen Inhalt und Rahmen zu schaffen.
  • Inhalt – eigentlicher Inhalt wie Text und Bild zwischen HTML-Tags.

Verwandte: CSS-Einheiten-Tutorial für Anfänger.

Beispiel für ein Box-Modellelement

Lassen Sie uns ein einfaches Beispiel zum Erstellen eines Absatzes innerhalb von div-Tags anführen, um das Konzept des Boxmodells zu erklären. Das CSS sollte wie folgt aussehen:

<style> .box-model { margin: 30px 5px 5px 15px; padding: 10px 0 10px 5px; border: 10px solid red; text-align: justify; } </style>

Beachten Sie, dass der CSS-Code für Margin und Padding Dimensionen für oben, links, unten und rechts enthält.

Und der HTML-Code zum Einfügen des Inhalts mit dem obigen CSS lautet:

<div class="box-model"> <p>This is a test content to explain how CSS box model will look like. This is a paragraph with different padding, different margin and border of 10px.</p> </div>

Die Ausgabe des obigen Codes sieht im Browser wie unten aus. Wie bereits erwähnt, ist der Rand nicht zu sehen, da er transparent ist.

CSS-Box-Modell-Tutorial

Anzeigen des CSS-Box-Modells eines Elements im IE 11-Browser

Wie überprüfe ich das CSS-Box-Modell in einem Browser?

Es ist eine gute Idee, die Theorie praktisch zu sehen. Sie können das CSS-Box-Modell eines Elements direkt in Ihrem Webbrowser anzeigen. Hier zeigen wir den Screenshot mit dem Google Chrome-Browser. Die Methode bleibt für alle anderen Browser wie Firefox, Edge und Safari gleich.

  • Öffnen Sie eine beliebige Webseite und klicken Sie mit der rechten Maustaste auf das Element, das Sie erkunden möchten.
  • Sie können mit der rechten Maustaste auf Text, Bild, Video oder Leerzeichen klicken.
  • Wählen Sie die Option "Element prüfen", um die Entwicklerkonsole zu öffnen.
  • Es hat einen linken Bereich zum Anzeigen von HTML und einen rechten Bereich zum Anzeigen von CSS.
  • Sie können das CSS-Box-Modell des ausgewählten Elements auf der Registerkarte „Layout” im rechten Bereich sehen.
  • Beziehen Sie sich auf den obigen Beispielcode – alle Rahmen, Ränder und Abstände stimmen mit den genauen Abmessungen überein, die im CSS definiert sind.

Beachten Sie, dass Sie das HTML-Markup eines Elements im Google Chrome-Browser auf der Registerkarte "Elemente" anzeigen können. Das entsprechende CSS- und Box-Modell ist unter der Registerkarte „Styles” zu sehen, wie in der folgenden Abbildung gezeigt.

CSS-Box-Modell-Tutorial

Anzeigen des CSS-Box-Modells eines Elements im Chrome-Browser

Berechnen von Breite und Höhe eines Elements im CSS-Box-Modell

Jetzt haben Sie das Konzept des CSS-Boxmodells verstanden. Wenn Sie Höhe und Breite eines Elements definieren, sollten die Gesamtbreite und Gesamthöhe dieses Elements Rand, Abstand und Rahmenbreite umfassen. Lassen Sie uns dem obigen CSS-Codebeispiel Höhe und Breite hinzufügen:

<style> .box-model { margin: 30px 5px 5px 15px; padding: 10px 0 10px 5px; border: 10px solid red; text-align: justify; width: 300px; height: 200px; } </style>

In Verbindung stehende Artikel:


Jetzt sollte jedes Element, das den Stil der CSS-Klasse „box-model” aufruft, mit der folgenden Gesamtbreite und Gesamthöhe positioniert werden.

  • Gesamthöhe = Höhe + Oberer Rand + Unterer Rand + Oberer Abstand + Unterer Abstand + Randbreite = 200 + 30 + 5 + 10 + 10 + 10 = 265px.
  • Gesamtbreite = Breite + Linker Rand + Rechter Rand + Linker Abstand + Rechter Abstand + Randbreite = 300 + 15 + 5 + 0 + 5 + 10 = 335px.

Das komplette Seitenlayout wird unter Berücksichtigung der Gesamtbreite und Gesamthöhe jedes Elements entworfen.

Aufnahmequelle: webnots.com
Hinterlasse eine Antwort

Diese Website verwendet Cookies, um Ihre Erfahrung zu verbessern. Wir gehen davon aus, dass Sie damit einverstanden sind, Sie können sich jedoch abmelden, wenn Sie möchten. Annehmen Weiterlesen