1. Quelle est la différence entre display:none et visibilité:hidden?
display:aucun; disparaît complètement pour libérer de l'espace. Peut déclencher une redistribution (réarrangement) de la page.
visibilité:hidden; est masqué, mais la position n'est pas libérée. Par exemple, opacity:0; ne provoque pas de redistribution de la page.
2. Comment calculer les valeurs de priorité et de poids CSS
Styles intégrés>Styles internes>Styles externes>Styles importés
! important > intégré 1000 >Id 100 > class=[]=pseudo-class 10 > tag=pseudo-element 1 > ( * + > ~) 0
3. Comment déclencher le BFC et le rôle du BFC
BFC : contexte de formatage de bloc, contexte de formatage de bloc, est une zone de rendu indépendante. Il précise l'agencement du caisson interne et n'a rien à voir avec l'extérieur de cette zone.
Déclencheur : la valeur de float n'est pas none ; la valeur de position n'est ni statique ni relative ; la valeur de display est inline-block, block, table-cell, flex, table-caption ou inline-flex ; la valeur de overflow est invisible.
Fonction : éviter le chevauchement des marges ; s'adapter à la disposition sur deux colonnes ; effacer le flottement.
4. Modèle de boîte CSS
Le modèle de boîte se compose de quatre parties : marge, bordure, remplissage et contenu.
Taille du modèle de boîte standard = bordure + rembourrage + contenu
Taille du modèle de boîte étrange = contenu
Convertir un modèle de boîte étrange : box-sizing:border-box;
Convertir en modèle de boîte standard : box-sizing:content-box;
5. Comment centrer un élément horizontalement et verticalement
5.1. Boîte souple
.box{
affichage : flex ;
justifier-contenu : centre ;
align-items : centre ;
}
5.2. Positionnement
.box{
position : relative ;
}
.box .sub{
position : absolue ;
haut : 50 % ;
gauche : 50 % ;
transformation : traduire (-50 %, -50 %);
/*margin-left : moitié de largeur négative* /
/*marge-haut : la moitié de la hauteur négative*/
}
6. CSS implémente un triangle
.triangle{
largeur : 0 ;
hauteur : 0 ;
bordure : 100 px solide transparente ;
couleur de la bordure gauche : rouge ;
}
7. Comment obtenir une largeur fixe à gauche et une disposition adaptative à droite
7.1. Disposition du Saint Graal
<div id="container">
<div id="center" class="column"></div>
<div id="left" class="column"></div>
<div id="right" classe ="colonne"></div>
</div>
#container {
padding-left : 200px ;
remplissage à droite : 150 px ;
}
#container .column {
float: gauche;
}
#centre {
largeur : 100 % ;
}
#gauche {
largeur : 200 px ;
marge gauche : -100 % ;
position : relative ;
à droite : 200 px ;
}
#right {
largeur : 150 px ;
marge droite : -150px ;
}
7.2. Disposition des doubles ailes volantes
<div id="container" class="column">
<div id="center"></div>
</div>
<div id="left" class="column"></div>
<div id= "right" class="column"></div>
#container {
width: 100%;
}
.colonne
{
float: gauche;
}
#center {
marge-gauche : 200px ;
marge droite : 150 px ;
}
#gauche {
largeur : 200 px ;
marge gauche : -100 % ;
}
#right {
largeur : 150 px ;
marge gauche : -150px ;
}
7.3. Disposition des contours (fausse hauteur égale) marges intérieures et extérieures complémentaires
.parent{
débordement : caché ;
}
.left, .right{
margin-bottom : -10000px ;
remplissage inférieur : 10 000 px ;
}
7.4. Boîte flexible à disposition à hauteur égale (véritable hauteur égale)
.parent{
affichage : flex ;
}
.enfant{
flex : 1 ;
}
7.5、calc
<div id="left" class="column"></div>
<div id="center" class="column"></div>
<div id="right" class="column"></div >
.column{
float : gauche ;
}
#gauche{
largeur : 100px ;
}
#right{
largeur : 200 px ;
}
#center{
largeur : calc(100% - 100px - 200px);
}
7.6. Flottant
<div id="left" class="column"></div>
<div id="right" class="column"></div>
<div id="center"></div>
#left{
float : gauche;
largeur : 100 px ;
}
#right{
float : droit ;
largeur : 200 px ;
}
#center{
marge-gauche : 100px ;
marge droite : 200 px ;
}
8. Comment implémenter la police 6px
.font{
taille de police : 12 px ;
transformation : échelle (.5);
}
9. Comment définir une bordure de 1 px sur un terminal mobile
/* Méthode 1 */
.border{
largeur : 100 % ;
hauteur : 1px ;
arrière-plan : rouge ;
}
/* Méthode 2 */
.border{
border-image : url(border.png)
}
/* Méthode 3 */
. bordure{
box-shadow : 0 0 0 1px #000;
}
10. Que sont respectivement px, em, rem, vh et vw ?
px pixel physique, unité absolue ; em est relatif à sa propre taille de police. S'il n'a pas de taille, il est relatif à la taille de police parent. Si le parent n'en a pas, il recherche couche par couche vers le haut jusqu'à ce que le code HTML soit trouvé. Unité relative ; rem est relatif à la taille de la police HTML, unités relatives ; la taille de vh, par rapport à la hauteur de l'écran, unités relatives ; la taille de vw, par rapport à la largeur de l'écran, unités relatives.
11. Quelles sont les propriétés héritables du CSS ?
Attributs hérités : classe de texte : retrait du texte, alignement du texte, hauteur de ligne, espacement des mots, espacement des lettres, transformation du texte, direction, couleur ;
Nom : font, font-family, font-weight, font-size, font-style, font-variant, font-stretch, font-size-adjust ;
Description : visibilité, côté légende, effondrement des bordures, espacement des bordures, cellules vides, mise en page de la table, type de style de liste, image de style de liste, position de style de liste, style de liste, citations, curseur 、page、page-break-inside、windows、orphelins等