Comment utiliser l'attribut CSS box-orient-tutoriel CSS-php.cn

Comment utiliser l'attribut CSS box-orient

青灯夜游

Libérer： 2019-05-28 16:49:06

original

3367 Les gens l'ont consulté

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

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;

Copier après la connexion

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>

Copier après la connexion

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!