Was ist das CSS-Box-Modell? Eine kurze Einführung in das CSS-Box-Modell

Der Inhalt dieses Artikels befasst sich mit dem CSS-Box-Modell. Eine kurze Einführung in das CSS-Box-Modell hat einen gewissen Referenzwert. Ich hoffe, dass es für Sie hilfreich ist.

Box-Modell

1. Jedes Element kann als Box-Modell verwendet werden

2 /height )+margin(padding)+border(border)

3. Die Box wird durch den äußeren Rand (Margin) beeinflusst, der sich auf die Position der Box auswirkt
Verallgemeinertes Boxmodell: alle Funktions- und Inhalts-Tags in das Dokument und alle Anzeige-Tags.
Schmales Box-Modell: Tags, die in Blockebenenform in Dokumenten vorhanden sind (Blockebene-Tags haben 100 % der Eigenschaften des Box-Modells und werden am häufigsten verwendet)

2. Einführung in die Boxmodellmitglieder

Inhalt

Inhalt angeben
durch Festlegen von Breite und Höhe -Level-Tags können ihre eigene Breite und Höhe festlegen (width=auto), die Höhe wird automatisch (erweitert durch Inhalt)
Inline-Tags können nicht festgelegt werden ihre eigene Breite und Höhe, und die Standardeinstellung ist automatisch (erweitert nach Inhalt)
Rahmen

Rahmen (Rahmen) besteht aus drei Teilen: border-width (width), border-color (color) und border-style (style)
border-Mitglieder: border-left, border-right, border-top, border- unten
border-width-Mitglieder: border-left -width, border-right-width, border-top-width, border-bottom-width
border-color-Mitglieder: border-left-color, border-right-color, border -top-color, border-bottom-color
border-style-Mitglieder: border- linker Stil, Rand-rechts-Stil, Rand-oben-Stil, Rand-unten-Stil

Rand

风格	解释
solid	实线
dashed	虚线
dotted	点状线
double	双实线
groove	槽状线
ridge	脊线
inset	内嵌效果线
outset	外凸效果线

Rand Mitglieder: Rand links, Rand rechts, Rand oben, Rand unten
Rand-Gesamteinstellungen

赋值个数	方位
1	上下左右
2	上下|左右
3	上|左右|下
4	上|右|下|左

Zusammenfassung: 1. Startposition angeben 2. Im Uhrzeigersinn 3. Nicht auf der Suche nach der Gegenseite
3. Randrundung

Randradius

Grenzradius-Mitglied

• Einzelrichtungseinstellung

Anzahl der Zuweisungen (Werttyp: Länge oder Prozentsatz): 1 Interpretiert als: Horizontal und vertikal
Anzahl der Zuweisungen ( Werttyp: Länge oder Prozentsatz): 2 Interpretiert als: Horizontal |. Vertikal

• Geteilte Gesamteinstellung

Format: 1/1 Interpretiert als: Horizontal|Vertikal


4. Andere verwandte Attribute

• max|min-width|height

• Überlauf

value

值
visible	默认值。内容不会被修剪，会呈现在元素框之外。
hidden	内容会被修剪，并且其余内容是不可见的。
scroll	内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto	如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit	规定应该从父元素继承 overflow 属性的值。

visible

Standardwert. Der Inhalt wird nicht beschnitten und außerhalb der Elementbox gerendert.

hidden

Der Inhalt wird abgeschnitten werden und der Rest des Inhalts ist unsichtbar.

scrollen

Der Inhalt wird Seien Sie Trim, aber der Browser zeigt Bildlaufleisten an, um den Rest des Inhalts anzuzeigen.

auto

Wenn der Inhalt Ist Trim, zeigt der Browser Bildlaufleisten an, um den verbleibenden Inhalt anzuzeigen.

inherit

Legt fest, dass die Das übergeordnete Element erbt den Wert des Überlaufattributs.

• Anzeige

值	描述
inline	内联
block	块级
inline-block	内联块

Box-Modelllayout

Grundlegende Einführung in das Boxmodell-Layout

• Layoutausrichtung: Rand links, Rand rechts, Rand oben, Rand unten

• Beeinflussen Sie das eigene Layout: Rand links, Rand oben

• Beeinflussen Sie das Geschwisterlayout: Rand rechts, Rand unten

• vorwärts/rückwärts: Positive/negative Werte

Randlayoutgrube

• Viele semantische Tags haben einen Standardrand

• Was auch immer der übergeordneten und untergeordneten Tags „margin-top“ sind größer

• Die Geschwister-Tags „margin-bottom“ und „margin-top“ überlappen sich, je nachdem, welcher Wert größer ist

Das obige ist der detaillierte Inhalt vonWas ist das CSS-Box-Modell? Eine kurze Einführung in das CSS-Box-Modell. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!