Heim  >  Artikel  >  Web-Frontend  >  Was ist das CSS-Box-Modell? Eine kurze Einführung in das CSS-Box-Modell

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

不言
不言Original
2018-09-27 15:42:133064Durchsuche

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!

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