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

집

웹 프론트엔드

CSS 튜토리얼

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

silencement

May 27, 2019 pm 05:10 PM

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

성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

뜨거운 도구

MinGW - Windows용 미니멀리스트 GNU

이 프로젝트는 osdn.net/projects/mingw로 마이그레이션되는 중입니다. 계속해서 그곳에서 우리를 팔로우할 수 있습니다. MinGW: GCC(GNU Compiler Collection)의 기본 Windows 포트로, 기본 Windows 애플리케이션을 구축하기 위한 무료 배포 가능 가져오기 라이브러리 및 헤더 파일로 C99 기능을 지원하는 MSVC 런타임에 대한 확장이 포함되어 있습니다. 모든 MinGW 소프트웨어는 64비트 Windows 플랫폼에서 실행될 수 있습니다.

SublimeText3 Linux 새 버전

SublimeText3 Linux 최신 버전

DVWA

DVWA(Damn Vulnerable Web App)는 매우 취약한 PHP/MySQL 웹 애플리케이션입니다. 주요 목표는 보안 전문가가 법적 환경에서 자신의 기술과 도구를 테스트하고, 웹 개발자가 웹 응용 프로그램 보안 프로세스를 더 잘 이해할 수 있도록 돕고, 교사/학생이 교실 환경 웹 응용 프로그램에서 가르치고 배울 수 있도록 돕는 것입니다. 보안. DVWA의 목표는 다양한 난이도의 간단하고 간단한 인터페이스를 통해 가장 일반적인 웹 취약점 중 일부를 연습하는 것입니다. 이 소프트웨어는