Verwendung von CSS-Zählern und mehreren Spalten

Dieses Mal werde ich Ihnen die Verwendung von CSS-Zählern und Mehrspalten vorstellen. Was sind die Vorsichtsmaßnahmen bei der Verwendung von CSS-Zählern und Mehrspalten?

Definieren Sie einen Zähler über CSS, und die vom Zähler generierte Zahl kann in anderen Elementen verwendet werden.
Attribute:
1. Zähler-Reset
Funktion: Wird verwendet, um den Zähler zu definieren und den Anfangswert festzulegen
Wenn der Anfangswert nicht gesetzt ist , der Standardwert ist 0, wenn festgelegt, kann er positiv, negativ, 0 sein
Selektor

{
   counter-reset:counter1 10;
    }

Selektor

{
   counter-reset:counter1 10 counter2 20;
   }

Hinweis: Wenn ein Element der Die gesamte Seite ist Wenn Sie den Zähler verwenden möchten, definieren Sie ihn am besten im Hauptteil. Denken Sie daran, den Zähler in einem bestimmten Element (außer Body) zu definieren. Wenn er auf diese Weise definiert wird, ist er bei erneuter Verwendung immer der Anfangswert.

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

2. Zählerinkrement
Funktion: Stellen Sie das Inkrement bei jeder Verwendung des Zählers ein. Der Standardwert ist 1
Attributwert: Er kann positiv sein (inkrementierend). , oder Kann negativ (absteigend) sein
Hinweis: Welches Tag verwendet wird, deklarieren Sie das Counter-Inkrement-Attribut
in diesem Tag. Syntax:
Counter-Inkrement: Zählername-Inkrementwert;
div{
counter-increment:c1 10;
}
Function:
counter(counterName) Function
Function: Verwenden Sie den vom Zähler erstellten numerischen Text.
counterName: Zählername
2. Mehrere Spalten

Attribute:
1, Column-Count
Die Anzahl der Spalten, in denen das Element getrennt ist 3
2, Spaltenlücke
Die Lücke zwischen den Spalten px
3, Spaltenregel
Spaltenregel, Breite, Stil, Farbe des Spaltentrennzeichens
Spaltenregel:1px durchgehend rot;
Durchsuchen Probleme mit der Serverkompatibilität:

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;}

Gemeinsame Firefox-Schreibmethode

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

Separat schreiben

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

Insgesamt

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

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Verwandte Lektüre:

Was soll ich tun, wenn der Browser nicht mit dem von mir geschriebenen Code kompatibel ist?

2018 Neueste Front-End-Interviewfragen 11

Das obige ist der detaillierte Inhalt vonVerwendung von CSS-Zählern und mehreren Spalten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!