Explication détaillée de l'attribut box-ordinal-group de la position de présentation de la boîte-tutoriel CSS-php.cn

Explication détaillée de l'attribut box-ordinal-group de la position de présentation de la boîte

云罗郡主

Libérer： 2018-10-23 15:39:09

avant

3210 Les gens l'ont consulté

Cet article vous apporte une explication détaillée de l'attribut box-ordinal-group de la position de disposition de la boîte. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Nous savons que l'attribut box-direction peut définir l'ordre des "éléments enfants" à l'intérieur de la boîte flexible. Dans le modèle de boîte flexible CSS3, nous pouvons également utiliser l'attribut box-ordinal-group pour définir la position d'affichage « précise » de chaque « élément enfant » dans la boîte flexible.

La valeur de l'attribut box-ordinal-group est un nombre naturel, commençant à 1, utilisé pour définir le numéro de position des éléments enfants. La distribution des éléments enfants sera organisée de petite à grande en fonction de cette valeur d'attribut. Par défaut, les éléments enfants seront organisés en fonction de la position de l'élément.

Notez que pour les sous-éléments qui ne spécifient pas de valeur d'attribut box-ordinal-group, le numéro de série du sous-élément est par défaut 1. Et les éléments enfants portant le même numéro de série seront classés dans l'ordre dans lequel ils sont chargés dans le document HTML.

Regardons d'abord un exemple, puis passons en revue ces points de connaissances :

<!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>

Copier après la connexion

Explication détaillée de lattribut box-ordinal-group de la position de présentation de la boîte

Ce qui précède est l'attribut box-ordinal-group du position de disposition de la boîte Introduction complète à l'explication détaillée, si vous souhaitez en savoir plus sur le Tutoriel vidéo CSS3, veuillez faire attention au site Web PHP chinois.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!