编程知识 cdmana.com

Questions d'entrevue CSS (notes)

cssPoints saillants de l'entrevue(Ses propres notes en ligne)

1、Quelles sont les façons dont les styles sont introduits?

  1. Styles internes:InheadÀ l'intérieur.styleStyles d'écriture dans les étiquettes

  2. Styles externes

    <link rel="stylesheet" type="text/css href="Chemin">
    
    <style>
    	@import url(Chemin);
    </style>
    Copier le Code
  3. Styles en ligne:

    <div class="box"style="ccolor:red"> 11 </div> Copier le Code

2、W3CQue contient le modèle de boîte standard

​ 4Sections

​ Zone de contenu content ;

​ Marge intérieure padding;

​ Bordure border;

​ Marge extérieure margin;

3、Comment?cssBordure dessiner la flèche vers le bas

​ Idées:Écris d'abord une étiquette, Écrivez une bordure dans quatre directions,Donne la couleur en haut,Les trois autres bordures directionnelles donnent une couleur transparente,La largeur finale et la hauteur sont0;

4、Qu'est - ce quecssStyle cascade?(cssQuestion de poids)

Pour le style de l'étiquette,Beaucoup de fois,Nous ajouterons plusieurs styles à l'étiquette,Parfois, il hérite,Parfois, le style l'emporte,Il y a donc un problème de poids entre les styles.

!important > Styles en ligne1000 > id Sélecteur100 > classSélecteur10 > Sélecteur d'étiquettes1

5、Comment réaliser l'effet d'une seule ligne de texte au - delà de l'ellipse d'affichage?

  1. Ajouter de la largeur à l'élément width;
  2. Afficher le texte sur une ligne white-space:nowrape;
  3. Masquer le dépassement overflow:hidden;
  4. Ajouter des ellipses text-overflow:ellipsis;

6、Qu'est - ce queCSSL'héritage de?Veuillez écrire les attributs qui peuvent être hérités,Au moins10- Oui..

​ Ajout d'un style à un élément parent ou ancestral,Les descendants auront le style correspondant,C'est l'héritage..

​ color font-size line-height text-align font-style font-family font-weight text-decoration

​ letter-spacing

7、Quels types d'éléments sont classés?Quelles sont les caractéristiques de chaque?

  1. Élément de bloc

    ​ Caractéristiques: Disposition verticale ,Monopoliser une ligne ou une zone;

    ​ Peut ajouter une largeur et une hauteur ,AjoutermarginEtpadding Ça marche en haut, en bas, à gauche et à droite. ;

    ​ Généralement utilisé comme parent d'autres éléments.

  2. Éléments en ligne(Éléments en ligne)

    ​ Caractéristiques: À côté. , Espacement par défaut ;

    ​ Ajouter une largeur et une hauteur invalides ,marginEtpadding Seulement à gauche et à droite. , Haut et bas inopérants

  3. Élément de bloc en ligne

    ​ Caractéristiques:C'est la synthèse des caractéristiques de l'élément bloc et de l'élément kangne

    ​ Avec une propriété privée vertical-align:top、middle、bottom;

  4. Élément variable

    ​ Caractéristiques: Selon certains css Caractéristiques des attributs ,Vous pouvez changer le type d'élément,Par exemple,: Ajouté à l'élément float,Les éléments deviennent des éléments de bloc

8、L'image descend de trois pixelsbugComment??

1.  Ajouter à l'image display:block:
2.  Ajouter à l'image elle - même vertical-align:top、middle、bottom;
3. Ajouter à l'image ou à l'élément parent de l'imagefloat;
4.  Pour l'élément parent ou bodyAjouterfont-size:0;
Copier le Code

9、Comment réaliser l'effet de centrage horizontal et vertical d'un élément de bloc de ligne de taille inconnue?

​ Idées:

1.  Ajouter aux taches extérieures text-align:center;Centrer horizontalement les éléments de la ligne;
2. Ajouter à la grande boîte extérieureline-height,Et ajoutez l'élément bloc à l'intérieur de la ligne lui - mêmevertical-align: center;Centrer verticalement les éléments du bloc intérieur de la ligne
Copier le Code

10、Quelles sont les façons dont les éléments disparaissent et apparaissent??

1. display:none:Etdisplay:block; Faire disparaître complètement l'élément , Ne se combinent généralement pas transition Faire la transition ;
2. opacity:0;Etopacity:1; Masquer les éléments ,Généralement combinétransition Faire la transition ;
3. visibility:hidden;Etvisibility;visible; Masquer les éléments ,Il est généralement utilisé pour une utilisation compatible à partir de;
4. height:0;overflow:hidden;Etheight:100px;overflow:auto;Union généralehoverFaites glisser la souris.
Copier le Code

11、Quelles sont les valeurs des attributs positionnés?Quelles sont les caractéristiques de chaque?

1. Positionnement absolu position:absolute;

​ Caractéristiques:

  1. Flux de documents Hors flux de documents, Pas de place

  2. Références

    Par défaut,Voir le premier écran du Navigateur pour le déplacement de position

    Référence avec paramètres de positionnement ( Mieux vaut être relatif )L'élément parent est déplacé

  3. Hiérarchie z-index Plus la valeur est élevée, L'élément est en haut

2.Positionnement relatif position:relative;

Caractéristiques:

1. Flux de documents	 Ne pas quitter le flux de documents , Occupe - toi. 
2. Références     Se déplacer par rapport à sa position d'origine
3. Hiérarchie   z-index Plus la valeur est élevée , L'élément est en haut 
Copier le Code

3.Position fixe position:fixed;

Caractéristiques:

1. Flux de documents	 Ne pas quitter le flux de documents , Occupe - toi. 
2. Références     Voir toute la fenêtre du navigateur
3. Hiérarchie   z-index Plus la valeur est élevée , L'élément est en haut 
Copier le Code

4.Positionnement visqueux position:sticky; Principalement pour l'effet de plafond

Caractéristiques:

1. Flux de documents	 Ne pas quitter le flux de documents , Occupe - toi. 
2. Références     Voir toute la fenêtre du navigateur
3. Hiérarchie   z-index Plus la valeur est élevée , L'élément est en haut 
Copier le Code

5.Par défaut position:static;

12、Une petite boîte avec une largeur et une hauteur fixes est centrée horizontalement et verticalement à l'intérieur d'une grande boîte avec une largeur et une hauteur fixes, Plusieurs méthodes de mise en œuvre

  1. Puremargin + overflow:hidden;
  2. Purepadding + box-sizing:boder-box;
  3. Positionnement pur
  4. display:inline-block:+ text-align:center; + line-height + vertical-align:middle;
  5. Positionnement left:50%;top:50% + margin Valeur négative .
  6. Positionnement left:0 ; top:0; right:0; bottom:0;+ margin: auto;
  7. Positionnement;left:50%;top:50%;transform;translate(-50%,-50%)
  8. Boîte élastique: display:flex;+ justify-content; center;+ align-items:center;

13、Comment résoudre le problème de l'effondrement en hauteur?

​ Effondrement en hauteur : Ajout de sous - éléments float,Si l'élément parent ou l'ancêtre ne donne pas de hauteur,L'élément parent apparaît et dit0Situation.

  1. Ajouter à l'élément parent height;Uniquement pour les aménagements très fixes,Comme la navigation.;

  2. Ajouter à l'élément parent overflow:hidden / auto / scroll;Essayez de ne pas utiliser lorsque vous rencontrez un emplacement

  3. Ajouter un élément de bloc vide sous l'élément flottant,Et ajouter à cet élément rapide videclear:both;Cette méthode peut entraîner une redondance du Code;

  4. Méthode universelle de nettoyage . Prendre un nom de classe commun ,Il suffit d'ajouter ce nom de classe commun à l'élément parent de l'élément flottant;

    .clear:after{
        content:"";
        display:block;
        clear:both;
        height:0;
        overflow:hidden;
        visibility:hidden;
    }
    .clear {
    	zoom:1;
    }
    Copier le Code
  5. Ajouter à l'élément parent float:Cela crée de nouveaux problèmes flottants,Non recommandé,Comprendre;

  6. Ajouter à l'élémentdisplay:table; Peut causer l'inconnu bug,Non recommandé,Comprendre.

14、margin-topDebugComment??

bugLa production de, Ajouter à un élément enfant margin-topAprès,Provoque un déplacement global vers le bas de l'élément parent;

  1. Ajouter à l'élément parent overflow:hidden;
  2. Ajouter à l'élément parent border-top:1px solid transparent;
  3. Ajouter à l'élément parent ou à l'élément enfant lui - mêmefloat;
  4. ModifiermarginPourpadding;

15、Quels sont les cinq principaux navigateurs qui correspondent au noyau?

IENavigateur trident

Firefox Explorer Gecko

Pommes、Google explorer webkit

Navigateur europen Noyau antérieur presto Noyau actuel blink

16、opacityQu'est - ce que c'est??À quoi ressemble son écriture compatible?

17、Qu'est - ce queBFC?BFC Quelles sont les conditions de déclenchement pour ?

BFC La traduction littérale signifie "Contexte de formatage au niveau du bloc",Il peut être interprété comme une zone de rendu séparée dans la page,Les éléments de cette zone ont leurs propres règles d'arrangement,N'affecte pas les éléments extérieurs,Et tous les éléments ne peuvent pas êtreBFC Éléments de la zone ,Certaines conditions doivent être remplies avant que.

BFCConditions de déclenchement:

  1. htmlEn soi
  2. Ajouter un flotteur à un élément float
  3. Ajout d'un ancrage à l'élément position
  4. Ajouté à l'élément display : inline-block / table-cell/ table-caption / flex / inline-flex;
  5. Ajouté à l'élément overflow:hidden / auto / scroll;

18、BFCQuelles sont les caractéristiques?Quels sont les avantages de ces fonctionnalités pour la page?

  1. bfcLes boîtes en haut et en bas de la zone, si elles sont toutes donnéesmarginValeur,Ça va arrivermargin Chevauchement régional .

    margin Problèmes de chevauchement :Ajouter un élément parent à n'importe quelle boîte, Activer l'élément parent bfcC'est tout.

    1. bfc Région non associée float Les boîtes se chevauchent ,Il en résulte une disposition en deux colonnes.

    2. Résoudre le problème de l'effondrement en hauteur.

19、Qu'est - ce que la disposition à deux colonnes? Quelles sont les options de mise en œuvre? ?

Disposition à deux colonnes: La boîte gauche donne une largeur fixe ,Adaptation de la largeur de la boîte droite.

Programme de mise en œuvre:

  1. UtilisationBFCCaractéristiques,La boîte de gauche donne une largeur fixe etfloat, La boîte de droite n'est pas large ,Voilà.overflow:hidden;
  2. UtilisationfloatCaractéristiques:La boîte de gauche donne une largeur fixe etfloat, La boîte de droite n'est pas large ,Voilà.margin-left
  3. Utiliser les caractéristiques de la boîte élastique,Ajouter un élément parent aux deux boîtes, Ajouter à l'élément parent display:flex; Ajouter à la boîte de droite flex:1
  4. Utilisationcalc()Caractéristiques de la fonction,La boîte de gauche donne beaucoup à boirefloat, Boîte de droite (calc(100% - À gauche.width))Etfloat;

20、Qu'est - ce qu'un modèle de boîte bizarre?Comment la boîte bizarre est - elle née?Quelles sont les caractéristiques?? C'est bizarre. ?

Parce queDOCTYPE Déclaration du document manquante ,InIE6Et les versions suivantes du navigateur déclencheront le mode bizarre,Ce qui caractérise ce schéma bizarre, c'est que,Ajouter à l'élémentpaddingOuborderQuand ça en vaut la peine., Les éléments ne sont pas agrandis ,Plus tard, j'ai utilisé cette fonctionnalité pour mettre en page,Et donc,css3 Ajout d'une propriété ,Oui.w3cLe modèle de boîte standard devient un modèle de boîte bizarre box-sizing:border-box;

21、H5Quelles sont les caractéristiques?? Écris, s'il te plaît. H5 Nouvelle étiquette ajoutée .

H5Caractéristiques: Grammaire lâche 、Code simple、 Sémantique des étiquettes 、 Multiplateforme Multi - appareils 、 Pages Web réactives, etc.

header、section、footer、nav、aside、article、video、audio、datalist、canvasAttendez.

22、Qu'est - ce que la technologie d'intégration d'images?Quels sont les avantages??

​ La technologie d'intégration d'images consiste à intégrer de nombreuses petites images d'une page dans une grande image,Et utiliserbackground-positionRéalisation technique.

​ Avantages:1.Peut augmenter la vitesse de chargement du site;2.Réduire le volume de l'image

23、 Que voulez - vous? cssSélecteur?

Type de base(class、id、 Sélecteur de groupe, etc. )、Sélecteur de propriétés、Sélecteur de pseudo - classe( Pseudoclasse dynamique 、UIPseudo - classe d'état de l'élément、Pseudo - classe structurellechildType ettypeType, etc)、Sélecteur de hiérarchie(Contient le sélecteur、 Sélecteur d'enfants, etc. ).

24、css3Quelles sont les caractéristiques et les avantages des propriétés?S'il vous plaît, dites - le.8- Oui.css3Propriétés.

Caractéristiques et avantages :1. Avec écriture compatible ;2.Peut rendre la page plus cool;3.Possibilité d'augmenter le nombre de visites sur le site,Pour améliorer le classement du site;

text-shadow/box-shadow/word-break:break-all/word-wrap:break-word/background-size/border-radius/border-image/transition/animation/transformAttendez.

25.transitionEtanimationQuels sont les points communs et les différences?

​ Points communs:1.Tous.css3Propriétés, Utilisé pour l'animation ;2.Sont des attributs qui changent avec le temps

​ La différence:

​ 1. transitionIl doit y avoir un déclencheur d'événement pour être efficace,Etanimation Déclencheur d'événement non requis ;

​ 2. transitionUn changement d'état ne peut être réalisé que d'un état à l'autre;EtanimationDe nombreux changements d'état peuvent être réalisés

26.Excusez - moi.transform:translateX(100px) rotateZ(90deg);Ettransform:rotateZ(90deg) translateX(100px);Les résultats obtenus sont - ils les mêmes?Pourquoi?

C'est différent, Changement d'arbre ,Le premier est d'abord traduit à droite100px, Et autour ZRotation de l'arbre90deg, Ce dernier est le premier. ZRotation de l'arbre90deg,Parce que maintenant l'arbre a changé, Donc plus tard, translateX(100px)Est la traduction le long de l'axe modifié,Donc l'effet de l'exécution du premier et du second est différent.

27、Quelles sont les méthodes de mise en oeuvre de la disposition à trois colonnes?

Disposition à trois colonnes ; Largeur fixe gauche , Largeur fixe à droite , Adaptation intermédiaire .

Programme de mise en œuvre:

  1. UtilisationBFCCaractéristiques,La boîte de gauche est large et flottante,La boîte de droite est aussi large et flottante, La boîte centrale n'est pas large ,Voilà.overflow:hidden;(La boîte du milieu et la boîte de droite doivent être déplacées);

​ 2.UtilisationfloatCaractéristiques,La boîte de gauche est large et flottante,La boîte de droite est aussi large et flottante, La boîte centrale n'est pas large ,Voilà.margin-leftEtmargin-right;(La boîte du milieu et la boîte de droite doivent être déplacées);

​ 3. Utiliser le positionnement ,La boîte de gauche est large et positionnée,La boîte de droite est aussi large et positionnée, La boîte centrale n'est pas large ,Voilà.margin-leftEtmargin-right;( Pas besoin de changer de position )

​ 4. Utiliser une boîte élastique ,Ajouter un élément parent aux trois boîtes, Ajouter à l'élément parent display:flex;Ajouter à la boîte de largeur moyenne adaptativeflex:1;

​ 5.Utilisationcalc()Propriétés de la fonction,La boîte de gauche est large et flottante,La boîte de droite est aussi large et flottante, La boîte du milieu est large. (calc(100% - Largeur gauche - Largeur droite )) Et flottant .

28、Quelles valeurs peuvent être négatives?S'il vous plaît, dites - le.5- Oui..

  • margin
  • background-position
  • text-shdow
  • box-shadow
  • z-index

29、Quelle est la disposition de l'extrémité mobile?Quelles sont les options d'adaptation pour l'extrémité mobile?

Disposition flottante、 Disposition de la boîte élastique 、Positionnement de la disposition、Disposition du flux( Disposition en pourcentage )、 Disposition mixte (%,pxAttendez.)、 Mise à l'échelle proportionnelle (vw + remMise en page)Attendez.; Les options d'adaptation sont les suivantes: 2Espèce:1 C'est une adaptation Taobao. ,UtiliserjsAdaptation;2 C'est un adaptateur Netease. (vw + remMise en page)

版权声明
本文为[MIAOU!]所创,转载请带上原文链接,感谢
https://cdmana.com/2021/09/20210914170046024A.html

Scroll to Top