CSS3의 다중 열 레이아웃이란 무엇입니까? 열 속성 소개(예)
이 장에서는 CSS3의 다중 열 레이아웃이 무엇인지 설명합니다. columns 속성의 소개(예)에는 특정 참조 값이 있습니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.
1. 다중 열 레이아웃이란 무엇입니까?
CSS3의 새로운 다중 열 레이아웃(다중 열)은 기존 HTML 웹 페이지의 블록 레이아웃 모드를 강력하게 확장한 것입니다. 이 새로운 구문을 사용하면 웹 개발자가 여러 열에 텍스트를 쉽게 표시할 수 있습니다. 우리는 텍스트 줄이 너무 길면 독자가 읽기가 더 어려워지고 잘못된 줄을 읽거나 연속적으로 읽을 수 있다는 것을 알고 있습니다. 다음 줄의 시작 부분 안구의 움직임이 너무 크면 주의력이 약해지고 쉽게 읽을 수 없게 됩니다. 따라서 대형 화면 디스플레이를 최대한 효율적으로 사용하려면 신문의 뉴스 레이아웃처럼 텍스트의 너비를 제한하고 텍스트가 여러 열에 표시될 수 있도록 페이지 디자인이 필요합니다. 예:
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>
열의 너비를 제어합니다. 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>
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:
# 🎜 🎜#
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>
4. Balance
CSS3 사양은 각 열의 높이가 균형을 이루고 있다고 설명하며, 브라우저는 각 열에 채워지는 텍스트의 양을 자동으로 조정하고 텍스트를 균등하게 나누어 각 열의 높이를 만듭니다. 컬럼 높은 수준의 균형과 일관성을 유지합니다.
그러나 때로는 열의 최대 높이를 설정해야 할 때도 있습니다. 이때 텍스트 내용은 첫 번째 열부터 채워지고 두 번째 열, 세 번째 열, 어쩌면 다음 열까지 채워집니다. 후속 열은 아마도 넘쳐날 것입니다. 따라서 다중 열 레이아웃에 대해 height 또는 max-height 속성 값이 설정되면 콘텐츠의 양, 충분 여부에 관계없이 열이 지정된 높이까지 늘어납니다. CSS3의 다중 열 레이아웃(열)은 웹 프런트엔드 개발자가 와이드스크린 디스플레이를 효율적으로 활용할 수 있도록 돕는 매우 유용한 기능입니다. 특히 기둥 높이의 균형을 자동으로 맞춰야 하는 경우에는 여러 곳에서 이 기능이 필요하다는 것을 알게 될 것입니다.위 내용은 CSS3의 다중 열 레이아웃이란 무엇입니까? 열 속성 소개(예)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
Video Face Swap
완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!
인기 기사
뜨거운 도구
메모장++7.3.1
사용하기 쉬운 무료 코드 편집기
SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.
스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경
드림위버 CS6
시각적 웹 개발 도구
SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)
뜨거운 주제
7717
15
1641
14
1396
52
1289
25
1233
29
순수한 CSS3로 물결 효과를 얻는 방법은 무엇입니까? (코드 예)
Jun 28, 2022 pm 01:39 PM
순수한 CSS3로 물결 효과를 얻는 방법은 무엇입니까? 이 기사에서는 SVG 및 CSS 애니메이션을 사용하여 물결 효과를 만드는 방법을 소개합니다. 도움이 되길 바랍니다.
CSS를 능숙하게 사용하여 다양한 이상한 모양의 버튼 구현(코드 포함)
Jul 19, 2022 am 11:28 AM
이 글에서는 CSS를 활용하여 자주 나타나는 다양한 모양의 버튼을 쉽게 구현하는 방법을 알려드리겠습니다. 도움이 되셨으면 좋겠습니다.
공간을 차지하지 않고 CSS에서 요소를 숨기는 방법
Jun 01, 2022 pm 07:15 PM
두 가지 방법: 1. 표시 속성을 사용하여 요소에 "display:none;" 스타일을 추가합니다. 2. 요소를 숨기려면 위치 및 상단 속성을 사용하여 요소의 절대 위치를 설정하세요. 요소에 "position:absolute;top:-9999px;" 스타일을 추가하세요.
CSS3에서 레이스 테두리를 구현하는 방법
Sep 16, 2022 pm 07:11 PM
CSS에서는 border-image 속성을 사용하여 레이스 테두리를 만들 수 있습니다. border-image 속성은 이미지를 사용하여 테두리를 생성할 수 있습니다. 즉, 배경 이미지를 레이스 스타일로 지정하기만 하면 됩니다. "border-image: url(이미지 경로)은 이미지 테두리 너비가 안쪽으로 반복되는지 여부입니다.
CSS3에서 마우스를 클릭하여 이미지를 확대하는 방법
Apr 25, 2022 pm 04:52 PM
구현 방법: 1. ":active" 선택기를 사용하여 그림에 대한 마우스 클릭 상태를 선택합니다. 2. 변환 속성과 scale() 함수를 사용하여 그림 확대 효과를 얻습니다. 구문은 "img:active {transform; : scale(x축 배율, y축 배율);}".
텍스트 캐러셀과 이미지 캐러셀도 순수 CSS를 사용하여 구현할 수 있다는 것이 밝혀졌습니다!
Jun 10, 2022 pm 01:00 PM
텍스트 회전판과 이미지 회전판을 만드는 방법은 무엇입니까? 누구나 가장 먼저 생각하는 것은 js를 사용할지 여부입니다. 실제로 순수 CSS를 사용하여 구현하는 방법도 모두에게 도움이 되기를 바랍니다.
CSS3에서 애니메이션 회전 속도를 설정하는 방법
Apr 28, 2022 pm 04:32 PM
CSS3에서는 "animation-timing-function" 속성을 사용하여 애니메이션 회전 속도를 설정할 수 있습니다. 이 속성은 애니메이션이 순환을 완료하는 방법을 지정하고 애니메이션의 속도 곡선을 설정하는 데 사용됩니다. 애니메이션 타이밍 기능: 속도 속성 값;}".
CSS3 애니메이션 효과에 변형이 있나요?
Apr 28, 2022 pm 02:20 PM
CSS3의 애니메이션 효과에는 변형이 있습니다. 애니메이션 속성은 애니메이션 스타일을 설정하는 데 사용됩니다. 변형 속성은 변형 스타일을 설정하는 데 사용됩니다.
