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

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

silencement

풀어 주다： 2019-05-27 17:10:59

원래의

3089명이 탐색했습니다.

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

css box-pack 속성 정의 및 사용법

1에는 box-pack 속성이 새로 추가되었습니다. css3 속성은 상자가 하위 요소의 크기보다 클 때 하위 요소를 배치할 위치를 지정하는 데 사용됩니다. 현재 주류 브라우저는 이 속성을 지원하지 않지만 일부 브라우저는 상자의 효과를 얻기 위해 자체 비공개 속성을 가지고 있습니다. -팩 속성.

2. Internet Explorer 10은 box-pack 속성을 지원하는 대신 -ms-flex-pack 속성을 사용할 수 있습니다. Internet Explorer 10 이전 버전은 이 속성을 지원하지 않습니다. Firefox 커널 브라우저는 개인 속성 -moz-box-pack 속성을 통해 대신 box-pack 속성을 지원할 수 있습니다. Safari, Opera 및 Chrome 브라우저는 대신 private attribute-webkit-box-pack 속성

css box-pack 속성 구문 형식#을 통해 box-pack 속성을 지원할 수 있습니다. 🎜🎜#

box-pack: start/end/center/justify;

로그인 후 복사

속성 값 설명

start: 일반 방향의 상자의 경우 왼쪽 가장자리의 첫 번째 하위 요소가 왼쪽에 배치됩니다(모두 마지막 하위 요소 뒤에 추가 공간이 배치됩니다. 반전된 상자의 경우 마지막 하위 요소가 오른쪽 가장자리에 배치됩니다(모든 추가 공간은 첫 번째 하위 요소 앞에 배치됩니다)

end: 일반 방향 상자의 경우 마지막 하위 요소가 오른쪽 가장자리에 배치됩니다. 오른쪽에 배치됩니다(모든 추가 공간은 첫 번째 하위 요소 앞에 배치됩니다). 역방향 상자의 경우 첫 번째 자식의 왼쪽 가장자리가 왼쪽에 배치됩니다(모든 추가 공간은 마지막 자식 요소 뒤에 배치됩니다)

center: 두 부분 사이에 균등하게 나누어진 추가 공간, 첫 번째 자식 요소 절반은 첫 번째 하위 요소를 배치하고 나머지 절반은 마지막 하위 요소를 배치합니다

justify: 추가 공간이 각 하위 요소에 균등하게 분배됩니다

Example#🎜🎜 #

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>css3 box-pack属性笔记</title>
<style type="text/css">
body{background-color: #aaa;}
div{width: 400px;height: 100px;border:1px solid mediumvioletred;}
.box1{
display:box;/* W3C */
display:-ms-flexbox;/* Internet Explorer 10 */
display:-moz-box;/* Firefox */
display:-webkit-box;/* Safari, Opera, and Chrome */
box-pack:center;/* W3C */
-ms-flex-pack:center;/* Internet Explorer 10 */
-moz-box-pack:center;/* Firefox */
-webkit-box-pack:center;/* Safari, Opera, and Chrome */
}
.box2{
display:box;/* W3C */
display:-ms-flexbox;/* Internet Explorer 10 */
display:-moz-box;/* Firefox */
display:-webkit-box;/* Safari, Opera, and Chrome */
box-pack:justify;/* W3C */
-ms-flex-pack:justify;/* Internet Explorer 10 */
-moz-box-pack:justify;/* Firefox */
-webkit-box-pack:justify;/* Safari, Opera, and Chrome */
}
</style>
</head>
<body>
<div class="box1"><p>1</p><p>2</p></div>
<div class="box2"><p>1</p><p>2</p></div>
</body>
</html>

로그인 후 복사

실행 결과

위 내용은 CSS box-pack 속성을 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!