Maison >interface Web >tutoriel CSS >Comment utiliser l'attribut CSS box-orient
Comment utiliser l'attribut CSS box-orient
- 青灯夜游original
- 2019-05-28 16:49:063364parcourir
La propriété css box-orient est utilisée pour spécifier si les éléments enfants de la boîte (box) doivent être disposés horizontalement ou verticalement. Les enfants d'une case horizontale sont affichés de gauche à droite, tandis que les enfants d'une case verticale sont affichés de haut en bas.
Comment utiliser l'attribut css box-orient ?
L'attribut box-orient spécifie si les éléments enfants de la boîte doivent être disposés horizontalement ou verticalement.
Syntaxe :
box-orient: horizontal|vertical|inline-axis|block-axis|inherit;
Valeur de l'attribut :
horizontal : Organisez les éléments enfants de gauche à droite sur une ligne horizontale.
vertical : Disposez les éléments enfants verticalement de haut en bas.
inline-axis : disposez les éléments enfants le long de l'axe en ligne (mappé sur l'horizontale).
block-axis : organise les éléments enfants le long de l'axe du bloc (mappé à la verticale).
inherit : La valeur de l'attribut box-orient doit être héritée de l'élément parent.
Explication : Les sous-éléments de la case horizontale sont affichés de gauche à droite, tandis que les sous-éléments de la case verticale sont affichés de haut en bas. Cependant, box-direction et box-ordinal-group peuvent modifier cet ordre.
Remarque : Actuellement, tous les principaux navigateurs ne prennent pas en charge l'attribut box-orient. Firefox prend en charge cela via une propriété privée - MOZ-box-orient. Safari, Opera et Chrome sont pris en charge via la propriété privée -webkit-box-orient.
exemple de propriété CSS box-orient
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
div {
width: 350px;
height: 150px;
border: 1px solid black;
/* Firefox */
display: -moz-box;
-moz-box-orient: horizontal;
/* Safari, Opera, and Chrome */
display: -webkit-box;
-webkit-box-orient: horizontal;
/* W3C */
display: box;
box-orient: horizontal;
}
</style>
</head>
<body>
<div>
<p>段落 1。</p>
<p>段落 2。</p>
<p>段落 3。</p>
</div>
<p><b>注释：</b>IE 不支持 box-orient 属性。</p>
</body>
</html>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!