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. カウンタ増分

機能: カウンタが使用されるたびに増分を設定します。デフォルト値は 1 です。 属性値: 正 (増分) または負 (減分) にすることができます。
注: どのラベルが使用されるか。 、そのタグでカウンタインクリメント属性を宣言します。 構文:
counter-increment: カウンタ名 インクリメント値 : カウンタを使用して作成された数値テキスト。
counterName: カウンター名
2. 複数の列


属性:
1、column-count
要素が区切られている列の数 32、column-gap列間の隙間 px
3、column-rule
列ルール、列区切り文字の幅、スタイル、色
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 中国語 Web サイトの他の関連記事に注目してください。

関連記事:

ブラウザが私が書いたコードと互換性がない場合はどうすればよいですか?

2018 年の最新フロントエンド面接の質問 11

以上がCSS カウンターと複数の列の使用の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。