Questions d'entrevue CSS (notes)

MIAOU! 2021-09-15 06:44:08
questions 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://qdmana.com/2021/09/20210914170046024A.html

  1. Non-ASCII character ‘\xe5‘ in file kf1.py on line 4, but no encoding declared; see http://python.or
  2. 手把手教你搭建微信小程序服务器(HTTPS)
  3. sqli-labs-less-18 http头user agent+报错注入
  4. Génération de code nest pour l'outil CLI de nestjs
  5. JS | This
  6. Augmentation des variables
  7. The sinking gs8 raises its flag again. GAC motor's sales are falling endlessly. Is it the car or the people?
  8. Ren Hao's lunch at work today is president Hao wearing a sleeveless coat! Clean and handsome!
  9. Summary of basic knowledge points of JavaScript language (mind map)
  10. The new front-end lady asked: there was a 404 problem refreshing the page in Vue routing history mode
  11. Sqli Labs - less - 18 http header user agent + Error Reporting Injection
  12. Vous apprendrez à construire un serveur d'applet Wechat (https) à la main
  13. Non - ASCII character 'xe5' in file kf1.py on Line 4, but no Encoding declared;Voirhttp://python.or
  14. The new front-end lady asked: there was a 404 problem refreshing the page in Vue routing history mode
  15. En tant que programmeur, quelle est la plus grande tristesse que vous ressentez? L'entrevue d'emploi Java de 2021 dans une grande usine vous demandera:
  16. En tant que programmeur, je n'oublie pas le dernier résumé de mon expérience d'entrevue de stage en Java.
  17. Experts suggested that performers work with certificates, which triggered a collective heated debate. It is meaningless to be accused of repeating the mistakes
  18. The new front-end lady asked: there was a 404 problem refreshing the page in Vue routing history mode
  19. The appearance value of 200000 "Odyssey" is less than 100000, and has become the "sales champion" of household MPV
  20. Les programmeurs Java qui sont entrés dans l'entreprise pendant trois mois ont dû faire face à une correction d'échelle, et les octets ont sauté dans le traitement des questions d'entrevue de JD 360 Netease.
  21. 350 questions d'entrevue Android partage, technologie d'architecture de cache
  22. The space is not vulgar, the configuration is rich, the leather is durable, less worry, and the high configuration is less than 100000!
  23. Vous permet de passer rapidement à travers l'entrevue de saut d'octets et d'aller de l'avant
  24. Résumé des questions d'entrevue technique d'Alibaba Baidu et d'autres grandes usines à la fin de l'année, et analyse de la dernière vraie question d'entrevue Android en 2021
  25. Avec cet ensemble de questions d'entrevue Java, l'ensemble de questions de base d'entrevue de bat,
  26. Avec cet ensemble de questions d'entrevue Java, les notes avancées Java de niveau divin sont systématisées,
  27. Opérateurs arithmétiques et opérateurs de comparaison pour JavaScript, Introduction classique au développement web
  28. Explorer le cadre open source Android - 1. Okhttp Source Analysis
  29. Module management of "free and open source" front-end spa project crudapi background management system based on Vue and Quasar (14)
  30. Partager l'expérience de l'examen et du développement de l'arrière - plan, en s'appuyant sur les questions d'entrevue et les réponses,
  31. Site Web pour partager vos expériences d'entrevue, Tencent Bull vous apprend à écrire votre propre cadre Java!
  32. Notes d'étape Android structurées, sélection de vrais problèmes d'entrevue Android
  33. Dictionnaire distribué: communication de cache limitée par le courant, sujets d'entrevue pour certaines questions courantes dans le développement Java,
  34. Tianci girlfriend Tangyuan attended the event for the second time. Her appearance was comparable to that of a star. The audience shouted that Tianci was blessed!
  35. Introduction au JavaScript chapitre 15 (objets, clairvoyance)
  36. La dernière revue scientifique de l'académicien Luo Liqun: architecture de la boucle neuronale pour stimuler la nouvelle Ia
  37. Basic knowledge of components in Vue "I"
  38. J'a i appris quelques petites choses sur l'entrevue et j'ai acheté un tutoriel en 19998.
  39. Dix minutes pour vous faire passer en revue les points de connaissance que Spring demande souvent, le chemin du retour Jedi d'un programmeur âgé de 35 ans,
  40. Want to know the implementation and application of single instance mode in the front end?
  41. Progressive react source code analysis - Implementation of ref API
  42. Webpack5 learning -- code compression
  43. Front and back end data interaction (V) -- what is Axios?
  44. Knowledge points related to react routing
  45. On demand introduction of react antd + customized theme
  46. GPG management submission signature verification
  47. [babylonjs] babylonjs practice (XII) -- drawing lane lines
  48. After brushing the 12 sliding windows, you can tear the front end by hand
  49. Vue fruit bookkeeping - money.vue component
  50. Propriétés et méthodes des objets Array en javascript!,Pseudo - classes et pseudo - éléments pour CSS
  51. JS contains the function code
  52. Typescript record (I)
  53. Take you to learn more about nginx basic login authentication: generating passwords using OpenSSL
  54. Is componentization obsolete? Introduction to micro front end architecture
  55. Leetcode day 18
  56. Simple code to achieve a, 1W + people see the Mid Autumn Festival blessing
  57. Design pattern -- agent pattern
  58. Vs Code theme recommendation in 2021
  59. Mon expérience réelle dans l'externalisation Android à Huawei, préparation de l'entrevue de développement Android
  60. J'ai les questions et les réponses d'entrevue de développement d'octets de rêve et Tencent double offer, Android