Maison >interface Web >tutoriel CSS >Comment utiliser l'affichage en CSS
Comment utiliser l'affichage en CSS
- 清浅original
- 2018-11-17 15:46:0510996parcourir
Les valeurs d'attribut d'affichage couramment utilisées sont le bloc au niveau du bloc, le bloc en ligne au niveau de la ligne, le bloc en ligne au niveau du bloc de ligne et aucun, et le niveau de la ligne ou du bloc. les étiquettes de niveau peuvent être converties via display
Cet article partagera l'attribut display en CSS, qui a une certaine valeur de référence, j'espère qu'il sera utile à tout le monde
Nous utilisons généralement les valeurs. block, none, inline et inline dans l'attribut display lors de la création de mises en page CSS -block Nous allons donc aujourd'hui apprendre à les utiliser
attribut display
. L'attribut display peut avoir plusieurs valeurs, mais celles couramment utilisées sont les suivantes
aucun : cet élément ne sera pas affiché.
block : Cet élément sera affiché comme un élément de niveau bloc, avec des sauts de ligne avant et après cet élément.
inline : cet élément sera affiché comme un élément en ligne, sans saut de ligne avant et après l'élément.
inline-block : élément de bloc en ligne, qui possède à la fois des attributs au niveau du bloc et des attributs au niveau de la ligne.
Donc, dans cet article, je présenterai en détail block, inline, inline-block et none Ces valeurs d'attribut couramment utilisées
display: block.
Caractéristiques : occupe une ligne seule, la largeur et la hauteur peuvent être modifiées via CSS
Éléments de niveau bloc couramment utilisés : div, p, ul, li, ol, formulaire, adresse
affichage : en ligne
Caractéristiques : le contenu détermine la taille, la largeur et la hauteur ne peuvent pas être modifiées via CSS
Éléments de niveau ligne couramment utilisés : span, strong , em, a, del
<style>
div{
background-color: pink;
}
span{
background-color: yellow;
}
</style>
</head>
<body>
<div>123</div>//块级元素
<p><span class="span">hello</span>world</p>//行级元素Comme le montre l'image ci-dessus, vous pouvez voir que l'élément block occupe toute la largeur de la ligne. Si vous le considérez comme width:100%, ce qui suit. le contenu doit commencer par une nouvelle ligne
L'élément au niveau de la ligne s'affiche uniquement. Cette partie du contenu n'occupe pas de ligne de conversion d'élément au niveau du bloc
( 1) Convertissez les éléments de niveau bloc en éléments de niveau ligne
et définissez l'affichage pour les éléments de niveau bloc : en ligne
Le résultat est comme ceci
(2) Convertissez les éléments au niveau de la ligne en éléments au niveau du bloc Définissez display:block en éléments au niveau de la ligne et les résultats sont les suivants
display:inline -block
Éléments de bloc en ligne courants : img, input
Caractéristiques : Le contenu détermine la taille, ainsi que la largeur et la hauteur peut être modifié
Rendu
<style>
span{
background-color: yellow;
display:inline-block;//设置行块级元素
width:100px;
height:30px;
}
</style>
</head>
<body>
<p><span class="span">hello</span>world</p>La différence entre l'affichage : aucun et la visibilité : cachée
affichage : aucun ne sert à masquer des éléments, ce qui est non seulement invisible mais aussi n'occupe aucun espace
visibilité : caché peut également être utilisé pour masquer des éléments, mais ils existent toujours même s'ils ils sont invisibles, laissant un espace
Exemple
affichage : aucunRendu
bonjour est caché mais ne laisse aucun espace
.span{
background-color: aquamarine;
display:none;}
</style>
</head>
<body>
<p><span class="span">hello</span>world</p>visibilité : cachée
Rendu
bonjour est caché mais il y a encore un poste vacant
<style>
.span{
background-color: pink;
visibility: hidden;}
</style>
</head>
<body>
<p><span class="span">hello</span>world</p>Résumé : ce qui précède est l'intégralité du contenu de cet article, j'espère qu'il sera utile à tout le monde d'apprendre l'affichage
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!