Maison > Article > interface Web > Affichage du modèle de boîte CSS3 : Explication détaillée de l'application de la boîte
Affichage du modèle de boîte CSS3 : Explication détaillée de l'application de la boîte
- 黄舟original
- 2017-09-30 09:39:062362parcourir
[Affichage du modèle de box CSS3 : application de box]
Nouveaux attributs CSS3
"display:box;" et "box-flex: value" sont les attributs de modèle de boîte nouvellement ajoutés de CSS3. Son apparence peut résoudre le problème que nous avons N multiple. structures, méthode de mise en page implémentée par CSS.
Une application de mise en page classique est la hauteur verticale égale, la division horizontale et la division proportionnelle de la mise en page.
Attribut box-flex : permet principalement de diviser le sous-conteneur selon certaines règles en fonction de la largeur du conteneur parent.
Je ne dirai rien d'autre, postez simplement le code vous-même pour voir l'effet.
Structure HTML :
<body>
<p>魔</p>
<p>术</p>
<p>师</p>
</body>Application : Mise en page horizontale
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;
}Application : Disposition verticale
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;
}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!