css : utilisation et différences des blocs, des blocs en ligne et des blocs en ligne

巴扎黑

Libérer： 2017-07-20 16:02:38

original

2179 Les gens l'ont consulté

Concept général

Les deux concepts de bloc et d'inline sont des termes abrégés pour être complets et précis, il doit s'agir d'éléments de niveau bloc (éléments de niveau bloc) et d'éléments en ligne. (élément en ligne). L'élément block est généralement réalisé comme un bloc indépendant et sera remplacé par une ligne distincte ; l'élément en ligne ne provoquera pas de sauts de ligne avant et après, et une série d'éléments en ligne sera affichée sur une ligne jusqu'à ce que la ligne soit pleine.
De manière générale, les éléments HTML ont leurs propres niveaux de mise en page (éléments de bloc ou éléments en ligne) :

Les blocs communs Les éléments de niveau incluent DIV, FORMULAIRE, TABLE, P, PRE, H1 ~ H6, DL, OL, UL, etc.
Les éléments en ligne courants incluent SPAN, A, STRONG, EM, LABEL, INPUT, SELECT, TEXTAREA, IMG, BR, etc.

Les éléments de bloc peuvent contenir des éléments de bloc et des éléments en ligne ; mais les éléments en ligne ne peuvent contenir que des éléments en ligne. Il convient de noter qu'il s'agit d'une déclaration générale et que les éléments que chaque élément spécifique peut contenir sont également spécifiques, cette règle ne s'applique donc pas aux éléments individuels. Par exemple, l'élément P ne peut contenir que des éléments en ligne, mais pas d'éléments de bloc.

De manière générale, vous pouvez modifier le niveau de disposition des éléments via les paramètres display:inline et display:block.

Comparaison des détails des blocs, des blocs en ligne et des blocs inlinke

Explication supplémentaire

Généralement, nous utiliserons l'affichage : block, display:inline ou display:inline-block pour ajuster le niveau de disposition des éléments. En fait, les paramètres d'affichage sont bien plus que ces trois, ils sont simplement plus couramment utilisés.
IE (version inférieure d'IE) ne prend pas en charge à l'origine le bloc en ligne, donc si vous utilisez display:inline-block pour les éléments en ligne dans IE, théoriquement, IE ne le reconnaîtra pas. , l'utilisation de display:inline-block déclenchera la mise en page sous IE, de sorte que l'élément en ligne ait l'apparence de l'attribut display:inline-block.

affichage:inline-block

affichage:inline

display:block

En termes simples, il restitue l'objet en tant qu'objet en ligne, mais le contenu du objet sous forme de bloc Rendu d'objet. Les objets en ligne suivants seront disposés sur la même ligne. Par exemple, nous pouvons donner à un lien (un élément) une valeur d'attribut inline-block afin qu'il ait à la fois les caractéristiques de largeur et de hauteur du bloc et les caractéristiques homologues de l'inline.
Les éléments en ligne n'occuperont pas seuls une ligne, plusieurs éléments en ligne adjacents seront disposés dans la même ligne, jusqu'à ce qu'un line Si elle ne peut pas être organisée, une nouvelle ligne sera ajoutée et sa largeur changera avec le contenu de l'élément.
Les attributs de largeur et de hauteur des paramètres d'élément en ligne ne sont pas valides.
Les attributs margin et padding de l'élément en ligne, le padding-left horizontal, padding-right, margin-left et margin-right produisent tous des effets de marge mais le remplissage vertical - ; top, padding-bottom, margin-top, margin-bottom ne produiront pas d'effets de marge.

L'élément de bloc occupera sa propre ligne et plusieurs éléments de bloc commenceront chacun un nouvelle ligne. Par défaut, la largeur d'un élément bloc remplit automatiquement la largeur de son élément parent.
Les éléments de bloc peuvent définir les attributs de largeur et de hauteur. Même si la largeur d'un élément de niveau bloc est définie, il occupe toujours une ligne exclusive.
Les éléments de bloc peuvent définir les attributs de marge et de remplissage.

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!