Différence entre un bloc et un élément Inline

October 1

Différence entre un bloc et un élément Inline


pages Web modéliser leur contenu dans des éléments HTML. éléments HTML tombent généralement dans deux catégories: inline et le bloc. Quelle catégorie un type d'élément est en détermine les types de structure, il peut apparaître au sein, ainsi que le type de structures qui peuvent apparaître dans ce, pour une page pour être correctement formé. L'état d'un élément que ce soit une ligne ou un niveau de bloc affecte également la manière dont son contenu est affiché dans le navigateur Web.

Types d'élément

Les différents types d'éléments dans le modèle HTML différents types de contenu de la page Web. pages HTML utilisent des structures d'arbres, ce qui signifie que les éléments peuvent contenir des éléments enfant. Dans la plupart des cas, un seul élément apparaît dans une page entre ouverture et de fermeture des balises, comme dans l'exemple suivant, ce qui représente un paragraphe:

<P> Voici un texte à l'intérieur d'un élément de paragraphe. </ P>

Les éléments HTML peuvent contenir du texte, des médias et d'autres éléments. Lors de la création d'une structure de page Web, les développeurs décident quels types d'éléments à utiliser pour le contenu dont ils ont besoin pour afficher. Une structure globale de la page Web implique normalement plusieurs éléments contenus dans des structures imbriquées, qui peut être très complexe dans certains cas.

Nesting

Pour une page Web pour fonctionner de manière fiable dans les différents navigateurs Web, le contenu en elle doit se conformer aux règles de nidification standard pour HTML. éléments de niveau bloc peuvent contenir d'autres éléments de niveau bloc, ainsi que les éléments en ligne. éléments Inline ne peuvent contenir d'autres éléments en ligne, ainsi que leur contenu, ce qui est généralement juste le texte. Par exemple, le balisage exemple suivant montre un "div" parent qui est un élément de niveau bloc, contenant un autre "div" comme un élément enfant, qui à son tour contient un "span" qui est un élément en ligne:

<Div id = "parent">

<Div id = "enfant">

<Span> Certains texte </ span>

</ Div>

</ Div>

Les éléments "div" peuvent contenir plusieurs autres éléments enfants. Le "span" peut contenir plusieurs autres éléments en ligne, mais ne pouvait pas, par exemple, contenir un autre "div."

CSS

Le CSS ou Cascading Style Sheet, des déclarations pour une page Web peuvent spécifier si le navigateur doit afficher certains éléments comme bloc ou en ligne. Cela permet aux développeurs d'adapter l'apparence de ces éléments indépendamment du fait qu'ils sont naturellement bloquent ou en ligne. Par exemple, un paragraphe est un élément de niveau bloc, mais le code CSS suivant spécifie que les paragraphes avec un attribut de classe particulière devrait apparaître en ligne:

p.inl {

display: inline;

}

Les navigateurs Web affichent automatiquement des éléments de bloc avec sauts de ligne avant et après eux, avec des éléments en ligne tombant naturellement en ligne dans un autre. Spécification qu'un élément doit être affiché en tant que l'un ou l'autre en utilisant la propriété d'affichage en CSS applique cette présentation indépendamment du type d'élément.

Restrictions

Bien que le code CSS peut spécifier qu'un élément de niveau bloc doit être affiché en ligne ou un élément en ligne doit être traité comme niveau du bloc, cela ne change pas les restrictions de nidification sur ces éléments. Cela signifie que même si un élément en ligne comme un "span" a une déclaration CSS indiquant qu'il devrait être affiché comme niveau de bloc, il reste ne doit pas avoir des éléments de niveau bloc imbriquées à l'intérieur ou la page va générer des erreurs de marquage.


          

Post a comment: