[À lire absolument pour la recherche d'emploi front-end] Questions et réponses sélectionnées pour les entretiens de développement front-end_CSS-Questions et réponses sur le réseau chinois PHP

CSS

Présenter le modèle de boîte CSS ?

(1) Il existe deux types, le modèle de boîte IE et le modèle de boîte standard W3C ; la partie contenu d'IE comprend la bordure et le remplissage

(2) Le modèle de boîte : contenu, remplissage, marge, bordure.

Que sont-ils ? les sélecteurs CSS ? Quelles propriétés peuvent être héritées ? Comment est calculé l’algorithme de priorité ? Quelles sont les nouvelles pseudo-classes en CSS3 ?

* 1. Sélecteur d'identifiant (# myid)
2. Sélecteur de classe (.myclassname)
3. Sélecteur de balise (div, h1, p)
4. Sélecteur adjacent (h1 + p)
5. Sélecteur d'enfant (ul < ; li)
6. Sélecteur descendant (li a)
7. Sélecteur générique (*)
8. Sélecteur d'attribut (a[rel = "external"])
9. Conteneur de sélection de pseudo-classe (a: hover, li: nième - enfant)

* Styles hérités : taille de police, couleur de la famille de polices, UL LI DL DD DT ;

* Styles non héritables : marge de remplissage de bordure, largeur, hauteur ;

* Principe de priorité, la définition de style la plus proche prévaudra sous le même poids

* Le style de chargement doit être soumis au dernier positionnement chargé

La priorité est :

!important > class > ; Nouvel exemple de pseudo-classe CSS3 :

p:first-of-type sélectionne chaque élément qui appartient au premier élément 
p:last-of-type sélectionne chaque élément qui est le dernier élément 
p:only-of-type sélectionne chaque élément qui est le seul élément

p:only-child Sélectionne chaque élément qui est le seul élément enfant de son élément parent.

p:nth-child(2) Sélectionne chaque élément qui est le deuxième enfant de son élément parent.

:enabled :disabled contrôle l'état désactivé du contrôle de formulaire.

: coché Le bouton radio ou la case à cocher est coché.

Comment centrer un div ? Comment centrer un élément flottant ?

Définissez une largeur au div, puis ajoutez l'attribut margin:0 auto

div{

width:200px;

margin:0 auto;

}

Centrez un élément flottant

Déterminez le calque avec une largeur de 500 et une hauteur de 300 du conteneur
Définissez la marge extérieure du calque

.div {
Largeur:500px; hauteur:300px;//La hauteur peut être omise
Marge: -150px 0 0 - 250px;
position :relative; Positionnement relatif
background-color:pink;//Facile à voir l'effet
gauche:50%;
haut:50%;
}

Répertoriez les valeurs d'affichage et expliquez leur les fonctions. Quelle est la valeur de la position, de l'origine du positionnement relatif et absolu ?

1.
le bloc s'affiche comme un élément de type bloc.
aucune valeur par défaut. Apparaît comme un type d'élément en ligne.
inline-block est affiché comme un élément en ligne, mais son contenu est affiché comme un élément de type bloc.
l'élément de liste est affiché comme un élément de type bloc et ajoute un balisage de liste de style.

2.
*absolu
Génère un élément positionné de manière absolue, positionné par rapport au premier élément parent autre que le positionnement statique.

*corrigé (l'ancien IE ne prend pas en charge)
Génère des éléments absolument positionnés, positionnés par rapport à la fenêtre du navigateur.

*relatif
Génère un élément relativement positionné, positionné par rapport à sa position normale.

* Valeur statique par défaut. Sans positionnement, les éléments apparaissent dans un flux normal
* (déclarations z-index haut, bas, gauche, droite ignorées).

* hériter spécifie d'hériter de la valeur de l'attribut position de l'élément parent.

Quelles sont les nouvelles fonctionnalités de CSS3 ?

CSS3 implémente les coins arrondis (border-radius:8px), l'ombre (box-shadow:10px),
Ajouter des effets spéciaux au texte (text-shadow,), le dégradé linéaire (gradient), la rotation (transform)
transform:rotate ( 9deg) scale(0.85,0.90) translation(0px,-30px) skew(-9deg,0deg);//Rotation, mise à l'échelle, positionnement, inclinaison
Ajout de plus de sélecteurs CSS RVB multi-arrière-plan

Un guide complet concevoir la disposition des mots à l'écran ?

Quelles sont les compatibilités des CSS fréquemment rencontrés ? Cause et solution ?

Pourquoi initialiser les styles CSS.

- En raison de problèmes de compatibilité des navigateurs, différents navigateurs ont des valeurs par défaut différentes pour certaines balises. Si CSS n'est pas initialisé, des différences d'affichage des pages entre les navigateurs se produiront souvent.

- Bien sûr, le style d'initialisation aura un certain impact sur le référencement, mais vous ne pouvez pas avoir le gâteau et le manger aussi, mais essayez de l'initialiser avec le moins d'impact possible.

*La méthode d'initialisation la plus simple est : * {padding : 0 ; margin : 0;} (non recommandé)

Initialisation de style Taobao :
body, h1, h2, h3, h4, h5, h6, hr, p , blockquote , dl, dt, dd, ul, ol, li, pre, form, fieldset, légende, bouton, input, textarea, th, td { margin:0 }
body, bouton, input, select , textarea; { font:12px/1.5tahoma, arial, 5b8b4f53; }
h1, h2, h3, h4, h5, h6{ font-size:100% }
address, cite, dfn, em, var { font-style :normal ; }
code, kbd, pre, samp { font-family:couriernew, courier, monospace; }
small{ font-size:12px }
ul, ol { list-style:none; :aucun; }
a:hover { text-decoration:underline }
sup { vertical-align:text-top }
sub{ vertical-align:text-bottom; fieldset, img { border:0; }
button, input, select, textarea { font-size:100%; }
table { border-collapse:border-spacing:0 }

absolute Comment est le méthode de calcul du bloc de confinement différente de celle du débit normal ?

Que se passera-t-il lorsque les caractéristiques de position, d'affichage, de réduction de marge, de débordement et de flottement se superposeront ?

Compréhension des spécifications BFC ?

(Un concept de la spécification W3C CSS 2.1 qui détermine la façon dont un élément positionne son contenu, ainsi que sa relation et son interaction avec d'autres éléments.)

Poids défini par CSS

Voici les règles de poids : Tags Le poids est de 1, le poids de la classe est de 10 et le poids de l'identifiant est de 100. Les exemples suivants démontrent les valeurs de poids de diverses définitions :

/*Le poids est de 1*/

div{
}
/ *Le poids est de 10*/
.class1{
}
/*Le poids est de 100*/
#id1{
}
/*Le poids est de 100+1=101*/
#id1 div{
}
/ *Le poids est de 10+1=11* /
.class1 div{
}
/*Le poids est de 10+10+1=21*/
.class1 .class2 div{
}

Si les poids sont les mêmes , le dernier style défini fonctionnera, mais cela doit être évité Cette situation se présente

Expliquez float et son principe de fonctionnement ? Conseils pour effacer les flottants