Maison >interface Web >tutoriel CSS >Laissez-moi vous apprendre quelles sont les méthodes d'affichage en CSS ?

Laissez-moi vous apprendre quelles sont les méthodes d'affichage en CSS ?

零下一度original: 2017-05-03 15:49:061998parcourir

Aujourd'hui, apprenez la méthode d'affichage en CSS

1 Méthode d'affichage : <.> Le type d'affichage par défaut de la case

peut être modifié via l'attribut

affichage

attribut :

affichage

Afficher, masquer. Une fois la valeur définie sur aucun

, tout le contenu de l'élément n'est plus affiché et n'occupe plus d'espace dans le document. 2 , Bloc : bloc, laissez n'importe quel élément s'afficher 1 Les caractéristiques du bloc sont :

1. Culture de celui-ci seul

2. Vous pouvez définir la largeur et la hauteur 2. Bloquer Occasion d'utilisation : 1

, les éléments de la ligne, imaginez le même élément à afficher.

. block ;)

, inline

: Line, permet à n'importe quel élément d'être affiché comme un élément en ligne

🎜> en ligne

Caractéristiques : plusieurs éléments sont affichés sur une seule ligne

1, les éléments au niveau du bloc deviennent des éléments en ligneUtilisation de l'inlineOccasions : 🎜 > 2 , les éléments de la ligne sont masqués de

(Affichage : Aucun ;)

> ,

inline-block : Inline-block, l'élément lui-même est un élément en ligne, mais il a les caractéristiques d'un bloc (

peut modifier le width et height )

, 6ed09268cbdd0015bce8dcbbdfa9bfe4

est l'élément de bloc en ligne

1. Utilisation d'Inline-blockOccasions d'utilisation : lorsque vous souhaitez modifier la largeur et la hauteur des éléments en ligne

2. inline-block Effet d'affichage

1, visibilitéAttributs

Fonction : Pour obtenir la visibilité de l'élément( Afficher /Masquer)

、

visible : Valeur par défaut, l'élément est visible. 2 ,

Caché : L'élément n'est pas visible, caché, mais l'espace occupe toujours. 3 ,

Réduire

: Utilisé sur le tableau, vous pouvez supprimer une ligne ou une colonne sans affecter la disposition du tableau. 2, opacité

Attributs

:Définir le niveau d'opacité du élément valeur d'opacité : 0-1

Un nombre compris entre (dont

0 et 1) 1 : Complètement opaque

” ' ' ' ' ' ' ' ' ' ' ' Le plus la valeur est grande, plus il est opaque ' ' ' 3

alignement verticalAttributs

Définir l'alignement vertical Valeurs : haut / milieu /bas (haut, milieu, bas) ligne de base : Ligne de base alignement (alignement par défaut)

Pour l'élément bloc intérieur (IMG) , la méthode d'alignement entre le texte et l'élément courant peut être définie.

Par exemple : sélectionnez Je veux le texte suivant, liez 2 pour devenir un bloc en ligne, laissez le lien 3Devient un bloc, lien4disparaît

<!DOCTYPE html >
       <head>
  <title>文本格式</title>
  <meta charset="utf-8" />
   <style>
    a{
       border:1px solid black;
   width:70px;
   height:30px;
   background-color:silver;
}
   </style>
</head>
  
<body>
  <a href="#">链接1</a>
  <a href="#" style="display:inline-block;">链接2</a>
  <a href="#" style="display:block;">链接3</a>
  <a href="#"style="display:none;">>链接4</a>
</body>
</html>

4, curseurattributscurseur：

Par défaut, l'affichage du curseur sur la page Web sera différent selon les différents éléments.

Lien hypertexte : Forme de la main

Texte : I

Bouton : Flèche

En CSS, vous pouvez modifier l'effet d'affichage du curseur via l'attribut du curseur pour fournir clients avec un indice visuel.

Attributs : curseur

Valeur : pointeur : forme de la main

défaut : Défaut

réticule : + forme

texte : I Statut

attendre : Attendre

aide : ?

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!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment gérer le débordement CSS et les sauts de ligneArticle suivant：Comment gérer le débordement CSS et les sauts de ligne

Articles Liés

Voir plus