Heim > Artikel > Web-Frontend > 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.
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
风格 | 解释 |
---|---|
solid | 实线 |
dashed | 虚线 |
dotted | 点状线 |
double | 双实线 |
groove | 槽状线 |
ridge | 脊线 |
inset | 内嵌效果线 |
outset | 外凸效果线 |
赋值个数 | 方位 |
---|---|
1 | 上下左右 |
2 | 上下|左右 |
3 | 上|左右|下 |
4 | 上|右|下|左 |
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
max|min-width|height
Überlauf
value |
|
||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|
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 | 内联块 |
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
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!