À quoi sert l'attribut display en CSS ?

L'attribut display en css est utilisé pour spécifier le type de boîte que l'élément doit générer. L'attribut display est un attribut couramment utilisé dans le développement front-end. Les valeurs d'attribut couramment utilisées incluent block, none, inline et inline-block.

Chaque élément de la page Web est une boîte rectangulaire. L'attribut display spécifie le type de boîte que l'élément doit générer. L'attribut display est un attribut que nous utilisons souvent dans le développement front-end.

(Recommandation vidéo d'apprentissage : tutoriel vidéo CSS)

Introduction aux valeurs d'attribut communes :

block La valeur par défaut de l'objet block. Ajoutez une nouvelle ligne après l'objet avec cette valeur

aucun pour masquer l'objet. Contrairement à la valeur cachée de l'attribut de visibilité, il ne conserve pas son espace physique pour les objets cachés

inline La valeur par défaut des objets en ligne. Utilisez cette valeur pour supprimer l'élément line

inline-block inline-block de l'objet. Cette valeur d'attribut combine les caractéristiques d'inline et de block, c'est-à-dire qu'il s'agit à la fois d'un élément en ligne et qu'il peut définir la largeur et la hauteur.

1. display:block

1. block : L'élément sera affiché comme un élément de niveau bloc, avec des sauts de ligne avant et après l'élément. en éléments de niveau bloc. Alors, que sont les éléments au niveau du bloc ? Que sont les éléments en ligne ?

2. Éléments de niveau bloc :

est toujours représenté comme un bloc, occupant une ligne entière. Plusieurs éléments de bloc frères seront disposés de haut en bas (sauf lors de l'utilisation de l'attribut float).

Vous pouvez définir la hauteur, la largeur, le patch extérieur (marge) dans chaque direction et le patch intérieur (rembourrage) dans chaque direction.

Lorsque la largeur de l'élément (width) n'est pas définie, sa largeur est de 100 % de son conteneur, sauf si nous lui définissons une largeur fixe.

Les éléments de niveau bloc peuvent être imbriqués dans d'autres éléments de niveau bloc ou dans des éléments en ligne.

La valeur de l'attribut d'affichage des éléments de niveau bloc est par défaut block.

3. Les éléments en ligne

n'occuperont pas une ligne entière à eux seuls, mais occuperont uniquement l'espace où se trouvent leur propre largeur et hauteur, c'est-à-dire que la largeur et la hauteur de l'élément sont déterminées par. son texte. Contenu ouvert. Plusieurs éléments en ligne frères seront disposés de gauche à droite (c'est-à-dire qu'un élément en ligne peut être sur la même ligne que d'autres éléments en ligne) et de haut en bas.

La hauteur et la largeur des éléments en ligne ne peuvent pas être définies. La hauteur est généralement déterminée par la taille de sa police et sa largeur est contrôlée par la longueur du contenu.

Les éléments en ligne ne peuvent définir que les valeurs de marge gauche et droite et les valeurs de remplissage gauche et droite, mais ne peuvent pas définir les valeurs de marge supérieure et inférieure et les valeurs de remplissage supérieure et inférieure. Par conséquent, nous pouvons modifier la largeur des éléments en ligne en définissant les valeurs de remplissage gauche et droite.

Les éléments en ligne ne peuvent généralement pas contenir d'éléments de niveau bloc.

La valeur de l'attribut d'affichage des éléments au niveau du bloc est par défaut en ligne.

2. display:none

display:none signifie que l'élément n'est pas affiché. Lorsque vous souhaitez qu'un élément soit masqué, vous pouvez définir cet attribut pour un élément et il disparaîtra de la page Web. Cependant, l'élément n'est pas supprimé du document. Il est simplement masqué dans la structure de la page Web et n'est pas affiché. la page Web. Mais si vous souhaitez que l'élément soit affiché, vous pouvez définir display:block sur l'élément, et l'élément peut être affiché sur la page Web.

3. display:inline

display:inline peut convertir un élément de niveau bloc en élément en ligne. Cet élément de niveau bloc ne pourra alors plus définir la largeur, la hauteur et. marges haut et bas et remplissage. La largeur et la hauteur réelles de cet élément au niveau du bloc sont automatiques, et non les valeurs que nous définissons.

4. display: inline-block

À en juger par le nom, on peut comprendre qu'il combine inline et block et conserve leurs caractéristiques. Par conséquent, les éléments avec l'attribut inline-block défini ont non seulement les caractéristiques des éléments de bloc qui peuvent définir les attributs de largeur et de hauteur, mais conservent également les caractéristiques des éléments en ligne qui ne sont pas enroulés.

Recommandations associées : Tutoriel CSS

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!