Sie sollten CSS kennen. Meine Fragen, um Ihre CSS -Fähigkeit zu verbessern

Hallo allerseits!

CSS deckt viele Themen ab, und kein Entwickler kann alles vollständig erfassen. Es ist wahr, dass wir nicht in allen Kenntnissen kompetent sein müssen, aber einige CSS -Grundkenntnisse sind wesentlich. Mein Problem ist es, sich um diese Kernkenntnisse zu entwickeln.

Diese Probleme sind für Anfänger nicht geeignet. Nur mit bestimmten Erfahrungen können Sie die Absicht dieser Probleme besser verstehen.

Sie können auch den Entwicklungsfortschritt des Projekts auf GitHub befolgen.

Starten Sie!

<:> Hinweis: Ich verwende den Begriff "Berechnungswert", der sich auf die Attributwerte bezieht, die Sie auf der Registerkarte "Berechnung" der Entwickler -Tool "berechnen".

Was sind die Eigenschaften des folgenden Selektors?

Die Pseudo -Funktion hilft dem Browser, den höchsten Selektioner aus der angegebenen Selektorliste auszuwählen. In diesem Beispiel ist der am meisten vorgestellte Selektor

. Die Eigenschaften des Selektors sind (0, 1, 0, 0). Dies wird auf das gesamte angewendet.

<code class="language-css">:is(#container, .content, main) {
  color: red;
}</code>

Der Berechnungswert des Attributs ist :is(). Richtig oder falsch? #container @规则

richtig.

pseudo -pseudo -Funktion macht die Eigenschaften Null. Daher sind die Merkmale des Auswahl der Auswahl höher. Aus diesem Grund ist der Berechnungswert des -attributs color. red

Welche Form wird im folgenden Beispiel angezeigt?

<code class="language-css">.container {
  color: red;
}

:where(#container) {
  color: blue;
}</code>

:where() Wenn das Attribut des Elements .container ist, dann sind color und red Attribute ungültig. Wir werden das Quadrat nicht sehen oder so.

Was ist der Algorithmus des

-Trägerberechnung des -Elements?

<code class="language-css">.container {
  display: inline;
  width: 1rem;
  height: 1rem;
  background-color: currentColor;
}</code>

display inline Fall 1: Elemente sind Block -Level -Elemente. Ihre width -attribute sind gleich den height -attributen des übergeordneten Elements.

Fall 2: Elemente sind elastische Elemente. Ihre .child Attribute werden gemäß dem Inhalt berechnet. width

Wie lautet der Berechnungswert des

<code class="language-html"><div class="parent">
  <div class="child"></div>
</div>
<div class="parent-flex">
  <div class="child"></div>
</div></code>

-attributs des Pseudoelements?

<code class="language-css">.parent {
  display: block;
}

.parent-flex {
  display: flex;
}</code>

.child und width. width oder Wert konvertiert den

-Werwert des

-Treizattributs des untergeordneten Elements in den Ersatzwert .child. width

Was ist im Fall des übergeordneten Elements

und display der Unterschied zwischen der Standardstelle des untergeordneten Elements?

<code class="language-css">.parent {
  display: inline-grid;
}

.parent::before {
  content: "";
  display: inline;  
}

.parent::after {
  content: "";
  display: flex;
}</code>

Innerhalb des übergeordneten Elements von wird die Sub -Element in der Reihenfolge angezeigt. Stattdessen werden im Fall von die Elemente einzeln angezeigt.

Was sind die Berechnungswerte von .child und width Attributen von Elementen? height

<code class="language-css">:is(#container, .content, main) {
  color: red;
}</code>

<code class="language-css">.container {
  color: red;
}

:where(#container) {
  color: blue;
}</code>

Das Attribut

des Elements ist gleich dem .child -Merkmal des übergeordneten Elements. Daher beträgt der Berechnungswert des width -attributs 1600px. (Angenommen, die Standard -Schriftgröße des Browsers beträgt 16px, 100REM = 100 * 16px = 1600px) width width Innerhalb des übergeordneten Elements von

füllen

den gesamten Speicherplatz. Wenn das übergeordnete Element über mehrere Elemente verfügt, wird der Speicherplatz durchschnittlich zugewiesen. Daher beträgt der Berechnungswert des display: grid -Regributs des height -Elements 20rem / 2 = 10rem, dh 10 * 16 = 160px. .child height Der Randabstand des Elements überschreitet das übergeordnete Element in allen Fällen. Richtig oder falsch?

.child

Fehler.

<code class="language-css">.container {
  display: inline;
  width: 1rem;
  height: 1rem;
  background-color: currentColor;
}</code>

, ,

<code class="language-html"><div class="parent">
  <div class="child"></div>
</div>
<div class="parent-flex">
  <div class="child"></div>
</div></code>

und

sub -marginale Entfernungen überschreiten das übergeordnete Element nicht. display: flex display: inline-flex Ist der Rand in den Elementen von display: grid und display: inline-grid wirksam?

Nein, ungültig. In den Elementen von display: inline-flex, , display: inline-grid und

wird der Randabstand angesammelt.

display: flex Die Position von Pseudoelementen ist horizontal und vertikal. Richtig oder falsch? display: inline-flex display: grid display: inline-grid richtig. Der Browser verteilt den gesamten Raum zwischen der Sub -Element und dem übergeordneten Element.

Was ist der Berechnungswert des Attributs?

<code class="language-css">.parent {
  display: block;
}

.parent-flex {
  display: flex;
}</code>

Der Anfangswert von

ist

. Daher ist der min-width Berechnungswert des Elements

<code class="language-css">.parent {
  display: inline-grid;
}

.parent::before {
  content: "";
  display: inline;  
}

.parent::after {
  content: "";
  display: flex;
}</code>

.

<code class="language-html"><div class="parent">
  <div class="child"></div>
</div></code>

, wenn min-width, auto, .child, min-width oder auto -Werte für Elemente definiert sind, ist der Berechnungswert seiner Sub -Element 0.

Wie verwenden wir Attribute, um block Attribute zu ersetzen? inline inline-block table Wir sollten table-* Attribute für Element definieren. min-width

Der Berechnungswert des Attributs ist

. Richtig oder falsch? gap margin

richtig. Wenn oder

<code class="language-css">.parent { 
  display: grid; 
  width: 100rem; 
  height: 20rem; 
}</code>

Wert definiert ist, konvertiert der Browser den gesamten

-Werwert des .parent -attributs in gap alternativen Wert.

Warum ist der Berechnungswert von display Attributen des -Elements? block

<code class="language-html"><div class="parent">
  <div class="child"></div>
</div></code>

Elemente mit oder absolute werden aus dem normalen Dokumentstrom entfernt. Daher kann das übergeordnete Element es nicht sehen. Aus diesem Grund beträgt der Berechnungswert des -attributs 0. fixed

Welche Rolle spielt im folgenden Beispiel isolation Attribute?

<code class="language-css">:is(#container, .content, main) {
  color: red;
}</code>

<code class="language-css">.container {
  color: red;
}

:where(#container) {
  color: blue;
}</code>

wir sollten uns daran erinnern, dass, wenn das Attribut z-index verwendet wird, welcher Stapel der Browser verwendet.

standardmäßig ist der Wurzelstapelkontext html Element. Aus diesem Grund befindet sich das Pseudo -Element ohne hinter dem isolation: isolate Element. .parent

Wir haben Attribute verwendet, um einen neuen Stapelkontext für

Elemente zu erstellen. Daher wird das Pseudoelement hinter dem Text angezeigt, jedoch vor dem isolation -Element. .child .parent Was ist der Ort des Pseudoelements?

Zunächst, weil

<code class="language-css">.container {
  display: inline;
  width: 1rem;
  height: 1rem;
  background-color: currentColor;
}</code>

die Pseudoelemente in der Mitte angezeigt werden.

place-items: center Nach der Anwendung und

bewegt sich sie entlang der y -Achse zum unteren Rand des übergeordneten Elements, da die Priorität von

, position: absolute, bottom: 0 und top Attributen ist höher als right Eigenschaft. bottom left Was ist der Berechnungswert des Attributs? place-items

Die Priorität von Attributen ist höher als width Attribute, aber ihre Werte müssen auch im Bereich von

und

<code class="language-html"><div class="parent">
  <div class="child"></div>
</div>
<div class="parent-flex">
  <div class="child"></div>
</div></code>

Attributen liegen. Die Antwort lautet also 225px.

flex-basis Was ist der Berechnungswert des Attributs? width min-width max-width Bei Verwendung von CSS -benutzerdefinierten Attributen sollten wir alle abgekürzten Teile definieren. Wenn wir dies nicht tun, kann der Browser nicht verwendet werden.

Dies geschah in unserem Beispiel. padding Die Abkürzung erfordert 4 Werte, aber nur 3 Entwickler sind definiert. Der Browser kann nicht eingerichtet werden. Daher beträgt der Berechnungswert 0.

<code class="language-css">.parent {
  display: block;
}

.parent-flex {
  display: flex;
}</code>

Warum ist der Berechnungswert des

-attributs des -Elements?

padding CSS -benutzerdefinierte Attribute werden aus den gleichen benutzerdefinierten Attribut -Vererbungswerten, die durch übergeordnete Elemente definiert sind. Wenn das benutzerdefinierte Attribut weggelassen wird, verwendet der Browser den Rückgabewert.

In unserem Beispiel wird das Attribut p aus den übergeordneten Elementen weggelassen. Daher verwendet der Browser den Rückerstattungswert, dh das Schlüsselwort background-color, das Schlüsselwort aus dem Attribut

des

<code class="language-css">.parent {
  display: inline-grid;
}

.parent::before {
  content: "";
  display: inline;  
}

.parent::after {
  content: "";
  display: flex;
}</code>

-Elements, erbte den grünen Wert.

Diese Revisions -Ausgabe behält die Originalbildformatierung bei und vermeidet erhebliche Änderungen an der Bedeutung, während der Text für verbesserte Lie und Fluss umformat

Das obige ist der detaillierte Inhalt vonSie sollten CSS kennen. Meine Fragen, um Ihre CSS -Fähigkeit zu verbessern. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!