Résumé des propriétés CSS courantes

******* Propriétés CSS communes **********

z-index :

auto (par défaut)

Récupère ou définit l'ordre d'empilement des objets.

Objets parallèles, plus la valeur de ce paramètre d'attribut est grande, plus ils seront empilés haut.

Si cet attribut de deux objets a la même valeur, ils seront cascadés selon l'ordre dans lequel ils circulent dans le document HTML, et celui écrit plus tard écrasera le précédent.

La valeur de l'attribut de position doit être définie comme relative | absolue | page centrale fixe | pour que cette valeur prenne effet. La fonctionnalité de script correspondante de

est zIndex.

-------------------------------------- --- ----------------------------------------------- --- ----------

clip : Récupère ou définit la zone visible de l'objet. Les parties extérieures à la zone sont transparentes.

La valeur de position doit être définie sur absolue pour que cet attribut soit utilisé.

auto : Pas de découpage de l'objet

rect(|auto |auto |auto |auto) : Basé sur haut-droit-bas -left La commande fournit quatre valeurs de décalage calculées à partir du coin supérieur gauche de l'objet pour la coordonnée (0,0). Chacune de ces valeurs peut être remplacée par auto, c'est-à-dire que ce bord ne le sera pas. coupé.

Recadrer dans l'orientation supérieure gauche : commencez à recadrer à partir de 0 jusqu'à ce que la valeur définie, c'est-à-dire que la valeur automatique dans l'orientation supérieure gauche soit égale à 0 ;

Recadrer dans la droite ; -orientation inférieure : commencer à partir du paramètre La valeur commence à être tronquée jusqu'aux bords les plus à droite et en bas, c'est-à-dire que la valeur automatique inférieure droite est la largeur et la hauteur réelles de la boîte

Exemple : clip : rect(auto 50px 20px auto)

Remarque : Le haut ne sera pas coupé, la droite sera coupée du 50ème pixel vers l'extrême droite, le bas sera coupé à partir du 20ème pixel vers le bas, et la gauche ne sera pas coupée

inset(|auto |auto |auto |auto) : Cette méthode de découpage est similaire à rect(). découpage de inset(). Chaque orientation est découpée en référence à la limite de l'orientation.

Recadrer dans l'orientation haut-droit-bas-gauche : commencez à recadrer à partir de 0 jusqu'à ce que la valeur définie, c'est-à-dire que la valeur automatique de l'orientation haut-droite-bas-gauche soit égale à 0 (CSS3 ; )

------------------------------------- -------- ----------------------------------------------- -------- ---------------

position : Récupère la méthode de positionnement de l'objet.

statique : l'objet suit un flux régulier. Les propriétés telles que haut, droite, bas et gauche ne seront pas appliquées.

relatif : l'objet suit le flux normal et n'affecte aucun élément du flux normal lorsqu'il est décalé par les attributs haut, droite, bas et gauche en fonction de sa position dans le flux normal. Les cascades sont définies via l'attribut z-index.

absolu : l'objet s'éloigne du flux régulier et utilise les attributs haut, droite, bas, gauche et autres pour un positionnement absolu. La position décalée de la boîte n'affecte aucun élément du flux régulier, ni son positionnement. margin ne s'effondre avec aucune autre marge. Sa cascade est définie via l'attribut z-index.

corrigé : l'objet s'éloigne du flux régulier et utilise les attributs haut, droite, bas, gauche et autres pour le positionner avec la fenêtre comme point de référence. Lorsque la barre de défilement apparaît, l'objet ne défile pas. . IE6 et versions antérieures ne prennent pas en charge la valeur de ce paramètre

center : l'objet est séparé du flux régulier et des attributs tels que top, right, bottom et left sont utilisés pour spécifier la position ou la taille de la boîte. La boîte est centrée verticalement et horizontalement dans son conteneur. La position décalée de la boîte n'affecte aucun élément du flux régulier, ses marges ne sont réduites à aucune autre marge et leur mise en cascade est définie par l'attribut z-index. (CSS3)

page : La position de la boîte est calculée en absolu. (CSS3)

---------------------------------- - ------------------------------------------------- - -------------------------

marge

h2{margin:10px 0;}

Récupère ou définit les marges étendues sur les quatre côtés de l'objet.

Si les quatre valeurs de paramètres sont fournies, les quatre côtés seront appliqués dans l'ordre supérieur, droit, inférieur et gauche.

Si un seul est fourni, il sera utilisé pour les quatre côtés.

Si deux sont fournis, le premier est pour le haut et le bas, et le second est pour la gauche et la droite.

Si trois sont fournis, le premier est pour le haut, le deuxième est pour la gauche et la droite et le troisième est pour le bas.

Les objets en ligne peuvent utiliser cet attribut pour définir les patchs extérieurs sur les côtés gauche et droit ; si vous souhaitez définir les patchs extérieurs sur les côtés supérieur et inférieur, vous devez d'abord faire apparaître l'objet au niveau du bloc ou niveau de bloc en ligne.

Les marges étendues sont toujours transparentes.

Certaines marges adjacentes fusionneront, ce que nous appelons pliage des marges

---------------- ----- --------------------------------------------- ----- -----------------------------------

aspect -ratio

: Spécifiez le rapport

Définissez le rapport de la largeur et de la hauteur de la zone visible de la page dans le périphérique de sortie.

Cette fonctionnalité accepte les préfixes min et max, de sorte que deux fonctionnalités multimédias, min-aspect-ratio et max-aspect-ratio, peuvent être dérivées.

Écran @media et (rapport d'aspect : 1680/957){ … }

@import url(example.css) écran et (max-aspect-ratio:20/11);

------------- -------------------------------------------------- ------

background :

[ background-color] : Spécifiez la couleur d'arrière-plan du objet.

[ background-image ] : Spécifiez l'image d'arrière-plan de l'objet. Il peut s'agir d'un véritable chemin d'image ou d'une "image d'arrière-plan" créée à l'aide de dégradés

[ background-repeat ] : Spécifie comment l'image d'arrière-plan de l'objet est disposée et remplie.

[ background-attachment ] : Spécifiez si l'image d'arrière-plan de l'objet défile avec le contenu de l'objet ou est fixe.

[ background-position ] : Spécifiez la position de l'image d'arrière-plan de l'objet.

[ background-origin ] : Spécifiez l'origine de l'affichage de l'image d'arrière-plan de l'objet.

[ background-clip ] : Spécifiez la zone où l'image d'arrière-plan de l'objet spécifié est découpée vers l'extérieur.

[ background-size ] : Spécifiez la taille de l'image d'arrière-plan de l'objet.

-------------------------------------- --- ----------------------------------

paramètre de pièce jointe d'arrière-plan ou Récupère si l'image d'arrière-plan défile avec le contenu de l'objet ou est corrigée. L'attribut background-image doit être spécifié en premier.

fixe : L'image de fond est fixe par rapport au formulaire.

défilement : L'image d'arrière-plan est fixe par rapport à l'élément, ce qui signifie que l'image d'arrière-plan ne défilera pas lorsque le contenu de l'élément défile, car l'image d'arrière-plan suit toujours l'élément lui-même. Mais il défilera avec l'élément ou la forme ancêtre de l'élément.

local : L'image d'arrière-plan est fixe par rapport au contenu de l'élément, ce qui signifie que lorsque l'élément défile avec l'élément, l'image d'arrière-plan défilera également avec lui, car l'image d'arrière-plan suit toujours le contenu. (CSS3)

---------------------------------- - ------------------------------------------------- - ---------------------------------------

background-clip spécifie la zone où l'image d'arrière-plan de l'objet est découpée vers l'extérieur.

padding-box : Recadrez l'arrière-plan vers l'extérieur de la zone de remplissage (à l'exclusion du remplissage).

border-box : Recadrez l'arrière-plan vers l'extérieur à partir de la zone de bordure (hors bordure).

content-box : recadrez l'arrière-plan de la zone de contenu vers l'extérieur.

texte : recadrez vers l'extérieur à partir de la forme du contenu de premier plan (tel que le texte) en tant que zone de recadrage, afin que vous puissiez obtenir un effet de masquage tel que l'utilisation de l'arrière-plan comme couleur de remplissage.

-------------------------------------- --- ----------------------------------------------- --- -----------------------

background-repeat : Que diriez-vous de définir ou de récupérer l'image de fond d'un objet Disposez le remplissage. L'attribut background-image doit être spécifié en premier.

permet de fournir 2 paramètres Si les 2 paramètres sont fournis, le premier est pour l'orientation paysage et le second est pour l'orientation portrait.

Si un seul paramètre est fourni, il est utilisé pour le paysage et le portrait. À l'exception des valeurs spéciales répéter-x et répéter-y, car répéter-x est équivalent à répéter sans répétition, répéter-y est équivalent à répétition sans répétition, c'est-à-dire répéter-x et répéter-y sont équivalents pour fournir deux valeurs de paramètre. La fonctionnalité de script correspondante de

est backgroundRepeat.

répéter-x : l'image d'arrière-plan est en mosaïque horizontalement

répéter-y : l'image d'arrière-plan est en mosaïque verticalement

répéter : l'image d'arrière-plan en mosaïque horizontalement et verticalement

pas de répétition : l'image d'arrière-plan n'est pas carrelée

ronde : l'image d'arrière-plan est automatiquement mise à l'échelle jusqu'à ce qu'elle s'adapte et remplisse tout le conteneur. (CSS3)

espace : L'image d'arrière-plan est carrelée avec le même espacement et remplit tout le conteneur ou une certaine direction. (CSS3

------------------------------------ ------------ -----------------------------------------

background -position : Définissez ou récupérez la position de l'image d'arrière-plan de l'objet. L'attribut background-image doit être spécifié en premier

Si quatre sont fournis, chacun ou offset. doit être précédé d'un mot-clé (c'est-à-dire gauche | centre | droite | haut | bas), le décalage est relatif à la position du mot-clé

Exemple : Supposons que vous souhaitiez définir l'arrière-plan l'image doit être en bas à droite du conteneur, et la distance 20px à droite et en bas respectivement

Abréviation : background:url(test1.jpg) no-repeat right 20px bottom 20px;

 : Spécifiez la position du remplissage de l'image d'arrière-plan sous forme de pourcentage

 : Spécifiez la position du remplissage de l'image d'arrière-plan sous forme de valeur négative

.

centre : Centrez l'image d'arrière-plan horizontalement et verticalement.

gauche : L'image d'arrière-plan est remplie à partir de la gauche dans le sens horizontal.

à droite : L'image d'arrière-plan est remplie à partir de la direction horizontale. vers la droite dans le sens horizontal.

en haut : l'image d'arrière-plan est remplie dans le sens vertical.

en bas : l'image d'arrière-plan commence en bas verticalement.

--------------- -------------------------------- ----------------

background-origin : Définir ou récupérer l'origine de référence (position) lors du calcul de la position d'arrière-plan de l'objet. image de fond.

padding-box : affiche l'image d'arrière-plan à partir de la zone de remplissage (y compris le remplissage).

border-box : Affiche l'image de fond à partir de la zone de bordure (y compris la bordure).

content-box : Affiche l'image d'arrière-plan à partir de la zone de contenu.

-------------------------------------- --- ----------------

Ce qui précède est le résumé des propriétés CSS courantes. Pour un contenu plus connexe, veuillez faire attention au site Web PHP chinois (www.php .cn) !