Maison  >  Article  >  interface Web  >  Que sont les éléments en ligne et les éléments de niveau bloc ?

Que sont les éléments en ligne et les éléments de niveau bloc ?

DDD
DDDoriginal
2023-08-17 11:33:146922parcourir

Les éléments en ligne incluent div, p, h1-h6, ul, ol, li, table, form, etc. ; les éléments au niveau du bloc incluent span, a, img, strong, em, input, label, etc. Les caractéristiques des deux éléments : 1. Les éléments en ligne occuperont une ligne, rempliront automatiquement la largeur du conteneur parent, pourront définir la largeur, la hauteur, les marges intérieures et extérieures et d'autres attributs, et pourront contenir d'autres éléments au niveau du bloc et des éléments en ligne. ; 2. Les éléments en ligne n'occuperont pas une ligne exclusive, la largeur et la hauteur sont déterminées par le contenu, et les marges intérieures et extérieures n'affectent que la disposition des éléments eux-mêmes, etc.

Que sont les éléments en ligne et les éléments de niveau bloc ?

L'environnement d'exploitation de cet article : système Windows 10, ordinateur Dell G3.

Les éléments en ligne et les éléments de niveau bloc sont deux types d'éléments en HTML, et ils sont affichés et se comportent différemment sur la page.

Éléments au niveau du bloc :

Les éléments courants au niveau du bloc incluent div, p, h1-h6, ul, ol, li, table, form, etc.

Les éléments au niveau du bloc occuperont une ligne et rempliront automatiquement la largeur du conteneur parent même si la largeur n'est pas définie.

Les éléments au niveau du bloc peuvent définir des attributs tels que la largeur, la hauteur, les marges intérieures et extérieures, etc.

Les éléments de niveau bloc peuvent contenir d'autres éléments de niveau bloc et des éléments en ligne.

Éléments en ligne :

Les éléments en ligne courants incluent span, a, img, strong, em, input, label, etc.

Les éléments en ligne n'occuperont pas une seule ligne, ils seront automatiquement disposés au sein d'une même ligne en fonction de la taille du contenu.

La largeur et la hauteur des éléments en ligne sont déterminées par le contenu, et les attributs de largeur et de hauteur ne peuvent pas être définis directement.

Les marges intérieures et extérieures des éléments en ligne n'affectent que la disposition de l'élément lui-même et ne changeront pas la position des autres éléments.

Les éléments en ligne ne peuvent pas contenir d'éléments de niveau bloc, mais ne peuvent contenir que d'autres éléments en ligne ou du contenu textuel.

Il convient de noter que certains éléments en HTML5 peuvent se comporter comme des éléments de niveau bloc ou des éléments en ligne selon le contexte. Par exemple, la balise a est un élément en ligne par défaut, mais si vous définissez l'attribut display: block; sur la balise a, elle deviendra un élément de niveau bloc.

Résumé :

Les éléments en ligne et les éléments au niveau du bloc ont des performances différentes en termes de mise en page et de paramètres de style. Les éléments de niveau bloc occuperont une ligne exclusive, et la largeur, la hauteur et les marges intérieures et extérieures peuvent être définies, et ils peuvent contenir d'autres éléments de niveau bloc et les éléments en ligne sont disposés sur la même ligne en fonction du contenu ; la taille, et la largeur et la hauteur ne peuvent pas être définies. Les marges intérieures et extérieures n'affectent que l'élément lui-même. L'arrangement ne peut contenir que d'autres éléments en ligne ou du contenu textuel.

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn