Que signifie le bloc en ligne en CSS ?

En CSS, inline-block fait référence à un "élément de bloc en ligne", qui présente les caractéristiques à la fois des éléments en ligne et des éléments de bloc ; les éléments de bloc en ligne peuvent être sur la même ligne que les autres éléments, et la hauteur, la largeur et la hauteur de la ligne. , et les marges supérieure et inférieure peuvent toutes être définies.

L'environnement d'exploitation de ce tutoriel : système Windows7, version CSS3&&HTML5, ordinateur Dell G3.

block

Caractéristiques des éléments de niveau bloc :

1. Chaque élément de niveau bloc commence sur une nouvelle ligne, et les éléments suivants commencent également sur une nouvelle ligne. (C'est vraiment dominateur, un élément au niveau du bloc occupe une ligne)

2. La hauteur, la largeur, la hauteur de la ligne, les marges supérieure et inférieure de l'élément peuvent être définies.

3. Lorsqu'elle n'est pas définie, la largeur d'un élément est 100 % de son conteneur parent (la même que la largeur de l'élément parent), sauf si une largeur est définie.

,

,

,

,

et

inline

Caractéristiques des éléments en ligne :

1 Ils sont sur la même ligne que les autres éléments ;

2. La hauteur, la largeur et les marges supérieure et inférieure de l'élément ne peuvent pas être définies ; La largeur de l'élément est La largeur du texte ou de l'image qu'il contient ne peut pas être modifiée.

, , , , , et

inline-block

Les éléments de bloc en ligne (inline-block) ont les caractéristiques à la fois des éléments en ligne et des éléments de bloc.

Caractéristiques de l'élément de bloc en ligne :

1. Il est sur la même ligne que les autres éléments ;

2. La hauteur, la largeur, la hauteur de la ligne, les marges supérieure et inférieure de l'élément peuvent être définies.

Remarque :

Tous les navigateurs ne prennent pas en charge cet attribut. Les navigateurs actuellement pris en charge sont : Opera et Safari. Utiliser display:inline-block pour les éléments en ligne dans IE ne le reconnaît pas, mais utilise display:inline-block. déclencher la disposition sous IE, de sorte que les éléments en ligne aient l'attribut display:inline-block. D'après l'analyse ci-dessus, il n'est pas difficile de comprendre pourquoi la définition de l'attribut display:inline-block sur un élément block ne peut pas obtenir l'effet inline-block sous IE. À l'heure actuelle, la disposition de l'élément block n'est déclenchée que par display:inline-block, et il s'agit à l'origine d'une disposition en ligne. Par conséquent, après le déclenchement, l'élément block est toujours dans une disposition en ligne et ne sera pas rendu sous forme de ligne. objet en ligne comme l'élément block dans Opera.

IE

Comment obtenir l'effet de display:inline-block sur l'élément de bloc suivant ? Il existe deux méthodes :

1. Utilisez d'abord l'attribut display:inline-block pour déclencher l'élément block, puis définissez display:inline pour afficher l'élément block en tant qu'objet en ligne (les deux affichages doivent être placés en deux). css l'une après l'autre) Il s'agit d'un bug classique d'IE Si vous définissez d'abord display:inline-block, puis remettez l'affichage en ligne ou en bloc, la mise en page ne disparaîtra pas). Le code est le suivant (...les autres attributs sont omis) :

div {display:inline-block;...} 
div {display:inline;}

2. Définissez directement l'élément de bloc pour qu'il soit présenté comme un objet en ligne (définissez l'attribut display:inline), puis déclenchez la disposition de l'élément de bloc. (comme zoom:1, etc. ). Le code est le suivant :

div {display:inline; zoom:1;}

Concept général

Les deux concepts de block et inline sont des abréviations. Les termes complets et précis doivent être des éléments de niveau bloc (éléments de niveau bloc) et des éléments en ligne (éléments 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 chacun leur propre niveau de mise en page (élément de bloc ou élément en ligne) :

Les éléments courants au niveau du bloc incluent p, FORM, 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, nous utiliserons display: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.

Pour plus de connaissances sur la programmation, veuillez visiter :

Introduction à la 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!