CSS box-orient 속성을 사용하는 방법-CSS 튜토리얼-php.cn

CSS box-orient 속성을 사용하는 방법

青灯夜游

풀어 주다： 2019-05-28 16:49:06

원래의

3350명이 탐색했습니다.

CSS box-orient 속성은 상자(상자)의 하위 요소를 수평으로 정렬해야 하는지 수직으로 정렬해야 하는지 지정하는 데 사용됩니다. 가로 상자의 하위 항목은 왼쪽에서 오른쪽으로 표시되고, 세로 상자의 하위 항목은 위에서 아래로 표시됩니다.

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!