Heim >Web-Frontend >CSS-Tutorial >Anzeige des CSS3-Boxmodells: Detaillierte Erläuterung der Boxanwendung
Anzeige des CSS3-Boxmodells: Detaillierte Erläuterung der Boxanwendung
- 黄舟Original
- 2017-09-30 09:39:062399Durchsuche
[CSS3-Boxmodellanzeige: Anwendung der Box]
Die neuen CSS3-Attribute
„display:box;“ und „box-flex:value“ sind die neu hinzugefügten Box-Modellattribute von CSS3. Ihr Aussehen kann das Problem lösen, dass wir N mehrere haben Strukturen, Layout-Methode implementiert durch CSS.
Eine klassische Layout-Anwendung ist die vertikale Gleichhöhen-, Horizontal- und Proportionalteilung des Layouts.
Box-Flex-Attribut: Ermöglicht hauptsächlich die Aufteilung des Untercontainers nach bestimmten Regeln entsprechend der Breite des übergeordneten Containers.
Ich werde nichts weiter sagen, posten Sie einfach den Code selbst, um die Wirkung zu sehen.
Html-Struktur:
<body>
<p>魔</p>
<p>术</p>
<p>师</p>
</body>Anwendung: Horizontales Layout
body {
/*默认水平布局*/
display: -webkit-box;
display: -moz-box;
display: box;
width: 500px;
height: 300px;
margin: 100px auto;
}
p:nth-child(1) {
-webkit-box-flex: 3;
-moz-box-flex: 3;
box-flex: 3;
background: orange;
}
p:nth-child(2) {
-webkit-box-flex: 1;
-moz-box-flex: 1;
box-flex: 1;
background: purple;
}
p:nth-child(3) {
/*-webkit-box-flex: 2;
-moz-box-flex: 2;
box-flex: 2;*/
width: 200px;/*可以写定值*/
background: green;
}Anwendung: Vertikales Layout
body {
display: -webkit-box;
display: -moz-box;
display: box;
/*垂直布局*/
-webkit-box-orient:vertical;
-moz-box-orient:vertical;
box-orient:vertical;
width: 300px;
height: 500px;
margin: 50px auto;
}
p:nth-child(1) {
-webkit-box-flex: 3;
-moz-box-flex: 3;
box-flex: 3;
background: orange;
}
p:nth-child(2) {
-webkit-box-flex: 1;
-moz-box-flex: 1;
box-flex: 1;
background: purple;
}
p:nth-child(3) {
/*-webkit-box-flex: 2;
-moz-box-flex: 2;
box-flex: 2;*/
height: 200px;/*可以写定值*/
background: green;
}Das obige ist der detaillierte Inhalt vonAnzeige des CSS3-Boxmodells: Detaillierte Erläuterung der Boxanwendung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!