Maison >interface Web >tutoriel CSS >Explication détaillée de l'utilisation de quatre valeurs d'attribut communes dans l'attribut d'affichage CSS (exemple de code)
Explication détaillée de l'utilisation de quatre valeurs d'attribut communes dans l'attribut d'affichage CSS (exemple de code)
- 青灯夜游original
- 2018-09-07 14:00:505437parcourir
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. Nous mentionnerons donc ici un attribut que nous utilisons souvent lors du développement de front-ends Web, l'attribut d'affichage CSS. Tous les principaux navigateurs prennent en charge l'attribut display. Deuxièmement, nous savons tous que l'attribut display spécifie le type de boîte que l'élément doit générer. Il est souvent utilisé dans l'attribut d'affichage CSS, et c'est également la valeur d'attribut la plus courante : none, block, inline, inline-blockt.
Ensuite, nous utiliserons des exemples de code spécifiques pour expliquer une par une l'utilisation la plus courante de la valeur d'attribut dans l'attribut d'affichage CSS.
1 : affichage : aucun, l'élément de paramétrage ne sera pas affiché
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css display:none</title>
<style>
* {
padding: 0;
margin: 0;
list-style: none;
}
.demo{
width: 200px;
height: 200px;
margin:50px auto;
}
ul li {
float: left;
}
span {
width: 30px;
height: 30px;
color: #fff;
background: red;
margin: 5px;
text-align: center;
line-height: 30px;
}
.a1{
display: none;
}
</style>
</head>
<body>
<div class="demo">
<p>数字2不会显示出来</p>
<ul>
<li>
<span>1</span>
</li>
<li>
<span class="a1">2</span>
</li>
<li>
<span>3</span>
</li>
<li>
<span>4</span>
</li>
<li>
<span>5</span>
</li>
</ul>
</div>
</body>
</html>Le rendu du code ci-dessus est le suivant :
affichage : aucun, l'élément défini ne sera pas affiché, et l'espace qui rend l'élément réaliste ne sera pas conservé. Mais il existe une autre visibilité : cachée, qui conserve l'espace de l'élément. Pour en savoir plus, lisez attribut de visibilité CSS.
Deux : display:block, affiche l'élément en tant qu'élément de niveau bloc
affiche l'élément en tant qu'élément de niveau bloc, avec des sauts de ligne avant et après le élément. Après l'avoir défini sur block, l'élément peut définir la largeur et la hauteur. Les éléments occupent leur propre ligne.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css display:block</title>
<style>
* {
padding: 0;
margin: 0;
list-style: none;
}
.demo{
width: 500px;
height: 200px;
margin:50px auto;
}
ul li {
float: left;
}
span {
display:block;
width: 30px;
height: 30px;
color: #fff;
background: red;
margin: 5px;
text-align: center;
line-height: 30px;
}
</style>
</head>
<body>
<div class="demo">
<p>span元素定义了宽与高，宽与高都显示为30px</p>
<ul>
<li>
<span>1</span>
</li>
<li>
<span>2</span>
</li>
<li>
<span>3</span>
</li>
<li>
<span>4</span>
</li>
<li>
<span>5</span>
</li>
</ul>
</div>
</body>
</html>Le rendu du code ci-dessus est le suivant :
La largeur et la hauteur de la balise span sont toutes deux affichées en 30px. Lorsqu'on supprime le display:block dans le code, le rendu affiché est le suivant :
Évidemment, quand on Après display:block est supprimé, la hauteur et la largeur de la travée ne peuvent pas être définies.
La balise span est un élément en ligne. Vous ne pouvez pas définir la hauteur, la largeur, les marges supérieure, inférieure, gauche et droite, le remplissage et la marge de l'élément. Cependant, lorsque display:block est défini pour l'élément. span, l'élément en ligne peut être converti en élément de bloc, afin que vous puissiez définir la hauteur, la largeur, les marges supérieure, inférieure, gauche et droite, le remplissage et la marge de l'élément.
Trois : display : inline, affiche l'élément en tant qu'élément en ligne
L'attribut d'affichage par défaut. Affiche l'élément en tant qu'élément en ligne sans saut de ligne avant ou après l'élément. Nous savons que la largeur et la hauteur des éléments en ligne ne peuvent pas être définies, donc une fois que l'attribut d'affichage de l'élément est défini sur en ligne, définir les attributs hauteur et largeur est inutile. À l’heure actuelle, la hauteur qui l’affecte est généralement la hauteur (taille de la police) et le remplissage des éléments internes.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css display:block</title>
<style>
* {
padding: 0;
margin: 0;
list-style: none;
}
.demo{
width: 1000px;
height: 200px;
margin:50px auto;
}
.demo p{
display:inline ;
color: #0081EF;
}
.demo div{
display:inline ;
color: #70DBDB;
}
</style>
</head>
<body>
<div class="demo">
<p>p标签和div标签同为块状元素，本应无法在同一行显示;</p>
<div>此时全为内联元素，不换行，在同一行显示。</div>
</div>
</body>
</html>Le rendu du code ci-dessus est le suivant :
Quatre : inline-block, afficher l'élément sous forme de bloc en ligne element
Élément de bloc en ligne. Cette valeur d'attribut combine les caractéristiques d'inline et de block. Vous pouvez combiner inline et block pour comprendre inline-block, c'est-à-dire qu'il s'agit d'un élément en ligne, qui peut être affiché sur la même ligne et qui peut définir la largeur et la hauteur.
Ce qui précède est une introduction détaillée à l'utilisation des valeurs d'attribut communesdans 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!