Résumé des propriétés communes CSS trois

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

[marge]

margin Récupérer ou définir la marge étendue sur les quatre côtés de l'objet

margin-top Récupérer ou définir la marge étendue sur le bord supérieur de l'objet

margin-right Récupérer ou définir la marge étendue sur le côté droit de l'objet

margin-bottom Récupérer ou définir la marge étendue du bord inférieur de l'objet

margin-left Récupérer ou définir la marge étendue du bord inférieur de l'objet côté de l'objet

argin : Récupère ou définit les marges extérieures des quatre côtés de l'objet.

Si les quatre valeurs de paramètres sont fournies, elles seront appliquées aux quatre côté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 de marge :

Compréhension générale du pliage de marge :

pliage de marge uniquement Se produit au niveau du bloc elements;

La marge d'un élément flottant ne s'effondre pas avec aucune marge

Un élément de niveau bloc dont l'attribut overflow est défini et dont la valeur n'est pas visible ne se chevauchera pas avec ses enfants ; . La marge de l'élément est réduite ;

La marge de l'élément positionné de manière absolue ne s'effondre avec aucune marge

La marge de l'élément racine ne s'effondre avec aucune autre marge ; 🎜>

auto : La valeur est définie sur la valeur du bord opposé

 : Utilisez la valeur de longueur pour définir le rembourrage extérieur. Peut être négatif

 : utilisez le pourcentage pour définir le remplissage externe. Peut être négatif

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

*************************************** *** ************************************************* **** **********************

【rembourrage】

padding Rechercher Ou définir le remplissage interne sur les quatre côtés de l'objet

padding-top Récupérer ou définir le remplissage interne sur le bord supérieur de l'objet

padding-right Récupérer ou définir le remplissage interne sur le côté droit de l'objet

padding-bottom Récupérer ou définir le remplissage interne du bord inférieur de l'objet

padding-left Récupérer ou définir le remplissage interne de la gauche côté de l'objet

padding : Récupère ou définit l'objet Marges internes sur les quatre côtés.

Si les quatre valeurs de paramètres sont fournies, elles seront appliquées aux quatre côté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 internes sur les côtés gauche et droit ; si vous souhaitez définir les patchs internes 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.

 : Utilisez la valeur de longueur pour définir le rembourrage intérieur. Les valeurs négatives ne sont pas autorisées

 : utilisez le pourcentage pour définir le remplissage interne. Les valeurs négatives ne sont pas autorisées

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

********* *** ************************************************* **** *******************************************

[text]

text-transform Récupérer ou définir la casse du texte dans l'objet

white-space Définir ou récupérer le traitement des espaces dans l'objet Méthode

tab-size Récupérer ou définir la longueur du caractère de tabulation dans l'objet

word-wrap Définir ou récupérer s'il faut couper les lignes lorsque le contenu dépasse la limites du conteneur spécifié

paramètres word -Bream ou objets récupérés dans le texte dans le texte dans le texte

Paramètres Text-Align ou récupérer le niveau de contenu dans l'objet de récupération

Paramètres Text-Align-Last ou récupérer un bloc dans un bloc La dernière ligne (y compris le cas où il n'y a qu'une seule ligne de texte dans le bloc, qui est à la fois la première et la dernière ligne)

Ou l'alignement de la ligne interrompue de force

 

text-justify                                                 Récupérer l'alignement utilisé pour ajuster le texte au sein de l'objet

espacement des mots                                                                                                                                                                                                                                                            🎜>

text-indent Récupérer ou définir l'indentation du texte dans l'objet

vertical-align Définir ou récupérer l'alignement vertical du contenu de l'objet

line-height Récupère ou définit la hauteur de la ligne de l'objet. C'est-à-dire la distance entre le bas de la police et le haut de l'intérieur de la police

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

espacement des lettres : récupérer ou définissez l'espacement entre les caractères dans l'objet Espaces minimum, maximum et optimal.

Cet attribut ajoute l'espacement spécifié après chaque lettre (y compris chaque lettre dans un mot

l'espacement des lettres ne peut pas être appliqué au début et à la fin d'une ligne) ; ;

normal : Intervalle par défaut

: Spécifiez l'intervalle avec une valeur de longueur. Peut être négatif.

 : Précisez l'intervalle en pourcentage. Peut être négatif.

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

line-height : Récupérer ou définir la hauteur de ligne de l'objet. C'est-à-dire la distance entre le bas de la police et le haut de l'intérieur de la police.

Valeur par défaut : normal

normal : Autoriser le contenu à repousser ou à dépasser les limites spécifiées du conteneur.

 : utilisez la valeur de longueur pour spécifier la hauteur de la ligne. Peut être négatif.

 : Spécifiez la hauteur de la ligne en pourcentage, et la valeur en pourcentage est basée sur la taille de la hauteur de la police. Peut être négatif.

 : Spécifiez la hauteur de la ligne à l'aide d'un facteur de multiplication. Peut être négatif.

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

text-align : Définit ou récupère l'alignement horizontal du contenu dans l’objet.

Le texte de l'élément de niveau bloc est constitué de wireframes empilés

Pour rendre la justification de l'alignement du texte efficace, vous devez insérer des espaces entre les caractères chinois, tels que Espace ;

La dernière ligne de texte du bloc (y compris le cas où il n'y a qu'une seule ligne de texte dans le bloc, auquel cas il s'agit à la fois de la première et de la dernière ligne) et de la ligne qui est interrompue de force , vous devez utiliser du texte pour aligner les deux extrémités -align-last

Sous le navigateur IE, si text-align-last veut prendre effet, text-align doit être défini comme justifier

L'effet d'alignement des deux extrémités d'une même ligne devient relativement simple :

li{overflow:hidden;width:200px;height:21px;text-align:justify;text-align -last:justify;}

li:after {display:inline-block;overflow:hidden;width:100%;height:0;content:'';}

gauche : le contenu est aligné à gauche.

centre : centrez le contenu.

à droite : le contenu est aligné à droite.

justifier : justifiez le contenu aux deux extrémités.

début : limite de début de l'alignement du contenu. (CSS3)

fin : limite de fin d'alignement du contenu. (CSS3)

 : La chaîne doit être un seul caractère, sinon la déclaration sera invalide. (CSS3)

match-parent : Cette valeur se comporte de la même manière que l'héritage, sauf que le mot-clé de début ou de fin hérité par cette valeur est calculé par rapport à la valeur de direction du parent. Les valeurs calculées peuvent être à gauche et à droite. . (CSS3)

start end : spécifiez start pour aligner la première ligne et toutes les lignes d'interruption forcée ; end pour aligner toutes les lignes restantes sans être affecté par text-align-last.

Quelques points à noter :

Tous les principaux navigateurs prennent en charge l'alignement du texte. justifier la valeur de l'attribut ;

text-align ne traite pas les lignes brisées de force, ni la dernière ligne du bloc. le bloc (la ligne est à la fois la première et la dernière ligne), alors le simple réglage de text-align:justify ne peut pas aligner les deux extrémités de la ligne

text-align-last est utilisé pour ; traiter l'intérieur du bloc La dernière ligne et la ligne d'interruption forcée, donc lorsque vous souhaitez définir l'alignement des deux extrémités d'une seule ligne de texte, vous devez utiliser text-align-last

Les navigateurs non-Firefox doivent aligner les deux extrémités Pour que l'alignement prenne effet, des espaces, tels que des espaces, doivent être insérés entre les textes (s'il n'y a que 2 caractères chinois dans une ligne, Firefox doit également insérer espaces entre eux);

Chrome23, Safari5.1.7, Opera12 .5 text-align-last n'est pas encore pris en charge

Selon les points ci-dessus, pour y parvenir ; alignement des deux extrémités d'une seule ligne, vous pouvez aller dans deux directions :

En raison de toute navigation Tous les navigateurs prennent en charge la valeur de l'attribut justifier de text-align, mais tous ne prennent pas en charge text- align-last. Nous pouvons utiliser des pseudo-objets pour générer du contenu supplémentaire pour les navigateurs non-IE et IE7 ou supérieur (les navigateurs IE7 et inférieurs ne prennent pas en charge les pseudo-objets, utilisez le traitement text -align-last), placez-le sur la deuxième ligne et masquez-le. À ce stade, la première ligne de texte (c'est-à-dire la seule ligne de texte à aligner) peut être alignée en utilisant text-align:justify

.

Les navigateurs qui prennent en charge text-align-last, tels que IE et Firefox, utilisent text-align-last. Les navigateurs qui ne le prennent pas en charge utilisent la méthode ci-dessus

Donc, en fonction de la situation actuelle, utilisez. La première solution est relativement simple et peut être facilement compatible avec IE5.5-10, Firefox, Chrome, Safari, Opera

texte -align-last : Définir ou récupérer la dernière ligne d'un bloc (y compris le cas où il n'y a qu'une seule ligne de texte dans le bloc, qui est à la fois la première et la dernière ligne) Alignement

Si une ligne est également la première ligne d'un bloc ou la première ligne mais est suivie d'un saut de ligne forcé, à moins que l'alignement de la première ligne par alignement du texte ne soit explicitement spécifié (valeur 'début fin'), sinon l'alignement du texte par last remplacera text-align

Si la valeur automatique est spécifiée, l'alignement du contenu sera basé sur le paramètre text-align, à moins que text-align soit défini sur Justifier ; >En tant qu'attribut privé d'IE, IE5.5 a été le premier à implémenter text-align-last, qui a ensuite été adopté comme attribut standard par le w3c

Les navigateurs IE7 et inférieurs ne l'implémentent que L'alignement du la dernière ligne du bloc n'est pas traitée et l'alignement des lignes interrompues de force n'est pas traité. À partir d'IE8, les deux formes d'alignement de ligne sont prises en charge

Sous le navigateur IE, si text- Pour align-last ; pour prendre effet, text-align doit d'abord être défini comme justifié

auto : Aucun alignement spécial.

gauche : Le contenu est aligné à gauche.

centre : centrez le contenu.

à droite : le contenu est aligné à droite.

justifier : justifiez le contenu aux deux extrémités.

début : limite de début de l'alignement du contenu.

fin : limite de fin d’alignement du contenu.

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

text-indent : Récupère ou définit le retrait du texte dans l'objet.

Pour utiliser cet attribut sur un objet en ligne, vous devez d'abord faire apparaître l'objet au niveau bloc ou au niveau bloc en ligne.

Les mots-clés suspendus et chaque ligne suivent la valeur d'indentation

div{text-indent:2em each-line;}

 : Utilisez la valeur de longueur pour spécifier l'indentation du texte. Peut être négatif.

 : Spécifie l'indentation du texte en pourcentage. Peut être négatif.

each-line : Définissez l'indentation à appliquer à la première ligne du conteneur de blocs ou à la première ligne de chaque saut de ligne forcé à l'intérieur. Les sauts de ligne doux ne sont pas affectés. (CSS3)

suspendu : inversez toutes les lignes en retrait.

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

text-transform : Récupère ou définit la casse du texte dans l'objet.

aucun : aucune conversion

majuscule : convertit la première lettre de chaque mot en majuscule

majuscule : convertit chaque mot en majuscule

minuscule : convertissez chaque mot en minuscules

pleine largeur : convertissez tous les caractères en pleine chasse. Si un caractère n’a pas de forme pleine chasse correspondante, il sera laissé intact. Cette valeur est couramment utilisée pour composer des symboles idéographiques tels que des caractères latins et des chiffres.

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

vertical-align : Définit ou récupère l'alignement vertical des éléments en ligne dans la zone de ligne .

baseline : aligner le contenu d'un objet qui prend en charge la fonctionnalité valign sur la ligne de base

sub : aligner verticalement l'indice du texte

super : Aligner verticalement le texte Exposant

top : Aligner le contenu de l'objet qui prend en charge la fonctionnalité valign en haut de l'objet

text-top : Aligner le texte de l'objet qui prend en charge la fonctionnalité valign en haut de l'objet

milieu : alignez le contenu de l'objet qui prend en charge la fonctionnalité valign au milieu de l'objet

bas : alignez le texte de l'objet qui prend en charge la fonctionnalité valign fonctionnalité valign au bas de l'objet

text-bottom : prendra en charge la fonctionnalité valign Aligner le texte de l'objet en haut de l'objet

 : Spécifiez le décalage par rapport à la ligne de base en pourcentage. Peut être négatif. La référence pour les pourcentages est de 0 %.

 : utilisez la valeur de longueur pour spécifier le décalage par rapport à la ligne de base. Peut être négatif. La ligne de base est 0 pour les valeurs numériques.

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

word-break : Définissez ou récupérez le comportement de saut de mot du texte dans l'objet.

Pour résoudre le problème consistant à empêcher les caractères longs et continus sans signification dans la page de casser la mise en page, break-all doit être utilisé

Comme l'un des attributs privés de ; IE, IE5.5 Il a été le premier à implémenter le saut de mot, qui a ensuite été adopté comme attribut standard par le w3c

normal : selon les règles textuelles des langues asiatiques ; et les langues non asiatiques, les sauts de ligne dans les mots sont autorisés.

garder tout : comme d'habitude pour toutes les langues non asiatiques. Pour le chinois, le coréen et le japonais, les sauts de mots ne sont pas autorisés. Idéal pour les textes non asiatiques contenant une petite quantité de texte asiatique.

break-all : ce comportement est le même que celui normal pour les langues asiatiques. Les sauts dans n'importe quel mot d'une ligne de texte en langue non asiatique sont également autorisés. Cette valeur convient au texte asiatique contenant du texte non asiatique, comme la rupture de lettres anglaises consécutives.

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

word-wrap : définir ou récupérer s'il faut couper les lignes lorsque le contenu dépasse les limites du conteneur spécifié.

normal : permet au contenu de repousser ou de dépasser les limites spécifiées du conteneur.

break-word : le contenu dépassera les limites. Les sauts de ligne sont autorisés dans les mots si nécessaire.

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

Ce qui précède est le contenu du résumé des trois propriétés CSS courantes. Veuillez prêter attention au contenu plus connexe. Site Web chinois PHP (www.php.cn) !