CSS 박스팩 속성
번역 결과：
3인칭 단수: 상자 복수형: 상자 현재 분사: boxing 과거 분사: boxed
pack
英[pæk] 美[pæk] n. 카드; 그룹 vt.& vi. (포장하다); 그룹으로 모으다; 조이다 vi. 단단히 포장하다, 접어서 보관하기 쉬움, 급하게 보관함(때때로 off와 함께 사용됨)3인칭 단수: packs 복수형: packs 현재 분사:packing 과거 분사: 포장
CSS 박스팩 속성통사론
기능: 상자가 하위 요소의 크기보다 큰 경우 하위 요소를 배치할 위치를 지정합니다. 이 속성은 가로 상자 내의 가로 위치와 세로 상자 내의 세로 위치를 지정합니다.
구문: box-pack: start|end|center|justify;
지침: start 일반 방향의 상자의 경우 첫 번째 하위 요소의 왼쪽 가장자리가 왼쪽에 배치됩니다(다음 마지막 하위 요소는 남은 모든 공간입니다)
, 반대 방향 상자의 경우 마지막 하위 요소의 오른쪽 가장자리가 오른쪽에 배치됩니다(첫 번째 하위 요소 앞에 남은 모든 공간). end 일반적인 방향의 상자에서는 마지막 자식의 오른쪽 가장자리가 오른쪽에 배치됩니다(첫 번째 자식 앞에 남은 공간). 방향이 반대인 상자의 경우 첫 번째 자식의 왼쪽 가장자리가 왼쪽에 배치됩니다(마지막 자식 뒤의 나머지 공간). center 는 공간의 절반을 첫 번째 자식 요소 앞에 배치하고 나머지 절반은 마지막 자식 요소 뒤에 배치하여 초과 공간을 균등하게 나눕니다. justify는 각 하위 요소 사이에 초과 공간을 분할합니다(첫 번째 하위 요소 앞과 마지막 하위 요소 뒤에는 초과 공간 없음).
참고: 현재 box-pack 속성을 지원하는 브라우저는 없습니다. Firefox는 대체 -moz-box-pack 속성을 지원합니다. Safari, Opera 및 Chrome은 대체 -webkit-box-pack 속성을 지원합니다.
CSS 박스팩 속성예
<!DOCTYPE html>
<html>
<head>
<style>
div
{
width:350px;
height:100px;
border:1px solid black;
/* Firefox */
display:-moz-box;
-moz-box-pack:center;
-moz-box-align:center;
/* Safari, Chrome, and Opera */
display:-webkit-box;
-webkit-box-pack:center;
-webkit-box-align:center;
}
</style>
</head>
<body>
<div>
<p>我是居中对齐的。</p>
</div>
<p><b>注释：</b>IE 不支持 box-pack 和 box-align 属性。</p>
</body>
</html>인스턴스 실행 »
온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요