CSS3 레이아웃 및 조판에 대한 설명

Premise

레이아웃과 조판을 소개하기 전에 먼저 CSS3에서 새로 도입된 크기 단위를 소개합니다. rem, rem에 대한 모든 참조 정의된 글꼴 ​​크기는 루트 요소 텍스트의 크기에 상대적입니다. em을 사용하는 것과 비교할 때 이 방법을 사용하면 글꼴 크기를 수동으로 계산하는 지루한 프로세스가 필요 없습니다.

효과 1

　　demo01.png

CSS3에서 제공하는 새로운 속성을 사용하는 한 이러한 효과를 쉽게 만들 수 있습니다. 아래에서는 사용되는 주요 속성 중 일부를 설명합니다.

• 　column-width: 열의 너비를 지정하는 데 사용됩니다. 값이 지정되면 브라우저는 너비에 따라 내용을 동적으로 나누기로 결정합니다. 현재 브라우저의 열 수입니다.

• Column-rule: 이 속성은 실제로 세 가지 속성, 즉 열-규칙-너비를 포함합니다. 열 규칙 스타일, 열 규칙 색상, 어쨌든 그들이 달성한 것은 열 사이에 구분선을 추가하는 것인데, 이는 테두리 속성의 설정과 동일합니다.

• 　column-gap: 컬럼의 간격 속성을 설정하는 데 사용됩니다. 이 값은 컬럼의 양쪽에 균등하게 분배됩니다.

열을 구현하려면 열 너비 또는 열 개수를 사용할 수 있습니다. 속성을 지정하지만 일반적으로 이 작업을 수행하지 않는 이유는 현재 브라우저의 너비에 관계없이 콘텐츠를 세 개의 열로 나누어야 한다는 의미로 매우 친숙하지 않은 디자인이기 때문입니다.

위의 속성을 알고 나면 다이어그램의 효과를 빠르게 실현할 수 있다고 믿습니다. 여기에 소스 코드를 붙여넣지 않을 것이므로 여기를 클릭하여 다운로드할 수 있습니다. . 여기서 언급해야 할 것은 페이지에 멋진 글꼴을 인용했다는 것입니다. 해당 글꼴을 사용하려면 태그 아래에 다음 코드 줄을 붙여넣으면 됩니다.

<link href=&#39;http://fonts.googleapis.com/css?family=Lobster|Terminal+Dosis&#39; rel=&#39;stylesheet&#39; type=&#39;text/css&#39;>

효과 2

demone02.png

이 효과를 얻기 위해 Flexbox를 사용합니다. 아래에서는 사용된 몇 가지 속성을 설명합니다.

• 　display: Flexbox 레이아웃을 사용하려면 먼저 이 속성의 값을 flex로 설정해야 합니다.

• flex-flow: 이 속성은 실제로 두 속성의 약어입니다. 그 중 하나는 메인의 방향을 설정하는 데 사용되는 flex-direction입니다. 축으로 설정된 경우 그러면 가로 방향이 주축이 되고, 열인 경우 세로 방향이 주축이 됩니다. 또 다른 속성은 flex-wrap입니다. 요소 줄바꿈을 설정하는 데 사용됩니다. 요소가 상위 요소의 너비를 초과하면 자동으로 줄 바꿈됩니다. 이렇게 하면 화면에 적응하는 효과를 얻을 수 있습니다.

• 　flex: 이 속성은 일반적으로 디스플레이가 flex로 설정된 경우에 설정됩니다. 하위 요소에는 세 가지 매개변수가 설정되어 있는데, 설명할 언어를 정리할 수 없기 때문에 여기서는 자세히 설명하지 않겠습니다. 이 속성의 사용법은 Baidu에서 확인할 수 있습니다.

위 내용은 CSS3 레이아웃 및 조판에 대한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!