CSS3의 새로운 기능: 다중 열 레이아웃 모듈에 대한 간략한 토론

CSS3에는 주로 텍스트의 다중 열 레이아웃에 사용되는 새로운 다중 열 레이아웃 모듈(Multi-column Layout Module)이 추가되었습니다.

다중 열은 다음과 같이 나눌 수 있습니다.

1 열 수 및 열 너비: 열 개수, 열 너비, 열

열 개수: 값은 양수입니다. 다중 열 분류에 대한 열 수를 나타내는 단위 없는 정수입니다. 기본값은 자동입니다(열 수는 열 너비 및 기타 매개변수에 따라 결정됩니다). IE는 이 속성을 지원하지 않습니다. Firefox 및 Webkit에서는 접두사 -moz 및 -webkit을 추가해야 합니다.

column-width: Multi-column의 열 너비를 나타냅니다. 단위는 px 또는 em이지만 음수일 수 없습니다. 기본값은 auto입니다(열 수는 열과 같은 다른 매개변수에 따라 결정됩니다). -count, 그러나 현재는 열 수를 사용할 수 없습니다. IE는 이 속성을 지원하지 않지만 Opera11+는 이를 지원합니다. Firefox 및 Webkit에서는 접두사 -moz 및 -webkit을 추가해야 합니다.

columns: 열 너비와 열 개수의 두 가지 속성을 결합합니다. 이 약어 모드는 Firefox가 아닌 Webkit 및 Opera에서만 지원됩니다.

column-width와 columns-gap을 동시에 설정하는 경우 실제 열 너비는 column-gap에 따라 조정되며 설정된 열 너비 값과 동일하지 않을 수 있습니다.

설정된 열 너비가 요소 컨테이너의 너비보다 크면 요소 내용이 열 너비에 따라 배치되지 않고 컨테이너가 깨지므로 열 너비가 컨테이너와 동일해집니다. 너비.

열을 다양한 화면 크기에 맞추려면 정확한 열 너비나 열 수를 설정하고 이에 따라 너비, 열 간격, 열 규칙 너비 등 관련 속성을 지정하는 것이 가장 좋습니다. 등의 요소의 경우 -gap 및 column-rule-width는 기본값을 사용합니다. 다중 열 디자인에서는 열 너비 및 열 수의 값을 명확하게 작성하는 것이 가장 좋습니다.

②　열 간격 및 열 스타일: 열-간격, 열-규칙-색상, 열-규칙-스타일, 열-규칙-너비, 열-규칙

span 열 내 레이아웃에서 열 간격은 여백과 유사하게 두 열 사이의 공간에 해당하고 열 규칙은 테두리와 유사하게 구분선에 해당합니다. column-gap과 olumn-rule은 높이를 가지며 그 높이는 기둥의 높이와 동일하다는 것이 가장 큰 차이점은, column-gap은 스타일이 없고 기둥 사이에 일정한 공간을 차지하는 반면, column-rule은 높이를 갖는다는 점입니다. 특정 스타일. 테두리와 유사하게 스타일이 있습니다.

column-gap 단위는 px 또는 em이지만 음수일 수 없습니다. 기본값은 일반(1em)입니다. IE는 이 속성을 지원하지 않지만 Opera11+는 이를 지원합니다. Firefox 및 Webkit에서는 접두사 -moz 및 -webkit을 추가해야 합니다.

column-gap을 사용하여 인접한 열 사이의 거리를 변경할 수 있지만 동시에 여러 열 요소에 대해 열 너비를 설정한 경우 열 간격과 열 너비의 합이 전체보다 큰 경우 여러 열 요소의 너비로 인해 열이 분할되어 첫 번째 열로 표시됩니다. 이때 열 너비는 요소의 전체 너비에 맞게 자동으로 조정됩니다.

column-rule에는 테두리와 유사한 속성도 있습니다: 너비 열-규칙-너비(기본값은 중간), 스타일 열-규칙-스타일(기본값은 없음), 색상 열-규칙-색상, 차이점은 테두리는 특정 공간 위치를 차지하지만 열 규칙은 공간 위치를 차지하지 않습니다. 열 규칙 너비를 늘리면 열 레이아웃에 영향을 주지 않으며 요소 가장자리까지 요소의 양쪽으로만 확장됩니다. . ㅋㅋㅋ ㅋㅋㅋ

⑤　열 스패닝: column-span

column-span은 주로 열 요소의 하위 요소가 확장할 수 있는 열 수를 정의하는 데 사용됩니다. 때로는 특정 내용이나 제목을 어떤 열로도 나누지 않고 모든 열에 걸쳐야 하는 경우가 있는데, 이 경우 column-span 속성이 필요합니다. 기본값은 없음입니다. 이는 어떤 열에도 적용되지 않음을 의미하고, all은 모든 열에 적용됨을 의미합니다. 현재 지원되는 브라우저는 Safari, Chrome 및 Opera11+뿐입니다. Webkit에서는 접두사 -webkit이 필요합니다.

.multiColumns {
	-moz-column-count: 3;
	-webkit-column-count: 3;
	column-count: 3;
	-moz-column-gap: 30px;
	-webkit-column-gap: 30px;
	column-gap: 30px;
}
.multiColumns h1 {
	background: red;
	-webkit-column-span: all;
	column-span: all;
}

관련 권장 사항:

레이아웃 계획 - 다중 열 레이아웃

HTML-css 다중 열 레이아웃

다열 레이아웃 정보

위 내용은 CSS3의 새로운 기능: 다중 열 레이아웃 모듈에 대한 간략한 토론의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!