CSS box-orient 속성을 사용하는 방법
- 青灯夜游원래의
- 2019-05-28 16:49:063326검색
CSS box-orient 속성은 상자(상자)의 하위 요소를 수평으로 정렬해야 하는지 수직으로 정렬해야 하는지 지정하는 데 사용됩니다. 가로 상자의 하위 항목은 왼쪽에서 오른쪽으로 표시되고, 세로 상자의 하위 항목은 위에서 아래로 표시됩니다.
CSS box-orient 속성을 어떻게 사용하나요?
box-orient 속성은 상자의 하위 요소를 가로 또는 세로로 정렬할지 여부를 지정합니다.
구문:
box-orient: horizontal|vertical|inline-axis|block-axis|inherit;
속성 값:
horizontal: 하위 요소를 왼쪽에서 오른쪽으로 가로 행으로 정렬합니다.
vertical: 하위 요소를 위에서 아래로 수직으로 배열합니다.
inline-axis: 인라인 축(가로에 매핑됨)을 따라 하위 요소를 정렬합니다.
block-axis: 블록 축(세로로 매핑됨)을 따라 하위 요소를 정렬합니다.
inherit: box-orient 속성의 값은 상위 요소에서 상속되어야 합니다.
설명: 가로 상자의 하위 요소는 왼쪽에서 오른쪽으로 표시되고, 세로 상자의 하위 요소는 위에서 아래로 표시됩니다. 그러나 box-direction 및 box-ordinal-group은 이 순서를 변경할 수 있습니다.
참고: 현재 모든 주요 브라우저는 box-orient 속성을 지원하지 않습니다. Firefox는 개인 속성인 MOZ-box-orient를 통해 이를 지원합니다. Safari, Opera 및 Chrome은 개인 속성 -webkit-box-orient를 통해 지원됩니다.
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>위 내용은 CSS box-orient 속성을 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!