박스 레이아웃 위치의 box-ordinal-group 속성에 대한 자세한 설명
- 云罗郡主앞으로
- 2018-10-23 15:39:093124검색
이 글은 박스 레이아웃 위치의 box-ordinal-group 속성에 대한 자세한 설명을 담고 있습니다. 필요한 친구들이 참고하시면 좋을 것 같습니다.
우리는 box-direction 속성이 유연한 상자 내부의 "하위 요소" 순서를 설정할 수 있다는 것을 알고 있습니다. CSS3 유연한 상자 모델에서는 box-ordinal-group 속성을 사용하여 유연한 상자에 있는 각 "하위 요소"의 "정확한" 표시 위치를 설정할 수도 있습니다.
box-ordinal-group 속성의 값은 1부터 시작하는 자연수이며, 하위 요소의 위치 번호를 설정하는 데 사용됩니다. 하위 요소의 분포는 이 속성 값에 따라 작은 것부터 큰 것 순으로 정렬됩니다. 기본적으로 하위 요소는 요소의 위치를 기준으로 정렬됩니다.
box-ordinal-group 속성 값을 지정하지 않는 하위 요소의 경우 하위 요소의 일련번호는 기본적으로 1로 설정됩니다. 그리고 동일한 일련 번호를 가진 하위 요소는 HTML 문서에 로드된 순서대로 정렬됩니다.
먼저 예제를 보고 다음 지식 포인트를 검토해 보겠습니다.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS3 box-ordinal-group属性</title>
<style type="text/css">
body
{
display:-webkit-box;
-webkit-box-orient:horizontal; /*定义盒子元素内的元素从左到右流动显示*/
}
div{height:100px;line-height:100px;}
#box1
{
background:red;
-webkit-box-ordinal-group:2;
}
#box2
{
background:blue;
-webkit-box-ordinal-group:3;
}
#box3
{
background:yellow;
-webkit-box-ordinal-group:1;
}
</style>
</head>
<body>
<div id="box1">盒子1</div>
<div id="box2">盒子2</div>
<div id="box3">盒子3</div>
</body>
</html>
위는 원하는 경우 상자 레이아웃 위치의 box-ordinal-group 속성에 대한 자세한 설명에 대한 완전한 소개입니다. CSS3 동영상 튜토리얼에 대해 자세히 알아보세요. PHP 중국어 웹사이트에 주목하세요.
위 내용은 박스 레이아웃 위치의 box-ordinal-group 속성에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!