Vous devriez connaître CSS. Mes questions pour améliorer vos compétences CSS

Salut tout le monde!

CSS couvre de nombreux thèmes, et aucun développeur ne peut tout comprendre. Il est vrai que nous n'avons pas besoin de maîtriser toutes les connaissances, mais certaines connaissances de base du CSS sont essentielles. Mon problème est de se développer autour de ces points de connaissance de base.

Ces problèmes ne conviennent pas aux débutants. Ce n'est qu'avec une certaine expérience que vous pouvez mieux comprendre l'intention de ces problèmes.

Vous pouvez également suivre les progrès de développement du projet sur GitHub.

Commencez!

Remarque: J'utilise le terme "valeur de calcul", qui fait référence aux valeurs d'attribut que vous voyez dans l'onglet "Calcul" de l'outil de développeur.

Quelles sont les caractéristiques du sélecteur suivant?

La pseudo-fonction aide le navigateur à sélectionner le sélectionneur le plus élevé dans la liste de sélecteurs donnée. Dans cet exemple, le sélecteur le plus en vedette est

. Les caractéristiques du sélecteur sont (0, 1, 0, 0). Cela sera appliqué à l'ensemble de .

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

La valeur de calcul de l'attribut est :is(). Correct ou mal? #container @规则

correct.

pseudo -pseudo-fonction rendra les caractéristiques zéro. Par conséquent, les caractéristiques du sélecteur color sont plus élevées. C'est pourquoi la valeur de calcul de l'attribut est red.

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

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

Quelle forme sera affichée dans l'exemple suivant?

:where() .container Si l'attribut de l'élément est color, alors red et

les attributs ne sont pas valides. Nous ne verrons pas le carré ou quoi que ce soit.

Quelle est l'algorithme de la valeur de calcul de l'attribut

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

de l'élément ?

display inline width Cas 1: Les éléments sont des éléments de niveau de bloc. Leurs attributs height sont égaux aux attributs

de l'élément parent.

.child Cas 2: Les éléments sont des éléments élastiques. Leurs attributs width sont calculés en fonction du contenu.

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

Quelle est la valeur de calcul de l'attribut

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

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

de l'élément pseudo?

.child width et width.

ou La valeur convertira la valeur

de l'attribut .child de l'élément enfant en valeur de remplacement width.

Dans le cas de l'élément parent display et

, quelle est la différence entre l'emplacement par défaut de l'élément enfant?

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

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

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

À l'intérieur de l'élément parent de , le sous-élévation sera affiché dans l'ordre dans l'ordre. Au lieu de cela, dans le cas de , les éléments seront affichés un par un. block

Quelles sont les valeurs de calcul des attributs .child et width des éléments? height

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

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

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

L'attribut

de l'élément est égal à l'attribut .child de l'élément parent. Par conséquent, la valeur de calcul de l'attribut width est 1600px. (En supposant que la taille de la police par défaut du navigateur est 16px, 100rem = 100 * 16px = 1600px) width width à l'intérieur de l'élément parent de ,

Les attributs rempliront tout l'espace. Si l'élément parent a plusieurs éléments, l'espace leur sera alloué en moyenne. Par conséquent, la valeur de calcul de l'attribut

de l'élément display: grid est 20rem / 2 = 10rem, c'est-à-dire 10 * 16 = 160px. height .child La distance de bordure de l'élément dépassera l'élément parent dans tous les cas. Correct ou mal? height

.child Erreur.

, ,

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

et

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

Les distances sub-marginales ne dépasseront pas l'élément parent.

display: flex La frontière est-elle pliée dans les éléments de display: inline-flex et display: grid est-il efficace? display: inline-grid

Non, invalide. À l'intérieur des éléments de

, , display: inline-flex et display: inline-grid, la distance de bordure sera accumulée.

La position des éléments pseudo est horizontale et verticale. Correct ou mal? display: flex display: inline-flex display: grid correct. Le navigateur allouera tout l'espace entre le sous-élément et l'élément parent. display: inline-grid

Quelle est la valeur de calcul de l'attribut?

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

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

La valeur initiale de

est

. Par conséquent,

la valeur de calcul min-width de l'élément est

.

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

Cependant, si

, min-width, auto, .child ou min-width, les valeurs sont définies pour les éléments, alors la valeur de calcul auto de son sous-élévation est 0.

Comment utilisons-nous les attributs pour remplacer block les attributs? inline inline-block table Nous devons définir les attributs table-* pour l'élément . min-width

La valeur de calcul de l'attribut est

. Correct ou mal? gap margin

correct. Si ou

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

la valeur est définie, le navigateur convertira toute la valeur

de l'attribut .parent à gap valeur alternative.

Pourquoi la valeur de calcul des attributs display de l'élément est-il? block

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

Les éléments avec ou absolute seront supprimés du flux de document normal. Par conséquent, l'élément parent ne peut pas le voir. C'est pourquoi la valeur de calcul de l'attribut est 0. fixed

Dans l'exemple suivant, quel est le rôle des attributs isolation?

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

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

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

Nous devons nous rappeler que lorsque l'attribut z-index est utilisé, ce que le navigateur utilise.

Par défaut, le contexte d'empilement de racines est un élément html. C'est pourquoi l'élément pseudo est derrière l'élément isolation: isolate sans . .parent

Nous avons utilisé des attributs pour créer un nouveau contexte de pile pour les éléments

. Par conséquent, l'élément pseudo s'affiche derrière le texte, mais devant l'élément isolation. .child .parent Quelle est l'emplacement de l'élément pseudo?

Tout d'abord, car

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

, les pseudo-éléments sont affichés au centre.

place-items: center Après l'application et

, il se déplace le long de l'axe y vers la bordure inférieure de l'élément parent, car la priorité de

, position: absolute, bottom: 0 et top attribue est supérieur à la propriété right. bottom left Quelle est la valeur de calcul de l'attribut? place-items

La priorité des attributs est supérieure aux attributs width, mais ses valeurs doivent également être dans la plage des attributs

et

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

. La réponse est donc de 225px.

flex-basis Quelle est la valeur de calcul de l'attribut? width min-width max-width Lorsque vous utilisez des attributs personnalisés CSS, nous devons définir toutes les pièces abrégées. Si nous ne faisons pas cela, le navigateur ne peut pas être utilisé.

Cela s'est produit dans notre exemple. padding L'abréviation nécessite 4 valeurs, mais seuls 3 développeurs sont définis. Le navigateur ne peut pas être configuré. Par conséquent, la valeur de calcul est de 0.

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

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

Pourquoi la valeur de calcul de l'attribut

de l'élément ?

padding Les attributs personnalisés CSS seront à partir des mêmes valeurs d'héritage d'attribut personnalisées définies par les éléments parents. Si l'attribut personnalisé est omis, le navigateur utilisera la valeur de retour.

Dans notre exemple, l'attribut p est omis des éléments parents. Par conséquent, le navigateur utilise la valeur de remboursement, c'est-à-dire le mot-clé background-color, le mot-clé de l'attribut

de l'élément

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

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

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

a hérité de la valeur verte.

Cette sortie révocée maintient le format d'image d'origine et évite des modifications importantes de la signification tout en reproduisant le texte pour l'amélioration de la LITY et le flux.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!