Comment utiliser l'affichage en CSS-tutoriel CSS-php.cn

Comment utiliser l'affichage en CSS

清浅

Libérer： 2018-11-21 14:13:56

original

10976 Les gens l'ont consulté

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>//行级元素

Copier après la connexion

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

Image 13.jpg 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

Image 15.jpg

display:inline -block

Éléments de bloc en ligne courants : img, input

Image 16.jpg 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>

Copier après la connexion

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 espacevisibilité : 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 : aucun

Rendu

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>

Copier après la connexion

visibilité : cachée

Image 12.jpg 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>

Copier après la connexion

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

Image 11.jpg

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!