Questions d'entretien courantes CSS

Introduction CSS
Style en ligne, 2. Style interne. Tableau 3. Feuille de style externe

lien @import
a. Le lien est une balise HTML, et @import est fourni par CSS, et ne peut charger que CSS

b. est chargé, le lien sera chargé en même temps, et le CSS référencé par @import attendra que la page soit chargée avant de charger

c l'importation ne peut être reconnue que par IE5 ou supérieur, et le lien est. une balise HTML, il n'y a pas de problème de compatibilité

d. Le poids de la méthode link est supérieur au poids de @import

e Lors de l'utilisation de Javascript pour contrôler le DOM pour changer le style. , vous ne pouvez utiliser que la méthode link, car @import ne voit que CSS. Ce n'est pas DOM et peut contrôler le

Sélecteur de base CSS :
1. -sélecteur de nom de classe).
3. Sélecteur d'ID quatre#
4. Sélecteur de caractères génériques*

Recommandation de sujet : Résumé des questions d'entretien CSS 2020 ( dernier)

Sélecteur composé CSS :

Sélecteur descendant E>F
Sélecteur d'élément enfant
Sélecteur d'intersection
Sélecteur d'union,
Pseudo-classe de lien selector lvha
Un simple deux-points (:) est utilisé pour les pseudo-classes CSS3 et un double deux-points (::) est utilisé pour les pseudo-éléments CSS3

<ul> 
<p>111</p> 
<span>222</span> 
<li>1</li> 
<li>2</li> 
<li>3</li> 
</ul>

li:nth-of-type(2) : représente le deuxième élément li sous ul

li:nth-child(2) : indique qu'il s'agit à la fois d'un élément li et du deuxième élément sous ul (introuvable).
Il est recommandé d'utiliser généralement le nième de type, ce qui est moins susceptible de causer des problèmes.
Trois fonctionnalités majeures du CSS : cascade CSS, héritage CSS, priorité CSS
Parlez de votre compréhension de la mise en page CSS

Modèle de boîte

Ouvrir la voie au flottement :

1. Méthode de balise supplémentaire,

<p style="clear:both"></p>

2. Méthode d'ajout d'un attribut de débordement au parent

3 Utiliser après le pseudo-élément pour effacer les flotteurs

.clearfix:after {  content: ""; display: block; height: 0; clear: both; visibility: hidden;  }   .clearfix {*zoom: 1;}   /* IE6、7 专有 */。

4. effacer les flotteurs

Mode de positionnement et décalage des bords :

Afficher et masquer les éléments :

affichage:aucun;
débordement:caché

Curseur de style souris

par défaut Xiaobai Par défaut, pointeur, déplacement, texte, non autorisé interdit
alignement vertical

affichage des points de suspension du texte en débordement

1.espace blanc:nowrap force le texte à être sur une seule ligne Affiché sur
2.overflow : caché caché au-delà de la partie
3.text-overflow : les points de suspension affiche une marque d'omission lorsque le texte dans l'objet déborde

Méthodes de mise en page courantes :

Mise en page fixe,
Disposition de flux (%),
disposition flexible (flex),
disposition rem
disposition flottante, flotteur clair
disposition de positionnement,
marge et remplissage

blocs Niveau l'élément est centré verticalement

Comment centrer un p vers le haut, le bas, la gauche et la droite
1.
left:50%; top:50%
transform: translation(-50%,-50%)
2 .
left:0; top: 0; bottom: 0; right: 0; margin: auto
3.px
Trois fonctionnalités majeures de CSS : priorité d'héritage en cascade
Attributs hérités
Lié au texte : font-family, font-size, font-style, font-variant, font-weight, font, letter-spacing, line-height, color

Liste associée : list-style- image, list-style-position, list-style-type, list-style

Nouvelle fonctionnalité CSS3

implémente des coins arrondis (border-radius), une ombre (box-shadow) et des effets spéciaux sur le texte (text- shadow), gradient linéaire (gradient), transformation (transform)

ajoute plus de sélecteurs CSS multi-arrière-plan rgba, le seul pseudo-élément introduit dans CSS3 est ::selection, media query, multi-column mise en page

Introduction CSS

1. Style en ligne, 2. Feuille de style interne, 3. Feuille de style externe

link @import

a. le lien est une balise HTML, et @import est fourni par CSS, et ne peut charger que CSS

b. Lorsque la page est chargée, le lien sera chargé en même temps. time, et les références @import Le CSS attendra que la page soit chargée avant de charger

c l'importation ne peut être reconnue que dans IE5 ou supérieur, et le lien est une balise HTML, il n'y a donc pas de problème de compatibilité

d. Le style de lien a un poids élevé. Le poids de @import

e Lorsque vous utilisez Javascript pour contrôler le DOM afin de modifier le style, vous ne pouvez utiliser que la méthode de lien, car @import uniquement. voit CSS, pas le DOM qui peut contrôler

Sélecteur de base du CSS :

1. Élément de sélection de balise

2 Sélecteur de classe (sélecteur de nom multi-classe
3. #
4. Sélecteur de caractères génériques*

Sélecteur composé CSS :
Sélecteur descendant E>F
Sélecteur d'élément enfant
Sélecteur d'intersection
Sélecteur d'union,
Sélecteur de pseudo-classe de lien lvha
Un seul deux-points (:) est utilisé pour les pseudo-classes CSS3, et le double deux-points (::) est utilisé pour les pseudo-éléments CSS3

<ul> 
<p>111</p> 
<span>222</span> 
<li>1</li> 
<li>2</li> 
<li>3</li> 
</ul>

li:nth-of-type(2) : représente le deuxième élément li sous ul
li :nth-child(2) : indique qu'il s'agit à la fois d'un élément li et du deuxième élément sous ul (introuvable).
Il est recommandé d'utiliser généralement le nième de type, ce qui est moins susceptible de causer des problèmes.
Trois fonctionnalités majeures du CSS : cascade CSS, héritage CSS, priorité CSS
Parlez de votre compréhension de la mise en page CSS

Modèle de boîte

Ouvrir la voie au flottement :
1. Méthode de balise supplémentaire,

<p style="clear:both"></p>

2. Méthode d'ajout d'un attribut de débordement au parent
3 Utiliser après le pseudo-élément pour effacer les flotteurs

.clearfix:after {  content: ""; display: block; height: 0; clear: both; visibility: hidden;  }   .clearfix {*zoom: 1;}   /* IE6、7 专有 */。

4. effacer les flotteurs

Mode de positionnement et décalage des bords :

Afficher et masquer les éléments :
affichage:aucun;
débordement:caché

Curseur de style souris
par défaut Xiaobai Par défaut, pointeur, déplacement, texte, non autorisé interdit
alignement vertical

affichage des points de suspension du texte en débordement
1.espace blanc: nowrap force le texte à être sur une seule ligne Affiché sur
2.overflow : caché caché au-delà de la partie
3.text-overflow : les points de suspension affiche une marque d'omission lorsque le texte dans l'objet déborde

Méthodes de mise en page courantes :
Mise en page fixe,
Disposition Flow (%),
disposition flexible (flex),
disposition rem
disposition flottante, float clair
disposition de positionnement,
marge et remplissage

blocs L'élément de niveau est centré verticalement
Comment centrer un p vers le haut, le bas, la gauche et la droite
1.
left:50%; top:50%
transform: translation(-50%,-50% )
2 .
left:0; top: 0; bottom: 0; right: 0; margin: auto
3.px
Trois fonctionnalités majeures de CSS : priorité d'héritage en cascade
Héritable attributs
Texte associé : font-family, font-size, font-style, font-variant, font-weight, font, letter-spacing, line-height, color

Liste associée : list-style -image, list-style-position, list-style-type, list-style

Nouvelle fonctionnalité CSS3
implémente des coins arrondis (border-radius), une ombre (box-shadow) et des effets spéciaux sur texte (text- shadow), dégradé linéaire (gradient), transformation (transform)

ajoute plus de sélecteurs CSS multi-arrière-plan rgba, le seul pseudo-élément introduit dans CSS3 est ::selection, media query, multi- disposition des colonnes

Tutoriels associés recommandés : Tutoriel vidéo CSS

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!