Problèmes clés et difficiles en HTML et CSS

Cet article partage principalement avec vous les problèmes clés et difficiles du HTML et du CSS, en espérant aider tout le monde.

1. Comment centrer un p avec une largeur et une hauteur variables verticalement et horizontalement ?

Utiliser Flex

Ajoutez simplement Parent paramètres de la boîte : display : flex ; %, -50 %); position : absolue ; haut : 50 % ; gauche : 50 % ;
Utiliser la méthode display:table-cell

Paramètres de la boîte parent : display:table-cell ; :center;vertical-align:middle;
p settings: display:inline-block;vertical-align:middle;

2.position Le rôle de plusieurs attributs

Les quatre valeurs d'attribut communes de position : relative, absolue, fixe, statique. Généralement utilisé en conjonction avec les attributs « left », « top », « right » et « bottom ».

statique : Emplacement par défaut.

Dans des circonstances normales, nous n'avons pas besoin de le déclarer spécifiquement, mais parfois, lorsque nous rencontrons un héritage, nous ne voulons pas voir les attributs hérités par l'élément s'affecter, nous pouvons donc utiliser Position:static pour annuler l'héritage, cela c'est-à-dire restaurer La valeur par défaut pour le positionnement des éléments. Un élément défini sur static sera toujours à la position donnée par le flux de la page (les éléments statiques ignorent les déclarations haut, bas, gauche ou droite). Généralement peu utilisé.

relatif : positionnement relatif. Le positionnement relatif est relatif à la position par défaut de l'élément. Ses valeurs de décalage en haut, à droite, en bas et à gauche sont toutes décalées en fonction de sa position d'origine, indépendamment de ce qui arrivera aux autres éléments. Notez que l'élément déplacé relatif occupe toujours de l'espace dans sa position d'origine.
absolu : positionnement absolu. Un élément défini sur absolu, si son conteneur parent a l'attribut position défini et que la valeur de l'attribut position est absolue ou relative, il sera décalé en fonction du conteneur parent. Si son conteneur parent ne définit pas la propriété position, le décalage est basé sur le corps. Notez que les éléments avec l'attribut absolu défini n'occupent pas de position dans le flux standard.
fixe : Positionnement fixe. Les éléments dont la position est définie sur fixe peuvent être positionnés à des coordonnées spécifiées par rapport à la fenêtre du navigateur. L'élément restera dans cette position, que la fenêtre défile ou non. C’est toujours basé sur le corps. Notez que les éléments avec l'ensemble d'attributs fixes n'occupent pas de position dans le flux standard.
3. Flottage et compensation du flottement
3.1 Connaissances liées au flottement Valeur de l'attribut float :

gauche : L'élément flotte vers la gauche .

droite : l'élément flotte vers la droite.

aucun : valeur par défaut. L'élément n'est pas flottant et apparaît là où il apparaît dans le texte.

Caractéristiques du flottant :

Les éléments flottants seront séparés du flux normal de documents, mais les éléments flottants ne s'affectent pas seulement eux-mêmes, ils affecteront également l'alignement et les éléments environnants des éléments environnants.
Qu'un élément soit un élément en ligne ou un élément de niveau bloc, s'il est défini sur float, l'élément flottant générera une boîte de niveau bloc, et sa largeur et sa hauteur peuvent être définies. Par conséquent, float est. souvent utilisé pour créer des menus disposés horizontalement. Définir la taille et aligner horizontalement.
L'affichage des éléments flottants aura des règles différentes selon les circonstances :

Lorsqu'un élément flottant est flottant, sa marge ne dépassera pas le remplissage du bloc conteneur. PS : Si vous souhaitez que les éléments dépassent, vous pouvez définir l'attribut margin
Si l'un des deux éléments flotte vers la gauche et l'autre flotte vers la droite, le marginRight de l'élément flottant gauche ne sera pas adjacent au marginLeft de l’élément flottant droit.
S'il y a plusieurs éléments flottants, les éléments flottants seront disposés dans l'ordre sans se chevaucher.

S'il y a plusieurs éléments flottants, la hauteur de l'élément suivant ne dépassera pas l'élément précédent et ne dépassera pas le bloc conteneur.

S'il y a des éléments non flottants et des éléments flottants en même temps, et que les éléments non flottants sont devant, les éléments flottants ne seront pas plus hauts que les éléments non flottants
Les éléments flottants seront alignés vers le haut, à gauche ou à droite autant que possible
Problème de chevauchement

Lorsqu'un élément en ligne chevauche un élément flottant, sa bordure, son arrière-plan et son contenu seront affichés au-dessus de l'élément flottant
Quand un élément de niveau bloc chevauche un élément flottant, la bordure et l'arrière-plan seront affichés Sous l'élément flottant, le contenu sera affiché au-dessus de l'élément flottant
attribut clear

attribut clear : assurez-vous qu'il n'y a pas d'éléments flottants sur les côtés gauche et droit de l’élément actuel. clear n'affecte que la disposition de l'élément lui-même.

Valeurs : gauche, droite, les deux

3.2 Problème d'effondrement de la hauteur de l'élément parent

Pourquoi devrions-nous effacer les flotteurs et l'effondrement de la hauteur de l'élément parent

Résoudre le problème d'effondrement de la hauteur de l'élément parent : a block Si la hauteur d'un élément de niveau n'est pas définie, sa hauteur est étendue par ses éléments enfants. Après avoir utilisé float sur l'élément enfant, l'élément enfant se détachera du flux de documents standard, c'est-à-dire qu'il n'y a pas de contenu dans l'élément parent pour augmenter sa hauteur, donc la hauteur de l'élément parent sera ignorée. est ce qu'on appelle l'effondrement en hauteur.

3.3 Méthode d'effacement des flotteurs

Méthode 1 : Définir la hauteur du parent p

Principe : Définir une hauteur (hauteur) fixe pour le parent p peut résoudre le problème que le parent p ne peut pas obtenir la hauteur. J'ai un problème.

Avantages : Le code est concis

Inconvénients : La hauteur est fixe, elle convient donc aux modules à contenu fixe. (Non recommandé)

Méthode 2 : utilisez des éléments vides, tels que

(.clear{clear:both})
Principe : ajoutez une paire de balises p vides et utilisez css L'attribut clear:both efface le float afin que le parent p puisse obtenir la hauteur.
Avantages : Bon support du navigateur
Inconvénients : Il y a beaucoup de balises p vides s'il y a beaucoup de modules flottants dans la page, il y aura beaucoup de balises p vides, ce qui ne semble pas très satisfaisant. (Non recommandé)

Méthode 3 : Laisser le parent p flotter également
Cela peut dans un premier temps résoudre le problème de flottement actuel. Mais cela fait également flotter le parent, ce qui entraînera de nouveaux problèmes de flottement. Il n'est pas recommandé d'utiliser

Méthode 4 : Parent p definition display:table
Principe : Forcer l'attribut p dans une table
Avantages : Déroutant
Inconvénients : De nouveaux problèmes inconnus surgiront. (Non recommandé)

Méthode 5 : Débordement des paramètres de l'élément parent : caché, auto
Principe : La clé de cette méthode est de déclencher BFC. Dans IE6, hasLayout (zoom : 1) doit également être déclenché
Avantages : introduction du code, pas de problèmes structurels et sémantiques
Inconvénients : les éléments qui doivent déborder ne peuvent pas être affichés (non recommandé)

Méthode 6 : Parent p définit les pseudo-classes : after et zoom

.clearfix:after{
contenu :’.’;
display:bloquer
hauteur:0;
clair : les deux ;
visibilité : caché ;
}
.clearfix {zoom:1;}
Principe : Seuls les navigateurs IE8 et supérieurs et non-IE prennent en charge : après. a des attributs) Peut résoudre le problème flottant d'IE6 et IE7
Avantages : La structure et la sémantique sont tout à fait correctes, la quantité de code est modérée et il est réutilisable (il est recommandé de définir des classes publiques)
Inconvénients : Le code n'est pas très concis (fortement recommandé)

Méthode d'écriture Jingyiqiujing

.clearfix:after {
contenu : « 200B » ;
display:bloquer
hauteur:0;
clair : les deux ;
}
.clearfix { *zoom:1; } Prenez soin d'IE6, IE7 ira bien
Pour des connaissances détaillées sur le flottement, veuillez vous référer à cet article :
http://luopq.com/2015/11/08/C…

Connaissances liées à BFC

Définition : BFC (Contexte de formatage de bloc) est littéralement traduit par « contexte de formatage au niveau du bloc ». Il s'agit d'une zone de rendu indépendante, à laquelle participent uniquement les boîtes de niveau bloc. Elle spécifie la manière dont les boîtes internes de niveau bloc sont disposées et n'a rien à voir avec l'extérieur de cette zone.

Règles de mise en page BFC

BFC est un conteneur indépendant isolé sur la page. Les sous-éléments du conteneur n'affecteront pas les éléments à l'extérieur. Et vice versa.

Les marges verticales de l'élément BFC se chevaucheront. La distance verticale est déterminée par la marge, et la valeur maximale est prise

La zone de BFC ne chevauchera pas la boîte flottante (effacez la valeur). principe flottant).
Lors du calcul de la hauteur du BFC, les éléments flottants participent également au calcul.
Quels éléments généreront BFC

Élément racine

l'attribut float n'est pas nul
la position est absolue ou fixe
l'affichage est un bloc en ligne, une cellule de table, une légende de table, un flex , inline-flex
le débordement n'est pas visible

5. Qu'est-ce que le dimensionnement de la boîte

Définissez le modèle de boîte CSS sur le modèle standard ou le modèle IE. La largeur du modèle standard inclut uniquement le contenu, et le deuxième modèle IE inclut la bordure et le remplissage. L'attribut

box-sizing peut avoir l'une des trois valeurs suivantes :

content-box. la largeur du contenu. La bordure et le remplissage ne sont pas calculés dans la largeur

padding-box, le remplissage est calculé dans la largeur
border-box, la bordure et le remplissage sont calculés dans la largeur

6. . La différence entre px, em, rem

px pixel (Pixel). Unité absolue. Le pixel px est relatif à la résolution de l'écran du moniteur. Il s'agit d'une unité de longueur virtuelle et de l'unité de longueur de l'image numérique du système informatique. Si px doit être converti en longueur physique, la précision DPI doit être spécifiée.

em est une unité de longueur relative, relative à la taille de la police du texte dans l'objet actuel. Si la taille de police actuelle du texte en ligne n'a pas été définie manuellement, elle sera relative à la taille de police par défaut du navigateur. Il hérite de la taille de police de l'élément parent, ce n'est donc pas une valeur fixe.
rem est une nouvelle unité relative (root em) dans CSS3 Lorsque vous utilisez rem pour définir la taille de la police d'un élément, il s'agit toujours d'une taille relative, mais elle est uniquement relative à l'élément racine HTML.

7. Quelles sont les manières d'introduire CSS ? Quelle est la différence entre link et @import

Il existe quatre types : inline (attribut de style sur l'élément ? ), inline Embed (balise de style), lien externe (lien), import (@import) La différence entre

link et @import :

link est une balise XHTML En plus de charger du CSS, vous. peut également définir d'autres transactions telles que RSS ;@import appartient à la catégorie CSS et ne peut charger que du CSS.

Lorsque le lien fait référence à CSS, il sera chargé en même temps que la page est chargée ; @import nécessite que la page soit chargée une fois qu'elle est complètement chargée.
link est une balise XHTML et n'a aucun problème de compatibilité ; @import a été proposé dans CSS2.1 et n'est pas pris en charge par les navigateurs de versions inférieures.
link prend en charge l'utilisation de Javascript pour contrôler le DOM afin de modifier le style ; @import ne le prend pas en charge.

8. La différence entre une mise en page fluide et une mise en page réactive

Disposition de flux
utilise des pixels non fixes pour définir le contenu de la page Web, c'est-à-dire une disposition en pourcentage. En définissant la largeur de la boîte sur un pourcentage, elle peut
évoluer en fonction de la largeur de l'écran et. n'est pas limité par des pixels fixes. Le contenu est complété des deux côtés.

Développement réactif
Utilisez Media Query en CSS3 pour spécifier la mise en page de la page Web d'une certaine plage de largeur en interrogeant la largeur de l'écran.

Écran ultra petit (appareil mobile) 768 px ou moins
Appareil petit écran 768 px-992 px
Écran moyen 992 px-1 200 px
Appareil grand écran 1 200 px ou plus
Parce que le développement réactif est plus encombrant, généralement, des frameworks réactifs tiers sont utilisés, tels que bootstrap, pour effectuer une partie du travail. Bien sûr, vous pouvez également en écrire vous-même.

Différences

• Disposition du flux Développement réactif
  Méthode de développement Développement Web mobile + développement PC Développement réactif
  Scénarios d'application Généralement lorsqu'il y a déjà un PC Lors du développement un site Web mobile, il vous suffit de développer le terminal mobile séparément. Pour certains sites Web nouvellement créés, il est désormais nécessaire de s'adapter au terminal mobile, donc un ensemble de pages est compatible avec différents terminaux
  Le développement a un fort alignement et un niveau élevé. Efficacité de développement et compatible avec divers terminaux. Terminal, faible efficacité
  Adaptation Uniquement adapté aux appareils mobiles, l'expérience sur le pad est relativement mauvaise. Peut être adapté à différents terminaux
  Efficacité Le code est simple et rapide à charger. . Le code est relativement complexe et lent à charger
  9 Amélioration progressive et dégradation gracieuse

La principale différence réside dans ce sur quoi ils se concentrent et la différence. dans le flux de travail causé par cette différence

La perspective de dégradation gracieuse estime que les sites Web doivent être conçus pour les navigateurs les plus avancés et les plus complets.
Le point de vue de l'amélioration progressive estime que nous devons nous concentrer sur le contenu lui-même, en donnant la priorité aux versions inférieures.
10. Plusieurs manières et différences des éléments cachés CSS

affichage : aucun

L'élément disparaîtra complètement sur la page, et l'espace initialement occupé par l'élément sera occupé par d'autres éléments, et c’est-à-dire que cela entraînera la redistribution et le redessin du navigateur.
ne déclenchera pas son événement de clic
visibilité : cachée

La différence entre

et display:none est qu'après la disparition de l'élément de la page, l'espace qu'il occupe sera toujours conservé, il le sera donc uniquement à cause de la navigation. Le moteur de rendu est redessiné sans redistribution.
Impossible de déclencher son événement de clic
Convient aux scénarios dans lesquels la mise en page ne devrait pas changer une fois l'élément masqué
opacity:0

Après avoir défini la transparence de l'élément sur 0 , selon notre utilisateur Aux yeux, les éléments sont également masqués, ce qui est une manière de masquer les éléments. Une chose que
et visible:hidden ont en commun est que l'élément occupe toujours de l'espace après avoir été masqué, mais nous savons tous qu'après avoir défini la transparence sur 0, l'élément est simplement invisible et il existe toujours sur la page.
Peut déclencher un événement de clic
Définissez les attributs du modèle de boîte tels que la hauteur et la largeur sur 0

En termes simples, définissez la marge, la bordure, le remplissage, la hauteur, la largeur et d'autres attributs de l'élément qui affecte le modèle de boîte d'élément à 0. S'il y a des sous-éléments ou du contenu dans l'élément, vous devez également définir son overflow:hidden pour masquer ses sous-éléments. C'est une astuce.
Si la bordure, le remplissage et les autres attributs de l'élément sont définis sur non-0, il est évident que l'élément est toujours visible sur la page, et il n'y a aucun problème pour déclencher l'événement de clic de l'élément. Si tous les attributs sont mis à 0, il est évident que cet élément disparaît, c'est-à-dire que l'événement click ne peut pas être déclenché.
Cette méthode n'est pas pratique et peut poser quelques problèmes. Mais certains effets de page que nous utilisons habituellement peuvent être complétés de cette manière, comme l'animation slideUp de jquery, qui définit le débordement de l'élément : caché, puis définit en continu la hauteur et la marge supérieure de l'élément via un timer, margin-bottom, border-. top, border-bottom, padding-top, padding-bottom valent 0, obtenant ainsi l'effet slideUp.
Autres méthodes de création

Définissez la position de l'élément et à gauche, en haut, en bas, à droite, etc., et déplacez l'élément hors de l'écran
Définissez la position et l'index z de l'élément, et définissez le z-index dans le plus petit nombre négatif possible.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!