Taille CSS en pourcentage

Unités en CSS

Unités absolues

en pouces

cm;

mm;

pt-pound

Unité relative

em-liée à la taille de la police de l'élément;

rem - lié à la taille de la police de l'élément racine

px - lié aux pixels CSS

% - le pourcentage d'une autre valeur d'attribut

Peut être utilisé dans les attributs CSS qui prennent des pourcentages

Positionnement : haut, droite, bas, gauche

Modèle de boîte : largeur, hauteur, marge, remplissage

Arrière-plan : position du fond, taille du fond

Texte : indentation du texte

Police : taille de la police

Comment les pourcentages sont calculés

Pourcentage Le calcul est relatif à une base relative au bloc contenant de l'élément courant.

Propriétés calculées en fonction de la largeur du bloc conteneur : margin, padding, width, max-width,min-width, left, right, text-indent.

Basé sur la hauteur de le bloc contenant Propriétés calculées : top, bottom, height, max-height, min-height

Propriétés calculées en fonction de la taille de police actuelle : line-height

Propriétés calculées en fonction de la hauteur de la ligne : vertical-align

est basé sur la largeur et la hauteur de l'élément lui-même : background-position : la position de l'image d'arrière-plan, en définissant deux valeurs​​dans le sens horizontal et dans le sens vertical respectivement. Si le pourcentage est utilisé, la valeur du pourcentage sera appliquée à l'élément en même temps et aux images. Par exemple, 50% 50% alignera le point (50%, 50%) de l'image avec le point (50%, 50%) du cadre, ce qui équivaut à définir le centre. De la même manière, 0% 0% équivaut au haut gauche, 100% 100% équivaut au bas droit

Basé sur la largeur de l'élément lui-même : background-size mais cette valeur ne peut être appliquée qu'à éléments de bloc, la valeur en pourcentage définie. La taille de l'image d'arrière-plan sera calculée en fonction du pourcentage de la largeur de l'élément dans lequel elle se trouve

Tutoriel recommandé : "Tutoriel CSS"

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!