Heim  >  Artikel  >  Web-Frontend  >  CSS-Box-Modell

CSS-Box-Modell

WBOY
WBOYOriginal
2016-09-14 09:24:071641Durchsuche

Das sogenannte Box-Modell behandelt das HTML-Element als Box. Im täglichen Leben sind Kisten die häufigsten Gegenstände. Beispielsweise besteht eine Schachtel mit Mondkuchen aus einer Außenverpackung, einer gewöhnlichen Eisenschachtel im Inneren und einer Plastik- oder Papierverpackung. In einer großen Schachtel befinden sich mehrere kleine Verpackungen. Auf die gleiche Weise wird jedes Tag in HTML als geformtes Feld betrachtet, und die Beziehung zwischen den Tags kann als Box-zu-Box-Beziehung betrachtet werden.

Das Boxmodell besteht aus: Inhalt: was das Element präsentieren möchte

Innenabstand: der Abstand zwischen Inhalt und Rand

Grenze (Grenze)

     Marge: der Abstand zwischen den Feldern

Die Breiten- und Höhenattribute sind die Breiten- und Höhenattribute des Inhalts (Inhalt), nicht die Breite und Höhe des Elements.

Die Breite des Elements = linker Rand, linker Rand, linke Polsterbreite, rechte Polsterung, rechter Rand, rechter Rand

Höhe des Elements = oberer Rand, oberer Rand, obere Polsterhöhe, untere Polsterung, unterer Rand, unterer Rand

Aus der obigen Formel lässt sich ableiten, dass die Eigenschaften jeder Kante separat (im Uhrzeigersinn) eingestellt werden können.

Zum Beispiel: padding:10px; (entspricht der Einstellung padding:10px 10px 10px 10px;)

 padding:10px 20px; (entspricht: padding:10px 20px 10px 20px;)

 padding:10px 15px 20px; (entspricht: padding:10px 15px 20px 15px;)

Das Gleiche gilt auch für andere Ränder und Umrandungen.

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn