Que signifie l'attribut d'affichage CSS ? Explication détaillée de l'attribut d'affichage en CSS-tutoriel CSS-php.cn

Que signifie l'attribut d'affichage CSS ? Explication détaillée de l'attribut d'affichage en CSS

不言

Libérer： 2018-10-23 11:15:51

original

13248 Les gens l'ont consulté

L'attribut display de CSS est un attribut que nous devons souvent utiliser dans le développement Web. L'article d'aujourd'hui vous donnera une compréhension approfondie de ce qu'est l'attribut display. Les amis dans le besoin peuvent y jeter un œil.

Tout d'abord, regardons la définition de l'attribut d'affichage CSS

La définition de l'attribut d'affichage CSS peut masquer ou afficher des éléments de page, ou forcer des éléments Remplacez-le par un élément de niveau bloc ou un élément en ligne. L'attribut display est souvent utilisé dans la mise en page et les effets spéciaux JavaScript.

Il existe quatre valeurs d'attribut les plus couramment utiliséesdans l'attribut d'affichage CSS, à savoir block, inline-block, inline et none.

Analysons en détail ces quatre valeurs d'attribut d'affichage.

Avant d'introduire ces quatre valeurs d'attribut, nous devons d'abord comprendre les éléments au niveau du bloc et les éléments en ligne. Vous pouvez vous référer à ces deux articles : http://www.php. css-tutorial-409377.html et http://www.php.cn/css-tutorial-409376.htmlJe n'entrerai pas dans les détails ici, regardons simplement l'affichage An introduction à quatre valeurs d’attribut couramment utilisées.

1. La valeur de l'attribut de bloc d'affichage (display:block)

Définissez l'élément sur un élément de bloc si la largeur et la hauteur ne sont pas spécifiées. , le parent sera hérité par défaut. La largeur de l'élément, et il occupe une ligne exclusive, même s'il reste de la largeur, il occupera une ligne exclusive. La hauteur est généralement basée sur la hauteur des éléments enfants. Bien sûr, vous pouvez également régler vous-même la largeur et la hauteur.

Regardons un exemple :

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        a {
        background: lightblue;
        width: 300px;
                display: block;
    }
    </style>
</head>
<body>
<div>
    <a href="http//:www.php.cn">php中文网</a>
    <a href="http//:www.php.cn">php中文网</a>
    <a href="http//:www.php.cn">php中文网</a>
</div>
</body>
</html>

Copier après la connexion

L'effet de la définition de la valeur de l'attribut de bloc d'affichage est le suivant :

Que signifie lattribut daffichage CSS ? Explication détaillée de lattribut daffichage en CSS

2. La valeur de l'attribut inline de display (display:inline)

Le contenu étend la largeur et n'occupera pas une ligne exclusive. La largeur et la hauteur ne sont pas prises en charge. . Les sauts de ligne de code seront analysés en espaces.

Exemple de valeur d'attribut en ligne :

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        div{
        background: lightblue;       
    }
    li{
        display: inline;
    }
    </style>
</head>
<body>
<div>
    <li><a href="http//:www.php.cn">php中文网</a></li>
    <li><a href="http//:www.php.cn">php中文网</a></li>
    <li><a href="http//:www.php.cn">php中文网</a></li>
</div>
</body>
</html>

Copier après la connexion

L'effet de la définition de la valeur d'attribut en ligne d'affichage est le suivant :

Que signifie lattribut daffichage CSS ? Explication détaillée de lattribut daffichage en CSS

3. La valeur de l'attribut inline-block de display (display:inline-block)

Lorsque la largeur n'est pas définie, le contenu l'étendra ; n'occupera pas de ligne exclusive, prendra en charge la largeur et la hauteur, et le retour à la ligne du code est analysé comme des espaces. En bref, l'objet est rendu en ligne, mais le contenu de l'objet est rendu sous forme de bloc, lui donnant à la fois les caractéristiques de largeur et de hauteur du bloc et les caractéristiques homologues du bloc en ligne.

4. La valeur de l'attribut none de display (display:none)

Lorsque l'élément est défini sur none, il n'occupera ni d'espace ni ne sera affiché, ce qui est équivalent à ceci L'élément n'existe pas ; cette propriété peut être utilisée pour améliorer la redistribution et le redessinage.

Cet article se termine ici. Pour une introduction aux autres valeurs d'attributdans l'attribut d'affichage, vous pouvez vous référer au manuel d'apprentissage CSS sur le site Web PHP chinois pour une compréhension plus approfondie.

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!