Detaillierte Erläuterung des Box-Ordinal-Group-Attributs der Layoutposition der Box-CSS-Tutorial-php.cn

Detaillierte Erläuterung des Box-Ordinal-Group-Attributs der Layoutposition der Box

云罗郡主

Freigeben： 2018-10-23 15:39:09

nach vorne

3216 Leute haben es durchsucht

Dieser Artikel enthält eine detaillierte Erklärung des Box-Ordinalgruppen-Attributs der Box-Layout-Position. Ich hoffe, dass er für Freunde hilfreich ist.

Wir wissen, dass das Box-Direction-Attribut die Reihenfolge der „untergeordneten Elemente“ innerhalb der flexiblen Box festlegen kann. Im CSS3-Modell für flexible Boxen können wir auch das Attribut box-ordinal-group verwenden, um die „genaue“ Anzeigeposition jedes „untergeordneten Elements“ in der flexiblen Box festzulegen.

Der Wert des Attributs box-ordinal-group ist eine natürliche Zahl, beginnend bei 1, die zum Festlegen der Positionsnummer der untergeordneten Elemente verwendet wird. Die Verteilung der untergeordneten Elemente wird entsprechend diesem Attributwert von klein nach groß angeordnet. Standardmäßig werden untergeordnete Elemente basierend auf der Position des Elements angeordnet.

Beachten Sie, dass für Unterelemente, die keinen Box-Ordinal-Group-Attributwert angeben, die Seriennummer des Unterelements standardmäßig 1 ist. Und untergeordnete Elemente mit derselben Seriennummer werden in der Reihenfolge angeordnet, in der sie im HTML-Dokument geladen werden.

Sehen wir uns zuerst ein Beispiel an und gehen dann diese Wissenspunkte durch:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>CSS3 box-ordinal-group属性</title>
    <style type="text/css">
        body
        {
            display:-webkit-box;
            -webkit-box-orient:horizontal;   /*定义盒子元素内的元素从左到右流动显示*/
        }
        div{height:100px;line-height:100px;}
        #box1
        {
            background:red;
            -webkit-box-ordinal-group:2;
        }
        #box2
        {
            background:blue;
            -webkit-box-ordinal-group:3;
        }
        #box3
        {
            background:yellow;
            -webkit-box-ordinal-group:1;
        }
    </style>
</head>
<body>
    <div id="box1">盒子1</div>
    <div id="box2">盒子2</div>
    <div id="box3">盒子3</div>
</body>
</html>

Nach dem Login kopieren

Detaillierte Erläuterung des Box-Ordinal-Group-Attributs der Layoutposition der Box

Das Obige ist eine detaillierte Erklärung des Box-Ordinal-Group-Attributs der Layoutposition der Box Alle Einführungen. Wenn Sie mehr über CSS3-Video-Tutorials erfahren möchten, achten Sie bitte auf die chinesische PHP-Website.

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung des Box-Ordinal-Group-Attributs der Layoutposition der Box. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!