Introduction aux balises de bloc et aux balises en ligne en HTML
Jun 24, 2017 am 11:44 AMLes balises HTML sont généralement divisées en deux types : les balises de bloc et les balises en ligne. Elles sont également appelées éléments de bloc et éléments en ligne.
Élément de bloc
Chaque élément de bloc occupe généralement une ligne entière ou plusieurs lignes entières à lui seul, et peut être défini avec des attributs tels que la largeur, la hauteur, l'alignement, etc. ., qui sont couramment utilisés pour la construction de la mise en page et de la structure des pages Web. Et les conteneurs d'éléments au niveau du bloc peuvent accueillir plusieurs balises imbriquées au niveau du bloc ou des balises en ligne. Les éléments de bloc courants incluent <h1>~<h6>, <p>, <div>, <ul>, <ol>, <li>, etc., parmi lesquels la balise <div> Est utilisé dans la production de pages Web. Les éléments de bloc les plus couramment utilisés dans .
Éléments en ligne
Les éléments en ligne n'occupent pas de zone indépendante et s'appuient uniquement sur leur propre taille de police et leur propre taille d'image pour prendre en charge le style de la structure. Les éléments en ligne ne peuvent pas imbriquer les balises au niveau du bloc, mais uniquement les autres balises en ligne. Les éléments en ligne courants incluent <strong>, <b>, <em>, <i>, <del>, <s>, <ins>, <u>, <a>, < ;span> etc., où la balise <span> est l'élément en ligne le plus couramment utilisé.
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>display</title> 6 </head> 7 <body> 8 <div>我是一个div</div> 9 <span>我是一个span</span>10 <strong>我是一个strong</strong>11 </body>12 </html>
Si vous souhaitez que la balise strong soit sur sa propre ligne comme la balise div, est-ce possible la réponse est bien sûr ? . Cela nécessite l'utilisation de l'attribut display. Les valeurs les plus couramment utilisées sont none, inline, block et inline-block. Elles méritent d'être expliquées comme suit
none : cet élément n'est pas affiché et l'est. déplacé dans le document supprimer.
block : Cet élément est affiché comme un élément de niveau bloc : avec des sauts de ligne avant et après, occupant sa propre ligne. Élément en ligne → élément de bloc
inline : Cet élément est affiché sous forme d'éléments en ligne : 1 à côté de 1. Élément de bloc → Élément en ligne
inline-block : composition en fonction des balises en ligne, mais la largeur et la hauteur peuvent être définies, et la hauteur peut affecter la hauteur de la ligne
attribut de bloc
Maintenant mettons ce qui précède Essayez de changer l'élément fort en un élément de niveau bloc
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>display</title> 6 7 <style type="text/css"> 8 strong { 9 display: block;10 }11 </style>12 </head>13 <body>14 <div>我是一个div</div>15 <span>我是一个span</span>16 <strong>我是一个strong</strong>17 </body>18 </html>
attribut en ligne
Vous pouvez voyez que l'attribut display est défini sur After block, la balise strong occupe sa propre ligne. Au contraire, si l'élément div devient un élément en ligne, vous devez utiliser la valeur en ligne de l'attribut display
1 <style type="text/css">2 strong {3 display: block;4 }5 6 div {7 display: inline;8 }9 </style>
span {width: 200px;height: 100px;background-color: red;
}
span {width: 200px;height: 100px;background-color: red;display: inline-block;
}
div {display: none;
}
div {visibility: hidden;
}
affichage : le paramètre aucun supprime directement la balise actuelle de la page sans affecter la page. . mise en page et le paramètre de visibilité : masqué signifie uniquement que l'élément n'est pas affiché sur la page, mais qu'il occupe toujours de l'espace sur la page.
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!
Article chaud
Outils chauds Tags
Article chaud
Tags d'article chaud
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)
Sujets chauds
Les attentes en matière de prix du Fujifilm X-M5 augmentent alors que l'écran selfie qui fuit ajoute de la complexité à la gamme d'appareils photo autrefois abordables
Sep 07, 2024 am 09:34 AM
Les attentes en matière de prix du Fujifilm X-M5 augmentent alors que l'écran selfie qui fuit ajoute de la complexité à la gamme d'appareils photo autrefois abordables
Samsung : un nouveau grand écran basé sur la technologie E Ink affiche les couleurs et communique sans fil
Jun 19, 2024 pm 03:37 PM
Samsung : un nouveau grand écran basé sur la technologie E Ink affiche les couleurs et communique sans fil
Comment introduire des images dans vue
May 02, 2024 pm 10:48 PM
Comment introduire des images dans vue
Dans quelle langue le plug-in du navigateur est-il écrit ?
May 08, 2024 pm 09:36 PM
Dans quelle langue le plug-in du navigateur est-il écrit ?
