Eine der Methoden zur Entwicklung eines flexiblen CSS3-Boxmodells

In diesem Artikel werden hauptsächlich Hinweise zur Entwicklung des CSS3-Flexible-Box-Modells geteilt und die Kompatibilität und verschiedene Attribute vorgestellt. Interessierte Freunde können sich auf

Flexible Box-Modell (Flexible Box Moudle) beziehen wird verwendet, um zu entscheiden, wie Elemente in einer Box verteilt werden, und um mit dem verfügbaren Platz in der Box umzugehen. Dies ähnelt XUL (der Benutzerinteraktionssprache des Firefox-Browsers), und andere Sprachen verwenden dasselbe Box-Modell. Wie XAML, GladeXML usw. Mit dem Flexbox-Modell lässt sich ganz einfach ein flüssiges Layout erstellen, das sich an das Browserfenster anpasst, oder ein Flex-Layout, das sich an die Schriftgröße anpasst.

Kompatibilität: Die Flex-Box-Modellspezifikation wurde 2009 von der W3C-Standardisierungsorganisation veröffentlicht. Derzeit wird sie von keinem Mainstream-Browser unterstützt, aber sie verwendet Webkit- und Mozilla-Rendering Engine-Browser haben eine Reihe privater Eigenschaften angepasst, um das flexible Box-Modell zu unterstützen.

Zu den Browsern, die die Webkit-Rendering-Engine verwenden, gehören hauptsächlich Safari- und Chrome-Browser. Die Engine unterstützt private Attribute mit dem Präfix -webkit.

Mozilla-Rendering-Engine-Browser umfassen hauptsächlich den Firefox-Browser, der private Attribute mit dem Präfix -moz unterstützt.

Verwandte Attribute:

box-align: Definieren Sie die Raumzuordnungsmethode für untergeordnete Elemente in der vertikalen Richtung der Box
box-direction: Definieren Sie die Anzeigereihenfolge der Box
box-flex: Definieren Sie die adaptive Größe von Unterelementen innerhalb der Box
box-flex-group: Definieren Sie adaptive Unterelementgruppen
box-lines: Definieren Sie Unterelemente, die in Spalten angezeigt werden sollen
box-ordinal-group: Unterelemente definieren Die Anzeigeposition des Elements in der Box
box-orient: Definiert die Koordinatenachse der Boxteilung
box-pack: Definiert die horizontale Raumzuordnungsmethode des Unterelements -elements in the box

box -orient attribute

Dieses Attribut kann verwendet werden, um die Flusslayoutrichtung innerhalb des Boxelements zu definieren, wenn das flexible Boxmodell verwendet wird. Sie müssen zunächst das Anzeigeattribut des übergeordneten Containers auf „Box“ oder „Inline-Box“ festlegen.
Syntax:

box-orient: horizontal |. block-axis |. Einfache Beschreibung des Wertes:

horizontal: box element from Zeigt seine untergeordneten Elemente in einer horizontalen Linie von links nach rechts an.

Vertail: Das Box-Element zeigt seine untergeordneten Elemente in einer vertikalen Linie von oben nach unten an.

inline-axis: Das Box-Element zeigt seine untergeordneten Elemente entlang der Inline-Achse an.

Blockachse: Das Boxelement zeigt seine untergeordneten Elemente entlang der Blockachse an.

Praktische Erfahrung: Entwerfen eines mehrspaltigen Layouts

HTML-Code:

<p id="box">  
    <p id="box0"><img src="images/web_01.gif" /></p>  
    <p id="sub-box">  
        <p id="box1"><img src="images/web_02.gif" /></p>  
        <p id="box2"><img src="images/web_03.gif" /></p>  
        <p id="box3"><img src="images/web_04.gif" /></p>  
    </p>  
</p>

CSS3-Code:

<style type="text/css">   
body{/*文档样式*/  
    margin:0;padding:0px;/*清除页边距*/  
    text-align:center;/*文档居中对齐*/  
    background:#170843;   
}   
#box{   
    margin:auto;/*文档居中对齐*/  
    text-align:center;   
    width:975px;   
}   
/*定制各个栏目的宽度*/  
#box1{width:185px;}   
#box2{width:601px;}   
#box3{width:189px;}   
/*定制子包含框的盒子显示，其包含的元素水平流动*/  
#sub-box{   
    display:-moz-box;   
    display:-webkit-box;   
    display:box;   
    box-orient:horizontal;   
    -moz-box-orient:horizontal;   
    -webkit-box-orient:horizontal;     
}   
</style>

Demo-Effekt:

Box-Direction-Attribut

Box-Direction-Attribut kann die Flussreihenfolge interner Elemente im Box-Element ändern:

box -direction: normal |. reverse |. inherit

Einfache Erklärung des Werts:

normal: normale Anzeigereihenfolge, das heißt, wenn der Box-Orient-Attributwert der Box ist Wenn das Element horizontal ist, werden die darin enthaltenen untergeordneten Elemente in der Reihenfolge von links nach rechts angezeigt. Das heißt, die linke Seite jedes untergeordneten Elements liegt immer nahe an der rechten Seite des vorherigen untergeordneten Elements Wenn das Box-Element auf „vertikal“ eingestellt ist, werden die darin enthaltenen untergeordneten Elemente der Reihe nach von oben nach unten angezeigt.

umgekehrt: Anzeige umkehren, die Anzeigereihenfolge der im Feld enthaltenen Unterelemente wird gegenüber der normalen umgekehrt.

erben: Die Anzeigereihenfolge übergeordneter Elemente übernehmen.

Praktische Erfahrung: Webseite mit umgekehrtem Layout (basierend auf dem obigen Fall):

CSS3-Code:

<style>   
body{   
    margin:0;padding:0px;   
    text-align:center;   
    background:#170843;   
}   
#box{   
    margin:auto;   
    text-align:center;   
    width:975px;   
}   
#box1{width:185px;}   
#box2{width:601px;}   
#box3{width:189px;}   
#sub-box{   
    display:-moz-box;   
    display:-webkit-box;   
    display:box;   
    box-orient:horizontal;   
    -moz-box-orient:horizontal;   
    -webkit-box-orient:horizontal;     
    box-direction:reverse;   
    -moz-box-direction:reverse;   
    -webkit-box-direction:reverse;   
}   
</style>

Demo-Effekt:

box-ordinal-group-Attribut

Das box-direction-Attribut kann die Flussreihenfolge von Elementen innerhalb der Box ändern, und das box-ordinal-group-Attribut kann die festlegen Position jedes untergeordneten Elements. Die spezifische Anzeigeposition in der Box lautet wie folgt:

box-ordinal-group:

Wertbeschreibung:

Der Attributwert ist eine natürliche Zahl, beginnend bei 1 Start, die zum Festlegen des Positionssymbols des untergeordneten Elements 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.

Hinweis: Wenn kein untergeordnetes Element mit einem Box-Ordinal-Group-Attributwert angegeben ist, ist seine Sequenznummer standardmäßig 1 und Elemente mit derselben Sequenznummer werden in der Reihenfolge angeordnet, in der sie im Dokument geladen werden.

Praktische Erfahrung: Vertikales Weblayout

HTML-Code:

<p id="box">  
    <p id="box1"><img src="images/web1_01.gif" /></p>  
    <p id="box2"><img src="images/web1_02.gif" /></p>  
    <p id="box3"><img src="images/web1_03.gif" /></p>  
    <p id="box4"><img src="images/web1_04.gif" /></p>  
</p>

CSS3-Code:

<style type="text/css">   
body {   
    margin:0;   
    padding:0;   
    text-align:center;   
    background:#d9bfe8;   
}   
#box {   
    margin:auto;   
    text-align:left;   
    width:988px;   
}   
/*定义盒形显示及盒内元素垂直显示*/  
#box {   
    display : -moz-box;   
    display : -webkit-box;   
    display : box;   
    box-orient:vertical;   
    -moz-box-orient:vertical;   
    -webkit-box-orient:vertical;   
}   
/*根据网页内容的现实需要，借助弹性盒模型调整各个板块的显示顺序*/  
#box1 {/*设置第一个元素显示在第二个位置*/  
    -moz-box-ordinal-group : 2;/*兼容Mozilla Gecko引擎*/  
    -webkit-box-ordinal-group : 2;/*兼容Webkit引擎*/  
    box-ordinal-group : 2;/*标准用法*/  
}   
#box2 {/*设置第二个元素显示在第三个位置*/  
    -moz-box-ordinal-group : 3;/*兼容Mozilla Gecko引擎*/  
    -webkit-box-ordinal-group : 3;/*兼容Webkit引擎*/  
    box-ordinal-group : 3;/*标准用法*/  
}   
#box3 {/*设置第三个元素显示在第一个位置*/  
    -moz-box-ordinal-group : 1;/*兼容Mozilla Gecko引擎*/  
    -webkit-box-ordinal-group : 1;/*兼容Webkit引擎*/  
    box-ordinal-group : 1;/*标准用法*/  
}   
#box4 {/*设置第四个元素显示在第四个位置*/  
    -moz-box-ordinal-group : 4;/*兼容Mozilla Gecko引擎*/  
    -webkit-box-ordinal-group : 4;/*兼容Webkit引擎*/  
    box-ordinal-group : 4;/*标准用法*/  
}   
</style>

Demo-Effekt

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website.

Verwandte Empfehlungen:

Verwenden Sie CSS3, um die coole Black Cat Sheriff-Homepage zu realisieren

Verwenden Sie CSS, um reine englische Zahlen zu realisieren Automatischer Zeilenumbruch

Das obige ist der detaillierte Inhalt vonEine der Methoden zur Entwicklung eines flexiblen CSS3-Boxmodells. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!