CSS3의 다중 열 레이아웃이란 무엇입니까? 열 속성 소개(예)-CSS 튜토리얼-php.cn

CSS3의 다중 열 레이아웃이란 무엇입니까? 열 속성 소개(예)

青灯夜游

풀어 주다： 2018-09-11 11:35:35

원래의

3472명이 탐색했습니다.

이 장에서는 CSS3의 다중 열 레이아웃이 무엇인지 설명합니다. columns 속성의 소개(예)에는 특정 참조 값이 있습니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

1. 다중 열 레이아웃이란 무엇입니까?

CSS3의 새로운 다중 열 레이아웃(다중 열)은 기존 HTML 웹 페이지의 블록 레이아웃 모드를 강력하게 확장한 것입니다. 이 새로운 구문을 사용하면 웹 개발자가 여러 열에 텍스트를 쉽게 표시할 수 있습니다. 우리는 텍스트 줄이 너무 길면 독자가 읽기가 더 어려워지고 잘못된 줄을 읽거나 연속적으로 읽을 수 있다는 것을 알고 있습니다. 다음 줄의 시작 부분 안구의 움직임이 너무 크면 주의력이 약해지고 쉽게 읽을 수 없게 됩니다. 따라서 대형 화면 디스플레이를 최대한 효율적으로 사용하려면 신문의 뉴스 레이아웃처럼 텍스트의 너비를 제한하고 텍스트가 여러 열에 표시될 수 있도록 페이지 디자인이 필요합니다. 예:

CSS3의 다중 열 레이아웃이란 무엇입니까? 열 속성 소개(예)

2. 열 속성 소개 및 사용법

# 🎜🎜#

1. 여러 열을 만듭니다(열 수 및 열 너비) 텍스트를 표시하려는 열 수에 관계없이 열 개수와 열 너비라는 두 가지 속성만 있으면 됩니다.

column-count 속성은 특정 열 수를 설정합니다 , 예:

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>多列布局</title>
		<style type="text/css">
			.demo{
				width: 500px;
				height: 100px;
				margin: auto;
				-moz-column-count:2; /* Firefox */
				-webkit-column-count:2; /* Safari and Chrome */
				column-count:2;
			}
		</style>
	</head>

	<body>
		<div class="demo">
			CSS里一直有一个让我们头疼的问题，就是创建布局很麻烦。当然，有很多方式，有很多技术都可以创建各种布局，但我们总觉得CSS里应该提供一些新属性，让我们能更好的管理布局。幸运的是，CSS3里提供了一批新的创建列式布局的column属性，有了这些属性，我们不需要再使用float,clear,margin等属性进行调控，避免了很多麻烦。
		</div>
	</body>
</html>

로그인 후 복사

Rendering:

# 🎜🎜#

CSS3의 다중 열 레이아웃이란 무엇입니까? 열 속성 소개(예)

열 너비 속성은

열의 너비를 제어합니다. column-count 속성에 대한 값을 제공하지 않으면 브라우저는 자체적으로 텍스트를 적절한 수의 열로 나누기로 결정합니다. 예:

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>多列布局</title>
		<style type="text/css">
			.demo{
				width: 500px;
				height: 100px;
				margin: auto;
				column-width:100px;
				-moz-column-width:100px; /* Firefox */
				-webkit-column-width:100px; /* Safari and Chrome */
			}
		</style>
	</head>

	<body>
		<div class="demo">
			CSS里一直有一个让我们头疼的问题，就是创建布局很麻烦。当然，有很多方式，有很多技术都可以创建各种布局，但我们总觉得CSS里应该提供一些新属性，让我们能更好的管理布局。幸运的是，CSS3里提供了一批新的创建列式布局的column属性，有了这些属性，我们不需要再使用float,clear,margin等属性进行调控，避免了很多麻烦。
		</div>
	</body>
</html>

로그인 후 복사

Rendering:

CSS3의 다중 열 레이아웃이란 무엇입니까? 열 속성 소개(예)

2. 여러 열의 열 및 간격 열 사이(column-gap 속성)

column-gap 속성은 열 사이의 간격을 지정합니다. 기본적으로 이 간격의 너비는 1em이지만, column-gap 속성을 사용하면 기본 너비 값이 수정됩니다:

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>多列布局</title>
		<style type="text/css">
			.demo{
				width: 500px;
				height: 150px;
				margin: auto;
				-moz-column-count:3; /* Firefox */
				-webkit-column-count:3; /* Safari and Chrome */
				column-count:3;
			
				-moz-column-gap:40px; /* Firefox */
				-webkit-column-gap:40px; /* Safari and Chrome */
				column-gap:40px;
			}
		</style>
	</head>

	<body>
		<div class="demo">
			CSS里一直有一个让我们头疼的问题，就是创建布局很麻烦。当然，有很多方式，有很多技术都可以创建各种布局，但我们总觉得CSS里应该提供一些新属性，让我们能更好的管理布局。幸运的是，CSS3里提供了一批新的创建列式布局的column属性，有了这些属性，我们不需要再使用float,clear,margin等属性进行调控，避免了很多麻烦。
		</div>
	</body>

</html>

로그인 후 복사

Rendering:

# 🎜 🎜#

CSS3의 다중 열 레이아웃이란 무엇입니까? 열 속성 소개(예) 3. 열 테두리(열 규칙 속성)

사용법: Column-rule: 테두리의 두께, 색상 및 스타일;

column-rule 속성의 사용법은 border 속성의 사용법과 다소 유사하며 병렬로 사용할 수 있습니다.

예:

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>多列布局</title>
		<style type="text/css">
			.demo{
				width: 500px;
				height: 150px;
				margin: auto;
				-moz-column-count:3; /* Firefox */
				-webkit-column-count:3; /* Safari and Chrome */
				column-count:3;
			
				-moz-column-gap:40px; /* Firefox */
				-webkit-column-gap:40px; /* Safari and Chrome */
				column-gap:40px;
				
				-webkit-column-rule: 1px solid #0188FB; /* Chrome, Safari, Opera */
			    -moz-column-rule: 1px solid #0188FB; /* Firefox */
			    column-rule: 1px solid #0188FB;
			}
		</style>
	</head>

	<body>
		<div class="demo">
			CSS里一直有一个让我们头疼的问题，就是创建布局很麻烦。当然，有很多方式，有很多技术都可以创建各种布局，但我们总觉得CSS里应该提供一些新属性，让我们能更好的管理布局。幸运的是，CSS3里提供了一批新的创建列式布局的column属性，有了这些属性，我们不需要再使用float,clear,margin等属性进行调控，避免了很多麻烦。
		</div>
	</body>

</html>

로그인 후 복사

렌더링:

CSS3의 다중 열 레이아웃이란 무엇입니까? 열 속성 소개(예) 4. Balance

CSS3 사양은 각 열의 높이가 균형을 이루고 있다고 설명하며, 브라우저는 각 열에 채워지는 텍스트의 양을 자동으로 조정하고 텍스트를 균등하게 나누어 각 열의 높이를 만듭니다. 컬럼 높은 수준의 균형과 일관성을 유지합니다.

그러나 때로는 열의 최대 높이를 설정해야 할 때도 있습니다. 이때 텍스트 내용은 첫 번째 열부터 채워지고 두 번째 열, 세 번째 열, 어쩌면 다음 열까지 채워집니다. 후속 열은 아마도 넘쳐날 것입니다. 따라서 다중 열 레이아웃에 대해 height 또는 max-height 속성 값이 설정되면 콘텐츠의 양, 충분 여부에 관계없이 열이 지정된 높이까지 늘어납니다.

CSS3의 다중 열 레이아웃(열)은 웹 프런트엔드 개발자가 와이드스크린 디스플레이를 효율적으로 활용할 수 있도록 돕는 매우 유용한 기능입니다. 특히 기둥 높이의 균형을 자동으로 맞춰야 하는 경우에는 여러 곳에서 이 기능이 필요하다는 것을 알게 될 것입니다.

위 내용은 CSS3의 다중 열 레이아웃이란 무엇입니까? 열 속성 소개(예)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!