Maison >interface Web >tutoriel CSS >Que signifie l'attribut display en CSS ? Comment l'utiliser ? [Exemple de résumé]
Que signifie l'attribut display en CSS ? Comment l'utiliser ? [Exemple de résumé]
- 藏色散人original
- 2018-08-29 11:43:4120114parcourir
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>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é]](https://img.php.cn//upload/image/155/181/330/1535509776826503.png "1535509776826503.png")
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é]](https://img.php.cn//upload/image/408/696/456/1535509957880975.png "1535509957880975.png")
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>L'effet est tel que montré dans la figure 3 :
![Que signifie lattribut display en CSS ? Comment lutiliser ? [Exemple de résumé]](https://img.php.cn//upload/image/324/990/977/1535511221114844.png "1535511221114844.png")
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>L'effet est tel qu'illustré dans la figure 4 :
![Que signifie lattribut display en CSS ? Comment lutiliser ? [Exemple de résumé]](https://img.php.cn//upload/image/816/646/687/1535512554851704.png "1535512554851704.png")
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!