So verwenden Sie das CSS-Box-Orient-Attribut-CSS-Tutorial-php.cn

So verwenden Sie das CSS-Box-Orient-Attribut

青灯夜游

Freigeben： 2019-05-28 16:49:06

Original

3350 Leute haben es durchsucht

Mit der CSS-Box-Orient-Eigenschaft wird festgelegt, ob die untergeordneten Elemente der Box (Box) horizontal oder vertikal angeordnet werden sollen. Die untergeordneten Elemente einer horizontalen Box werden von links nach rechts angezeigt, während die untergeordneten Elemente einer vertikalen Box von oben nach unten angezeigt werden.

So verwenden Sie das CSS-Box-Orient-Attribut

Wie verwende ich das CSS-Box-Orient-Attribut?

Das box-orient-Attribut gibt an, ob die untergeordneten Elemente der Box horizontal oder vertikal angeordnet werden sollen.

Syntax:

box-orient: horizontal|vertical|inline-axis|block-axis|inherit;

Nach dem Login kopieren

Attributwert:

horizontal: Untergeordnete Elemente von links nach rechts in einer horizontalen Reihe anordnen.

vertikal: Untergeordnete Elemente vertikal von oben nach unten anordnen.

inline-axis: Untergeordnete Elemente entlang der Inline-Achse anordnen (horizontal zugeordnet).

Blockachse: Untergeordnete Elemente entlang der Blockachse anordnen (vertikal zugeordnet).

erben: Der Wert des Box-Orient-Attributs sollte vom übergeordneten Element geerbt werden.

Erklärung: Die Unterelemente im horizontalen Feld werden von links nach rechts angezeigt, während die Unterelemente im vertikalen Feld von oben nach unten angezeigt werden. Box-Direction und Box-Ordinal-Group können diese Reihenfolge jedoch ändern.

Hinweis: Derzeit unterstützen nicht alle gängigen Browser das Box-Orient-Attribut. Firefox unterstützt dies über eine private Eigenschaft – MOZ-box-orient. Safari, Opera und Chrome werden über die private Eigenschaft -webkit-box-orient unterstützt.

CSS-Box-orientiertes Eigenschaftsbeispiel

<!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>

Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonSo verwenden Sie das CSS-Box-Orient-Attribut. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!