CSS 카운터 및 여러 열 사용

이번에는 CSS 카운터 및 다중 열 사용에 대해 알려드리겠습니다. CSS 카운터 및 다중 열 사용 시 주의 사항은 무엇인가요?

CSS를 통해 카운터를 정의하면 카운터에서 생성된 숫자를 다른 요소에서 사용할 수 있습니다.
속성:
1. counter-reset
함수: 카운터를 정의하고 초기값을 설정하는 데 사용됩니다
초기값이 설정되지 않은 경우 기본값은 0, 설정된 경우 양수, 음수, 0
Selector

{
   counter-reset:counter1 10;
    }

Selector

{
   counter-reset:counter1 10 counter2 20;
   }

참고: 전체 페이지의 요소 중 하나라도 카운터를 사용하려면 본문에 정의하는 것이 가장 좋습니다. 특정 요소(본체 제외)에 카운터를 정의해야 한다는 점을 기억하세요. 이렇게 정의하면 다시 사용할 때 항상 초기 값이 됩니다.

   body{
   counter-reset:c1 10 c2 20;
   }

2. counter-increment
기능: 카운터가 사용될 때마다 증가량을 설정합니다. 기본값은 1입니다.
속성 값: 양수(증가) 또는 음수(감소)일 수 있습니다.
참고: 어떤 라벨이 사용됩니까? , 해당 태그에 카운터 증가 속성을 선언합니다. 구문:
카운터 증가: 카운터 이름 증가 값: 카운터를 사용하여 생성된 숫자 텍스트입니다.
counterName: 카운터 이름
2. 다중 열


속성: 1,column-count요소가 구분되는 열 수 3
2,column-gap
열 사이의 간격 px
3,column-rule
열 규칙, 열 구분선 너비, 스타일, 색상
열 규칙: 1px 단색 빨간색;

브라우저 호환성 문제:

Internet 10 和 Opera 支持多列Firefox : -moz-Chrome 和 Safari : -webkit-div{column-count:3;column-gap:50px;column-rule:2px solid red;
-o-column-count:3;/*Opera*/-o-column-gap:50px;-o-column-rule:2px solid red;
-moz-column-count:3; /*火狐中的多列设置*/-moz-column-gap:50px;-moz-column-rule:2px solid green;
-webkit-column-count:3;/*Chrome 与 Safari*/-webkit-column-gap:50px;-webkit-column-rule:2px solid red;}

일반적인 Firefox 작성 방법

-moz-column-count:3;
-moz-column-gap:50px;

별도 쓰기

-moz-column-rule-style:dashed/dotted(点状)/double(双线)/solid(实线);
-moz-column-rule-width:thin/medium/thick/length;
-moz-column-rule-color:orange;

전체

-moz-column-rule:2px dashed red;

믿습니다. 이 기사의 사례를 읽고 나면 방법을 익힐 수 있습니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

관련 자료:

내가 작성한 코드와 브라우저가 호환되지 않으면 어떻게 해야 하나요?

2018년 최신 프론트엔드 인터뷰 질문 11

위 내용은 CSS 카운터 및 여러 열 사용의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!