Méthodes d'apprentissage recommandées
Méthode d'apprentissage par problèmes: l' apprentissage avec des problèmes est propice à la concentration et à des objectifs clairs. Ce n'est pas seulement une exigence pour un apprentissage délibéré, mais aussi une condition nécessaire pour l'apprentissage par découverte. Les psychologues divisent l'attention en deux types: l'attention non intentionnelle et l'attention intentionnelle. L'attention intentionnelle nécessite un but conscient à l'avance et, si nécessaire, il faut de la volonté et des efforts pour prêter activement attention à certaines choses. Cela montre la subjectivité et l'enthousiasme des activités psychologiques des gens. La méthode d'apprentissage par problèmes met l'accent sur une attention délibérée à l'information sur la résolution de problèmes, de sorte que l'apprentissage a une direction claire, améliorant ainsi l'efficacité de l'apprentissage.
Après avoir présenté la méthode d'apprentissage des problèmes, nous aborderons notre sujet aujourd'hui, puis je présenterai quelques connaissances de bas niveau et des phénomènes étranges de css, afin de permettre à chacun d'avoir une compréhension plus profonde du css.
Taille One.css
1. Largeur minimale préférée pour obtenir des effets graphiques complexes
En css, le poids des images et du texte est bien supérieur à celui de la mise en page, donc lorsque width: 0, la largeur affichée est la "largeur minimale préférée". La largeur minimale du chinois correspond à la largeur de chaque caractère chinois. Les caractères occidentaux dépendent d'unités de caractère anglais consécutives.
Par conséquent, nous pouvons implémenter des graphiques complexes basés sur cette fonctionnalité, comme suit:
Lorsque la souris passe, cela devient le suivant:
code montrer comme ci-dessous:
.minW{
display: inline-block;
width: 0
}
.minW::before {
content: "love 你 love";
color: transparent;
outline: 2px solid #cd0000;
}
.minW:hover::before{
content: "你 love 我";
color: transparent;
outline: 2px solid #cd0000;
}
Nous verrons que lorsque la largeur du conteneur est définie sur 0, une forme basée sur l'espace de texte apparaît en raison de l'influence de la largeur préférée.
2.2. Le principe du phénomène étrange lorsque la largeur de l'élément enfant est fixée à 100%
La largeur de l'élément parent = la largeur de l'image + la largeur du
principe de rendu du navigateur de contenu texte : commencez par télécharger le contenu du document, chargez les ressources de style head, puis restituer le contenu dom dans l'ordre de haut en bas et de l'extérieur vers l'intérieur. La raison du phénomène dans cet exemple est la suivante: lors du rendu vers l'élément parent, la largeur: 100% de l'élément enfant n'est pas rendu, et la largeur est la largeur de l'image plus le contenu du texte; lorsque le texte est rendu à l'élément enfant, la largeur de l'élément parent Il a été corrigé. Pour le moment, width: 100% est la largeur fixe de l'élément parent et la largeur ne suffit pas à déborder.
.box{
display: inline-block;
white-space: nowrap;
}
.text{
display: inline-block;
width: 100%;
}
Théoriquement, la largeur de l'élément parent doit être la somme de la largeur des éléments enfants, mais le phénomène illustré dans la figure ci-dessus apparaît. La raison réside dans l'ordre de rendu du navigateur: de l'extérieur vers l'intérieur, ce qui est très important.
3. Comment faire en sorte que les éléments supportent la hauteur: effet 100%
Point de connaissance: Le pourcentage de largeur et de hauteur du positionnement absolu est basé sur le padding-box, tandis que le pourcentage de largeur et de hauteur du positionnement non absolu est basé sur le content-box
Méthodes comme ci-dessous:
* 1.设置显示的高度值
* 2.使用绝对定位
4. L'animation d'expansion et de réduction de tout élément de hauteur (max-height / min-height)
1.La taille initiale de min-height / min-width est automatique, et la taille initiale de max-height / max-width est aucune
2. La priorité de min-height / min-width est supérieure à max-width / max-height
Pour réaliser l'animation d'expansion et de réduction comme indiqué dans la figure ci-dessus, vous pouvez utiliser max-height / min-height:
.nav > .sub-nav{
max-height: 0;
overflow: hidden;
transition: max-height .6s cubic-bezier(.17,.67,.76,1.41)
}
.nav:hover > .sub-nav{
max-height: 400px;
}
2. Exploration approfondie des éléments en ligne
Les éléments en ligne courants sont: le modèle de boîte d'élément en ligne avec un affichage défini sur inline, inline-block, inline-table:
Zone de contenu: elle peut être comprise comme la zone de couleur d'arrière-plan de la sélection de texte (mise en évidence)
Boîte en ligne: étiquette en ligne ou texte brut
Boîte de ligne: une ligne composée de boîtes en ligne, chaque ligne est une boîte de ligne
Boîte contenant: une boîte fantôme composée de boîtes de lignes. Nœud vide: dans la déclaration de document HTML5, l'analyse et le rendu des éléments en ligne se comportent comme s'il y avait un nœud vide devant chaque boîte de ligne. Comme illustré dans le cas suivant:
3. Compréhension approfondie du contenu
1. Sur le Web, de nombreux éléments de remplacement ont une taille par défaut (hors bordures) de 300 * 150 sans paramètres de taille clairs, tels que la vidéo, l'iframe, le canevas, etc., quelques-uns sont 0, comme img et les formulaires La taille de remplacement de l'élément est liée au navigateur lui-même.
2. Pour l'élément img, s'il existe une taille css, la taille finale est déterminée par la taille css (taille css> taille html> taille inhérente)
3. Lorsque l'attribut src de l'image est par défaut, l'image n'aura aucune requête, ce qui est le moyen le plus efficace pour y parvenir. Ce qui suit montre le code d'espace réservé d'image qui utilise cette méthode (pour le navigateur Firefox, l'img par défaut de src est un Eléments en ligne ordinaires, les paramètres de largeur et de hauteur ne sont pas valides):
img { visibility: hidden; }
img[src] { visibility: visible; }
technologie de génération de contenu de contenu
1. Réaliser un saut de ligne
::after{
content: '\A';
white-space: pre;
}
2. Réalisez l'animation de chargement
.dot{
display: inline-block;
width: 8em;
height: 1em;
line-height: 1;
text-align: left;
vertical-align: -.25em;
overflow: hidden;
}
.dot::after{
display: block;
margin-left: 5.2em;
content: '...\A..\A.';
white-space: pre-wrap;
animation: dot 3s infinite step-start both;
}
@keyframes dot{
33% { transform: translateY(-3em);}
66% { transform: translateY(-2em);}
99% { transform: translateY(-1em);}
}
3. Génération de contenu de valeur d'attribut
<div class="icon" data-tip="江小白"></div>
/* 可以使用原生属性和自定义属性 */
.icon::after{
content: attr(data-tip);
}
4. Attribut de compteur --- css pur pour obtenir un effet technique
.box1{
counter-reset: count1;
}
.xigua:checked::before{
content: counter(count1);
counter-increment: count1;
position: absolute;
color: transparent;
}
.box1::after{
content: counter(count1);
}
</style>
<div class="counter">
<div class="box1">
<div>西瓜<input class="xigua" type="checkbox" /></div>
<div>香蕉<input class="xigua" type="checkbox" /></div>
<div>萝卜<input class="xigua" type="checkbox" /></div>
</div>
</div>
4. Étude approfondie du rembourrage
1. Pour les éléments dont le modèle de boîte est défini sur box-sizing: border-box, si le remplissage est suffisamment grand, la largeur sera invalide:
width: 200px;
padding-left: 120px;
padding-right: 120px;
box-sizing: border-box;
2. Pour les éléments en ligne, le remplissage a un impact à la fois sur le calque visuel et sur le calque de mise en page. Si l'élément parent est défini sur overflow: auto, le remplissage vertical de l'élément enfant en ligne peut faire apparaître l'élément parent des barres de défilement, sinon si l'élément parent n'est pas défini Le débordement ne se chevauchera que dans le sens vertical et n'affectera pas la mise en page:
/* 父元素设置 */
.pd-2-1{
overflow: auto;
}
.pd-2-1 > span{
padding-top: 1em;
padding-bottom: 1em;
}
3. Application pratique du rembourrage (vous pouvez penser à l'implémentation spécifique)
1.增加链接或按钮的点击区域的大小
2.利用内联元素的padding实现高度可控的分割线
3.用内联元素实现瞄点定位距离
4. Utilisez la valeur du pourcentage de remplissage pour obtenir l'effet de mise à l'échelle de l'image proportionnellement:
.pd-3{
padding: 10% 50%;
position: relative;
}
.pd-3 img{
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
}
** Remarque: Le remplissage vertical des éléments en ligne fera apparaître des nœuds fantômes vides. À ce stade, envisagez de définir la taille de police: 0
5.Padding et dessin graphique
/* 菜单 */
.icon-menu{
display: inline-block;
width: 120px;
height: 10px;
padding: 35px 0;
border-bottom: 10px solid;
border-top: 10px solid;
background-clip: content-box;
background-color: currentColor;
}
/* 双层圆点 */
.icon-dot{
display: inline-block;
width: 60px;
height: 60px;
padding: 10px;
border-radius: 50%;
border: 10px solid;
background-clip: content-box;
background-color: currentColor;
}
5. Étude approfondie des marges
1. Utilisez: nth-type-of (3n) pour supprimer la marge de queue de l'élément enfant
.mg-item:nth-of-type(3n){
margin-right: 0;
}
Remarque: si le conteneur peut être défilé, la valeur padding-bottom sera ignorée sous IE et Firefox, mais pas Chrome. À ce stade, le bas du conteneur de défilement peut être laissé vide via margin-bottom
La différence essentielle est la suivante: chrome déclenche l'affichage de la barre de défilement lorsque l'élément enfant dépasse la taille de la zone de contenu de l'élément parent, tandis que les navigateurs IE et Firefox déclenchent l'affichage de la barre de défilement lorsque la taille de la zone de remplissage est dépassée
2. Conditions de fusion de marge
Éléments de niveau bloc, mais excluant les éléments flottants et positionnés de manière absolue
Apparaissent uniquement dans le sens vertical sous le flux de documents par défaut
Trois scénarios de fusion des marges
Frères et sœurs adjacents
Parent et premier / dernier élément enfant
* 解决方案： 父级设置为块级格式化上下文元素
父元素设置border-top/bottom值
父元素设置padding-top/bottom值
父元素设置高度
Fusion de marge d'élément vide au niveau du bloc
3. Règles de calcul pour la consolidation des marges
"Positif et positif prennent la valeur la plus élevée", "Ajouter les valeurs positives et négatives", "Valeur la plus négative négative et négative"
4. Compréhension approfondie de la marge: auto
Si un côté est fixe et un côté est auto, alors auto est l'espace restant
Si les deux côtés sont auto, l'espace restant est divisé également
Condition préalable au déclenchement de la marge: calcul automatique: lorsque la largeur ou la hauteur est une valeur fixe, l'élément a des caractéristiques de remplissage automatique
/* 1 */
margin-right: 20px;
margin-left: auto;
/* 2 */
margin-right:auto;
margin-left: auto;
4. Les éléments parfaitement positionnés utilisent margin: auto pour obtenir un centrage horizontal et vertical (compatible avec ie8 +)
.father{
position: relative;
}
.child-2{
position: absolute;
left: 0; bottom: 0; right: 0; top: 0;
width: 40px;
height: 20px;
margin: auto;
}
*** Analyse de la marge invalide:
La marge verticale d'un élément non remplacé dont la valeur calculée d'affichage est en ligne n'est pas valide
Pour les éléments de remplacement en ligne, les marges verticales sont efficaces et il n'y a pas de problème de fusion de marge, donc la fusion de marge ne se produira jamais
La fonction en ligne entraîne l'échec de la marge: il y a une image dans un conteneur et l'image est définie sur margin-top. À mesure que la valeur négative de margin-top devient de plus en plus grande, lorsqu'une valeur négative spécifique est atteinte, l'image ne se décale plus.
6. La lettre x et la ligne de base en css
Le bord inférieur de la lettre de base x
x-height fait référence à la hauteur de la lettre x
ex: ex fait référence à la hauteur de la lettre minuscule x, qui est une unité relative
vertical-align: le milieu fait référence à la hauteur de la ligne de base jusqu'à 1/2 x-hauteur
内联元素设置对齐方式时，是基于最前面的内联元素的基线，然后根据自己的vertical-align来调整对齐的
7. Contexte de formatage au niveau du bloc BFC
Performances: les changements de disposition à l'intérieur des éléments n'affecteront pas les éléments externes. Par conséquent, il n'y aura pas de fusion de marge, qui peut être utilisée pour effacer l'effet de flottement.
Conditions de déclenchement du BFC:
Élément racine
La valeur de float n'est pas nulle
La valeur du débordement est auto, scroll, hidden
La valeur de l'affichage est table-cellule, inline-block
La valeur de position n'est ni statique ni relative
Si l'élément a des caractéristiques BFC, il n'est pas nécessaire d'effacer: les deux pour effacer le flotteur
Affichage: caractéristiques des cellules du tableau: quelle que soit la largeur définie, elle ne dépassera pas la largeur du conteneur du tableau
Limite de coupe par débordement: zone de bordure: un élément avec débordement: masqué a à la fois un remplissage et une bordure définis, et lorsque l'élément enfant dépasse les paramètres de largeur et de hauteur du conteneur, la limite de coupe est le bord intérieur de la zone de bordure au lieu du bord intérieur de la zone de remplissage
Côté PC, les barres de défilement par défaut sont toutes de, la hauteur de défilement du côté PC peut être obtenue avec document.documentElement.scrollTop, et côté mobile avec document.body.scrollTop
La largeur de la barre de défilement côté PC est d'environ 17 px
Façons d'empêcher la barre de défilement de la page de trembler:
html{
/* ie8 */
overflow-y: scroll;
}
:root{
overflow-y: auto;
overflow-x: hidden;
}
:root body{
position: absolute;
}
body{
width: 100vw;
overflow: hidden;
}
9. La méthode CSS d'affichage des points de suspension lorsque le texte multiligne déborde:
.ell-rows-2{
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
8. Analyse de la difficulté relative
Le déplacement de positionnement relatif est relatif à lui-même. Si la valeur de gauche / haut / droite / bas est une unité de pourcentage, la taille calculée est basée sur l'élément parent.
Si les attributs opposés gauche / droite ou haut / bas apparaissent en même temps, seuls les attributs dans une direction prendront effet. La priorité est liée à l'ordre du flux de documents. Le flux de documents par défaut est de haut en bas et de gauche à droite, donc en haut La priorité est supérieure au bas, la priorité à gauche est supérieure à la droite
Principe de minimisation relative
Essayez de ne pas utiliser relatif, vous pouvez utiliser le positionnement absolu non dépendant pour résoudre certains problèmes
Si vous devez utiliser relative, relatif doit être minimisé (zone incluse minimum) -pour éviter des problèmes tels que la couverture hiérarchique
Contexte en cascade
L'index z par défaut de l'élément de positionnement: auto; À ce stade, comme les éléments ordinaires, une fois que l'index z est défini sur une valeur quelconque, un contexte d'empilement est créé, l'ordre est:
Contexte en cascade <index z négatif <bloc <float <inline <z-index: auto <z-index positif
Contexte en cascade des nouveaux attributs css3:
1.flex
2.opacity不为1
3.transform不为none
4.mix-blend-mode不为normal
5.filter不为none
6.isolation是isolate
7.will-change为上面2-6的任意一个
8.元素-webkit-overflow-scrolling设为touch
La valeur négative de z-index est en dessous du bloc, application pratique:
1. 可访问性隐藏
2. ie8下的多背景隐藏
Eh bien, il y a encore beaucoup de connaissances sur le CSS, et certains problèmes sont difficiles à résoudre à travers les apparences.A ce moment, ce qui vous distingue, c'est votre compréhension plus profonde du code sous-jacent.