简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Maison > interface Web > tutoriel CSS > le corps du texte

Que signifie l'attribut display en CSS ? Comment l'utiliser ? [Exemple de résumé]

藏色散人
Libérer： 2018-08-29 11:43:41
original
20038 Les gens l'ont consulté

Lorsque nous développons une interface Web, afin de rendre le site Web plus beau visuellement et plus riche en effets, les puissantes propriétés du CSS jouent naturellement un rôle indispensable. Ensuite, voici un attribut crucial à mentionner, l'attribut d'affichage CSS. Certains novices peuvent donc se demander : que signifie l'affichage en CSS ? Comment utiliser l'affichage CSS ?

Cet article vous donnera une introduction détaillée à l'utilisation spécifique de l'attribut d'affichage CSS, dans l'espoir de résoudre vos questions. (Afin de faciliter la compréhension de cet article par tout le monde, il est recommandé de lire mon article [Comment les éléments HTML sont-ils distingués ?], qui contient une introduction détaillée aux éléments de niveau bloc et aux éléments en ligne)

Tout d'abord, permettez-moi d'énumérer quelques valeurs d'affichage CSS couramment utilisées : none, block, inline, inline-block

Ensuite, nous expliquerons l'utilisation de l'attribut d'affichage CSS dans détailler à travers des exemples de code spécifiques.

1. Introduction à des exemples spécifiques d'attributs de bloc d'affichage CSS

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>css display:block属性实例</title>
    <style>
        *{padding: 0;margin:0;list-style: none;}
        ul li{float: left;}
        a{
        display:block; 
        width: 30px;height: 30px;
        color:#fff; 
        background: green;margin: 5px; 
        text-decoration: none;
        text-align: center;
        line-height: 30px;
        }
    </style>
</head>
<body>
<div class="demo">
    <ul>
        <li><a href="">1</a></li>
        <li><a href="">2</a></li>
        <li><a href="">3</a></li>
        <li><a href="">4</a></li>
        <li><a href="">5</a></li>
    </ul>
</div>
</body>
</html>
Copier après la connexion

Le code ci-dessus est accessible via le navigateur et l'effet est tel qu'illustré. dans la figure 1 :

Que signifie lattribut display en CSS ? Comment lutiliser ? [Exemple de résumé]

Nous commentons l'attribut display:block; dans la balise a, et l'effet est tel qu'illustré dans la figure 2 :

Que signifie lattribut display en CSS ? Comment lutiliser ? [Exemple de résumé]

Ensuite, à travers la figure 1, en comparant avec la figure 2, nous pouvons constater que dans la figure 1, parce que l'attribut display:block est défini, l'élément bloc dans a peut afficher la largeur, la hauteur et les dimensions intérieure et extérieure. paramètres de marge. Dans la figure 2, seul l'attribut de bloc d'affichage est supprimé, ce qui empêche la définition de la largeur et de la hauteur pour tous les blocs d'éléments.

C'est-à-dire que l'attribut display block peut définir l'élément en ligne sur un élément de niveau bloc, puis définir sa largeur, sa hauteur, ses marges supérieure, inférieure, gauche et droite, son remplissage et sa marge. Nous pouvons utiliser cet attribut pour obtenir l’effet souhaité.

2. Des exemples spécifiques d'attribut CSS n'affichent aucun 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>css display:none属性实例</title>
    <style>
        *{padding: 0;margin:0;list-style: none;}
        ul li{float: left;}
        a{
            display: none; width: 30px;height: 30px;color:#fff; background: green;margin: 5px; text-decoration: none;text-align: center;line-height: 30px;}
    </style>
</head>
<body>
<div class="demo">
    <p>a元素不会显示出来</p>
    <ul>
        <li><a href="">1</a></li>
        <li><a href="">2</a></li>
        <li><a href="">3</a></li>
        <li><a href="">4</a></li>
        <li><a href="">5</a></li>
    </ul>
</div>
</body>
</html>
Copier après la connexion

L'effet est tel que montré dans la figure 3 :

Que signifie lattribut display en CSS ? Comment lutiliser ? [Exemple de résumé]

Comme le montre la figure 3, après avoir défini l'attribut display:none; sur a, tous ses éléments sont masqués et ne seront pas affichés. Il est donc évidemment décidé que la valeur de l'attribut display est l'attribut none. display none est généralement utilisé dans la conception des première et deuxième colonnes de la barre de navigation.

3. Introduction à l'attribut d'affichage CSS 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>css display:inline属性实例</title>
    <style>
        p {display: inline}
     </style>
</head>
<body>
    <p>p标签是块级元素。</p>
    <p>此时显示为内联元素，不换行。</p>
</body>
</div>
</body>
</html>
Copier après la connexion

L'effet est tel qu'illustré dans la figure 4 :

Que signifie lattribut display en CSS ? Comment lutiliser ? [Exemple de résumé]

De l'image 4 Vous pouvez savoir que l'attribut CSS display inline peut transformer un élément en élément en ligne, c'est-à-dire un élément en ligne, et qu'il n'y a pas de saut de ligne avant et après l'élément.

4. Introduction à l'attribut inline-block d'affichage CSS

Comme son nom l'indique, l'attribut inline-block combine définitivement les caractéristiques des attributs inline et block, qui signifie que cet attribut peut transformer l'élément en élément de bloc en ligne. Vous pouvez non seulement afficher les éléments spécifiés sur la même ligne, mais également définir la largeur et la hauteur de leurs éléments.

Ensuite, cet article est une introduction à l'utilisation spécifique de l'attribut d'affichage CSS, y compris des exemples d'utilisation spécifiques de none, block, inline et inline-block. Il a une certaine valeur de référence et j'espère qu'il sera utile à des amis dans le besoin.

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：
css display属性
source：php.cn
Article précédent：Compréhension approfondie des sélecteurs de pseudo-classes CSS (exemples de code) Article suivant：Comment utiliser CSS et D3 pour implémenter une animation interactive de petits poissons nageant (avec code)
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
Derniers articles par auteur
Derniers numéros
Quels sont les chiffres de performances à côté des composants dans les outils de développement Vue ? Quelqu'un a-t-il des informations ou des ressources pour une certaine fonctionnalité des o...
Depuis 2023-11-09 14:46:48
0
1
305
Uncaught TypeError : impossible de définir la propriété non définie (définir 'innerHTML') J'essaie de créer une page Web en utilisant php, sur un élément de classe "Continuous...
Depuis 2023-11-08 21:06:09
0
1
278
Comment déstructurer conditionnellement une propriété d'objet à partir d'un getter Pinia ? Description du produit : exportconstuseMyStore=defineStore('myStore',{state:()=>{return...
Depuis 2023-11-08 17:47:18
0
1
275
Correction d'un problème dans Laravel-8 en essayant de lire la propriété "id" sur null J'obtiens cette erreur lors de l'exécution de phpartisanmigrate:fresh --seed. Cette comman...
Depuis 2023-11-08 14:07:01
0
2
155
La modification indirecte de l'attribut surchargé de App\Models\User::$profile n'est pas valide. Hé, j'utilise laravel9 et j'ai une relation entre deux modèles dans mon application : Util...
Depuis 2023-11-08 11:50:44
0
1
270
Rubriques connexes
Plus>
Recommandations populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
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！