Résumé des questions d'entrevue HTML et CSS

Questions d'entretien HTML

Comment comprendre la sémantique HTML?

Faciliter la lecture (augmenter la lisibilité du code)
Rendre les moteurs de recherche plus faciles à lire (bon pour le référencement)

Par défaut, quelles balises HTML sont des éléments de niveau bloc et lesquels sont des éléments en ligne?

affichage: bloc / table; il y a div h1-h5 table ul ol p etc.
affichage: inline / inline-block; 有 ab em strong i span bouton d'entrée img 等

Questions d'entretien CSS

disposition

Calcul de la largeur du modèle de boîte:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    #div1 {
     
     
      width: 100px;
      padding: 10px;
      border: 1px solid #ccc;
      margin: 10px;
    }
  </style>
</head>
<body>
  <div id="div1"></div>
</body>
</html>

offsetWidth = (largeur du contenu + marge intérieure + marge), pas de bordure extérieure
Par conséquent, la réponse est 122px

Comment faire offsetWidth = 100px?
```
box-sizing: border-box;
```
Problème de chevauchement vertical de la marge:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			P {
     
     
				font-size: 16px;
				line-height: 1;
				margin-top: 10px;
				margin-bottom: 15px;
			}
		</style>
	</head>
	<body>
		<p>AAA</p>
		<p></p>
		<p></p>
		<p></p>
		<p>BBB</p>
	</body>
</html>

La marge supérieure et la marge inférieure des éléments adjacents se chevaucheront
Contenu vierge
Se chevaucheront également
La réponse est 15px

Problème de marge négative

Valeurs négatives de margin-top et margin-left, l'élément se déplace vers le haut et vers la gauche
Valeur négative de margin-right, l'élément de droite se déplace vers la gauche sans s'affecter
Marge en bas négative, l'élément inférieur se déplacera vers le haut sans se toucher

Qu'est-ce que BFC? Comment s'inscrire?

contexte de format noir, contexte de formatage au niveau du bloc
Une zone de rendu indépendante, le rendu des éléments internes n'affectera pas les éléments en dehors de la limite
Conditions communes pour la formation de BFC
- float n'est pas aucun
- la position est absolue ou fixe
- le débordement n'est pas visible
- l'affichage est flex, bloc en ligne, etc.
Applications courantes de BFC
- Flotteur transparent
```
overflow: hidden;
```

disposition flottante

Le but de la disposition du Saint Graal et de la disposition à deux ailes

Disposition à trois colonnes, la colonne du milieu est chargée et rendue en premier (le contenu est le plus important)
Le contenu des deux côtés est fixe, le contenu du milieu s'adapte à la largeur
Généralement utilisé pour les pages Web PC

Résumé technique du tracé du Saint Graal et du tracé à deux ailes
Utiliser la disposition flottante
Utilisez des marges négatives des deux côtés pour chevaucher horizontalement le contenu du milieu

Pour éviter que le contenu du milieu ne soit couvert des deux côtés, l'un utilise le remplissage et l'autre utilise la marge

Disposition du Saint Graal

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>圣杯布局</title>
    <style type="text/css">
        body {
         
         
            min-width: 550px;
        }
        #header {
         
         
            text-align: center;
            background-color: #f1f1f1;
        }

        #container {
         
         
            padding-left: 200px;
            padding-right: 150px;
        }
        #container .column {
         
         
            float: left;
        }

        #center {
         
         
            background-color: #ccc;
            width: 100%;
        }
        #left {
         
         
            position: relative;
            background-color: yellow;
            width: 200px;
            margin-left: -100%;
            right: 200px;
        }
        #right {
         
         
            background-color: red;
            width: 150px;
            margin-right: -150px;
        }

        #footer {
         
         
            text-align: center;
            background-color: #f1f1f1;
        }

        /* 手写 clearfix */
        .clearfix:after {
         
         
            content: '';
            display: table;
            clear: both;
        }
    </style>
</head>
<body>
    <div id="header">this is header</div>
    <div id="container" class="clearfix">
        <div id="center" class="column">this is center</div>
        <div id="left" class="column">this is left</div>
        <div id="right" class="column">this is right</div>
    </div>
    <div id="footer">this is footer</div>
</body>
</html>

Disposition des ailes doubles

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>双飞翼布局</title>
    <style type="text/css">
        body {
         
         
            min-width: 550px;
        }
        .col {
         
         
            float: left;
        }

        #main {
         
         
            width: 100%;
            height: 200px;
            background-color: #ccc;
        }
        #main-wrap {
         
         
            margin: 0 190px 0 190px;
        }

        #left {
         
         
            width: 190px;
            height: 200px;
            background-color: #0000FF;
            margin-left: -100%;
        }
        #right {
         
         
            width: 190px;
            height: 200px;
            background-color: #FF0000;
            margin-left: -190px;
        }
    </style>
</head>
<body>
    <div id="main" class="col">
        <div id="main-wrap">
            this is main
        </div>
    </div>
    <div id="left" class="col">
        this is left
    </div>
    <div id="right" class="col">
        this is right
    </div>
</body>
</html>

La disposition Holy Grail utilise un rembourrage et les doubles ailes utilisent une marge.

mise en page flexible

Syntaxe commune:

flex-direction commute la direction de l'axe principal
alignement horizontal justify-content
align-items alignement vertical
flex-warp s'il faut envelopper l'affichage
La propriété align-self définit l'alignement des éléments flexibles individuellement dans la direction latérale (axe vertical).

Sensible

Qu'est-ce que rem?
- rem est une unité de longueur
  - px, unité de longueur absolue, la plus couramment utilisée
  - em, unité de longueur relative, par rapport à l'élément parent, pas couramment utilisé
  - rem, unité de longueur relative, relative à l'élément racine, souvent utilisée dans la mise en page responsive
Des solutions courantes pour une mise en page réactive?
- media-query, définissez la taille de la police de l'élément racine en fonction de différentes largeurs d'écran
- rem, l'unité relative basée sur l'élément racine
- vw / vh vw / vh est relatif à la largeur de la fenêtre, la largeur de la fenêtre est de 100vw et la hauteur de la fenêtre est de 100vh
- Pourcentage, c'est-à-dire que la largeur et la hauteur de la boîte sont en%, comme la largeur: 20%

Positionnement

relative en fonction de son propre positionnement
absolu est positionné en fonction de l'élément de positionnement le plus proche
- Élément de positionnement:
- absoulute relative fixe
- corps

Centrer horizontalement

élément en ligne: text-align: center;
élément de bloc: marge: 0 auto;
元素： absolu à gauche: 50%; tableau arrière: translateX (-50%)

Centré verticalement

Élément en ligne: la valeur de line-height est égale à la valeur de height
元素： haut absolu: 50%; tableau arrière: translateY (-50%)
absolu 元素： haut, gauche, bas, droite = 0; marge: automatique

CSS3

Style graphique

Héritage de la hauteur de ligne

body {
      
      
    font-size: 20px;
    line-height: 200%;
}
p {
      
      
    font-size: 16px;
}

La hauteur de ligne ici est de 40px, qui doit être calculée d'abord, puis héritée