1em=16px
Que signifient-ils en CSS
em est une unité de longueur relative en CSS, relative à la taille de 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 est relative à la taille par défaut du navigateur. taille de la police. Il peut être utilisé pour définir la largeur, la hauteur, la hauteur de ligne, la marge, la bordure et d'autres styles.
L'environnement d'exploitation de ce tutoriel : système Windows 7, version CSS3&&HTML5, ordinateur Dell G3.
Il existe de nombreuses unités en CSS. Le px couramment utilisé est une unité absolue et em est une unité relative. Sous le principe de la réactivité et des terminaux mobiles, l'utilisation d'em peut ajuster plus facilement et plus rapidement une série d'attributs tels que la taille de la police, la largeur, les marges et les bordures des documents Web et des éléments HTML à la fois. On peut dire que sous certains aspects, l'utilisation d'em comme unités est plus flexible que px.
1. Qu'est-ce que em
1. em C'est une unité relative en CSS, et sa longueur unitaire est déterminée en fonction de la longueur verticale du texte de l'élément. Il peut être utilisé pour définir la largeur, la hauteur, la hauteur de ligne, la marge, le remplissage, la bordure et d'autres styles. 1em=元素中文本的1个垂直高度
Copier après la connexion
Selon les règles ci-dessus : si la taille du texte dans l'élément est de 16px, alors 1em=16px si la taille du texte dans l'élément est de 20px, alors 1em=20px...
1em=元素中文本的1个垂直高度
Valeur par défaut de la taille du texte 2.em et HTML
Le texte dans le navigateur est généralement de 16 px par défaut, c'est-à-dire par défaut : 1em=16px
Copier après la connexionAlors, comment changer cela. Qu'en est-il des paramètres ? Définissez simplement explicitement la taille de la police de l'élément body. par exemple :
1em=16px
body {
font-size: 24px;
width: 10em; /* 10em = 24px * 10 = 240px */
}En CSS, si un élément n'a pas de taille de police définie, sa valeur de taille de police est celle de son parent element La valeur font-size est facile à comprendre, ce n'est qu'un simple héritage. Par exemple :<style>
body {
font-size: 12px;
}
div {
/* 该元素没有设置font-size，因此继承了父元素的font-size: 12px; */
width: 10em; /* 10em = 12px * 10 = 120px */
}
</style>
<body>
<div></div>
</body>Copier après la connexionIl convient de noter que l'élément enfant p hérite de la taille de police du corps de l'élément parent, donc en fait, la phrase "font-size: 12px;" est implicite dans la feuille de style de p. Désormais, si vous définissez explicitement la taille de la police pour un élément enfant, l'élément enfant calculera la longueur absolue de em en fonction de sa propre taille de police. Par exemple :
<style>
body {
font-size: 12px;
}
div {
/* 该元素没有设置font-size，因此继承了父元素的font-size: 12px; */
width: 10em; /* 10em = 12px * 10 = 120px */
}
</style>
<body>
<div></div>
</body><style>
body {
font-size: 12px;
}
div {
font-size: 20px;
width: 10em; /* 10em = 20px * 10 = 200px */
}
</style>
<body>
<div></div>
</body>Notez que dans l'exemple ci-dessus, la taille de police de p utilise px comme unité. Et si vous souhaitez l'utiliser ? Il convient de noter que si em est utilisé comme unité lors de la définition de la taille de la police, alors em sera la valeur relative de la taille de la police de son élément parent. Par exemple :
<style>
body {
font-size: 12px;
}
div {
font-size: 2em; /* 2em = 12px * 2 = 24px */
width: 10em; /* 10em = 24px * 10 = 240px */
}
</style>
<body>
<div></div>
</body>La taille de la police de l'élément enfant p est déterminée en fonction de la taille de la police du corps de son élément parent, donc 2em = 12px * 2, = 24px et la largeur de p est relative à ; sa propre police - La taille est déterminée, donc 10em = (12px * 2) * 10 = 240px. Il n’est donc pas surprenant que 2em=24px et 10em=240px dans p.
En fait, non seulement la largeur, mais aussi les em dans les éléments enfants, à l'exception de la taille de la police, sont déterminés en fonction de la taille de la police de l'élément parent, tous les autres em sont déterminés en fonction de leur propre police. -taille.
<style>
body {
font-size: 16px;
}
div {
font-size: 1.25em; /* 1.25em = 16px * 1.25 = 20px */
width: 10em; /* 10em = 20px * 10 = 200px */
height: 5em; /* 5em = 20px * 5 = 100px */
border: 0.05em solid #000; /* 0.05em = 20px * 0.05 = 1px */
margin: 0.25em; /* 0.25em = 20px * 0.25 = 5px */
padding: 0.75em; /* 0.75em = 20px * 0.75 = 15px */
line-height: 1.5em; /* 1.5em = 20px * 1.5 = 30px */
}
</style>
<body>
<div></div>
</body>(Partage vidéo d'apprentissage :
tutoriel vidéo CSS)
2 Calculez le bon em en fonction de px
1. Utilisez la calculatrice PXtoEM
Utilisez l'outil en ligne PXtoEM (http://pxtoem.com/) pour calculer facilement et rapidement la valeur em requise en fonction de px. .
2. Calculer manuellement em
La formule de calcul pour convertir px en em peut être déduite à l'envers de l'exemple suivant <style>
div {
font-size: 16px;
width: 2em; /* 2em = 16px * 2 = 32px */
}
</style>Copier après la connexion
px = taille du texte de référence * em => em = px / taille du texte de référence
<style>
div {
font-size: 16px;
width: 2em; /* 2em = 16px * 2 = 32px */
}
</style>3. formule , "Taille du texte de référence" nécessite une attention particulière :
Si l'élément lui-même définit la taille de la police, alors la taille du texte de référence est sa propre taille de police
Si l'élément lui-même ne définit pas la taille de la police, alors la taille du texte de référence est la taille de la police de l'élément parent- Lors de la définition de la taille de la police pour l'élément , si em est utilisé comme unité , alors la taille du texte de référence est la taille de la police de l'élément parent
- Pour plus de connaissances liées à la programmation, veuillez visiter :
- Vidéo de programmation
! !
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!
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
AI Hentai Generator
Générez AI Hentai gratuitement.
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Comment utiliser le bouton bootstrap
Apr 07, 2025 pm 03:09 PM
Comment utiliser le bouton bootstrap? Introduisez Bootstrap CSS pour créer des éléments de bouton et ajoutez la classe de bouton bootstrap pour ajouter du texte du bouton
Comment redimensionner le bootstrap
Apr 07, 2025 pm 03:18 PM
Pour ajuster la taille des éléments dans Bootstrap, vous pouvez utiliser la classe de dimension, qui comprend: ajuster la largeur: .col-, .w-, .mw-ajustement Hauteur: .h-, .min-h-, .max-h-
Comment insérer des photos sur bootstrap
Apr 07, 2025 pm 03:30 PM
Il existe plusieurs façons d'insérer des images dans Bootstrap: insérer directement les images, en utilisant la balise HTML IMG. Avec le composant d'image bootstrap, vous pouvez fournir des images réactives et plus de styles. Définissez la taille de l'image, utilisez la classe IMG-FLUID pour rendre l'image adaptable. Réglez la bordure en utilisant la classe IMG-border. Réglez les coins arrondis et utilisez la classe Roundée IMG. Réglez l'ombre, utilisez la classe Shadow. Redimensionner et positionner l'image, en utilisant le style CSS. À l'aide de l'image d'arrière-plan, utilisez la propriété CSS d'image d'arrière-plan.
Comment vérifier la date de bootstrap
Apr 07, 2025 pm 03:06 PM
Pour vérifier les dates dans Bootstrap, suivez ces étapes: introduisez les scripts et styles requis; initialiser le composant de sélecteur de date; Définissez l'attribut Data-BV-Date pour activer la vérification; Configurer les règles de vérification (telles que les formats de date, les messages d'erreur, etc.); Intégrez le cadre de vérification de bootstrap et vérifiez automatiquement l'entrée de date lorsque le formulaire est soumis.
Comment configurer le cadre de bootstrap
Apr 07, 2025 pm 03:27 PM
Pour configurer le framework Bootstrap, vous devez suivre ces étapes: 1. Référez le fichier bootstrap via CDN; 2. Téléchargez et hébergez le fichier sur votre propre serveur; 3. Incluez le fichier bootstrap dans HTML; 4. Compiler les sass / moins au besoin; 5. Importer un fichier personnalisé (facultatif). Une fois la configuration terminée, vous pouvez utiliser les systèmes, composants et styles de grille de Bootstrap pour créer des sites Web et des applications réactifs.
Comment afficher la date de bootstrap
Apr 07, 2025 pm 03:03 PM
Réponse: Vous pouvez utiliser le composant de sélecteur de date de bootstrap pour afficher les dates dans la page. Étapes: Présentez le framework bootstrap. Créez une boîte d'entrée de sélecteur de date dans HTML. Bootstrap ajoutera automatiquement des styles au sélecteur. Utilisez JavaScript pour obtenir la date sélectionnée.
Comment télécharger des fichiers sur bootstrap
Apr 07, 2025 pm 01:09 PM
La fonction de téléchargement de fichiers peut être implémentée via Bootstrap. Les étapes sont les suivantes: introduire les fichiers Bootstrap CSS et JavaScript; créer des champs d'entrée de fichier; créer des boutons de téléchargement de fichiers; gérer les téléchargements de fichiers (à l'aide de FormData pour collecter des données, puis envoyer au serveur); style personnalisé (facultatif).
Comment écrire des lignes fendues sur bootstrap
Apr 07, 2025 pm 03:12 PM
Il existe deux façons de créer une ligne divisée bootstrap: en utilisant la balise, qui crée une ligne divisée horizontale. Utilisez la propriété CSS Border pour créer des lignes de fractionnement de style personnalisées.
