Maison > interface Web > tutoriel CSS > le corps du texte

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

WBOY
Libérer: 2024-02-02 12:10:06
original
1369 Les gens l'ont consulté

Valeurs dattribut daffichage CSS couramment utilisées et leurs scénarios dapplication

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>
Copier après la connexion
  1. 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>
Copier après la connexion
  1. 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>
Copier après la connexion
  1. 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>
Copier après la connexion
  1. 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>
Copier après la connexion

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!