Heim > Artikel > Web-Frontend > So verwenden Sie das CSS-Box-Orient-Attribut
So verwenden Sie das CSS-Box-Orient-Attribut
- 青灯夜游Original
- 2019-05-28 16:49:063271Durchsuche
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.
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;
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>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!