Valeurs d'attribut d'affichage CSS couramment utilisées et leurs scénarios d'application

Pour maîtriser les valeurs communes​​de l'attribut d'affichage CSS et ses scénarios d'application, des exemples de code spécifiques sont nécessaires

CSS (Cascading Style Sheets) est un langage de balisage utilisé pour décrire le style des documents HTML, de dont l'attribut d'affichage est un attribut très important. L'attribut display peut être utilisé pour définir le comportement d'affichage des éléments et déterminer la façon dont les éléments sont disposés sur la page, le type de modèle de boîte, etc.

En CSS, l'attribut display a plusieurs valeurs communes, et chaque valeur correspond à différents comportements d'affichage des éléments et scénarios d'application.

1. display:none

display:none est l'une des valeurs d'attribut d'affichage les plus courantes. Elle est utilisée pour masquer un élément et l'élément n'occupera plus l'espace de mise en page. Lorsqu'un élément est défini sur display:none, il ne sera pas affiché du tout sur la page.

Ce qui suit est un exemple de code qui utilise display:none pour masquer des éléments :

<div style="display:none;">
  这是一个被隐藏的元素
</div>

2. display:block

display:block est la valeur par défaut de l'attribut display. Lorsque l'attribut d'affichage d'un élément est défini sur block, l'élément sera rendu comme un élément de niveau bloc, qui occupera sa propre ligne et aura une largeur par défaut de 100 % de la largeur de son élément parent.

Ce qui suit est un exemple de code qui utilise display:block pour mettre en page un élément :

<div style="display:block; width:200px; height:200px; background-color:red;">
  这是一个块级元素
</div>

3. display:inline

display:inline est utilisé pour restituer un élément en tant qu'élément en ligne afin qu'il puisse être affiché aux côtés d'autres éléments en ligne. éléments, et la largeur et la hauteur ne peuvent être déterminées que par le contenu.

Ce qui suit est un exemple de code qui utilise display:inline pour les éléments de mise en page :

<span style="display:inline; background-color:green;">
  这是一个行内元素
</span>

4. display:inline-block

display:inline-block peut restituer l'élément en tant qu'élément de niveau bloc en ligne, qui peut être affiché aux côtés d'autres éléments en ligne et peut définir des propriétés telles que la largeur, la hauteur, les marges, etc.

Ce qui suit est un exemple de code qui utilise les éléments de disposition display:inline-block :

<div style="display:inline-block; width:100px; height:100px; background-color:blue;"></div>
<div style="display:inline-block; width:100px; height:100px; background-color:yellow;"></div>

5. display:flex

display:flex est utilisé pour créer un modèle de boîte flexible et peut contrôler la disposition des éléments enfants en définissant différents attributs Disposition, tri, etc.

Ce qui suit est un exemple de code utilisant la disposition display:flex :

<div style="display:flex; justify-content:center; align-items:center; height:200px; background-color:purple;">
  <div style="width:100px; height:100px; background-color:pink;"></div>
</div>

Ci-dessus sont quelques valeurs courantes​​des propriétés d'affichage CSS et des exemples de code de leurs scénarios d'application. La maîtrise de ces valeurs communes et de ces scénarios d'application permet de mieux utiliser CSS pour mettre en œuvre la mise en page et la conception.

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!