Quelles sont les unités de longueur CSS couramment utilisées ?

Les unités de longueur les plus couramment utilisées en CSS sont les pixels (px), les pourcentages (%), rem, em, vh, vw, pt, cm, mm, in, etc. Ces unités peuvent être utilisées pour définir la largeur, la hauteur, la taille de la bordure, la taille de la police, etc.

1. L'unité pixel (px) est l'une des unités les plus couramment utilisées. Il s'agit d'une unité de longueur fixe calculée par rapport aux pixels physiques de l'écran électronique. Voici un exemple de code :

div {
    width: 200px;
    height: 100px;
    font-size: 16px;
    border: 1px solid #000;
}

Dans l'exemple de code ci-dessus, la largeur de l'attribut width 和 height 属性使用了像素单位来定义 div 元素的宽度和高度，font-size 属性使用像素单位来定义字体大小，border est également en unités de pixels.

2. Les unités de pourcentage (%) sont calculées par rapport à la taille de l'élément parent. Voici un exemple de code :

div {
    width: 50%;
    height: 50%;
}

Dans l'exemple de code ci-dessus, la largeur et la hauteur de l'élément div sont définies à 50 % des dimensions de l'élément parent.

3. les unités rem sont calculées par rapport à la taille de la police de l'élément racine (c'est-à-dire l'élément html). Voici un exemple de code :

html {
    font-size: 16px;
}

div {
    width: 10rem;
    height: 5rem;
    font-size: 1.2rem;
}

Dans l'exemple de code ci-dessus, la taille de la police de l'élément racine est définie sur 16 px, la largeur et la hauteur de l'élément div sont 10 fois la taille de la police de l'élément racine, et la police la taille est 10 fois la taille de la police de l'élément racine 1,2 fois.

4. les unités em sont calculées par rapport à la taille de la police de l'élément lui-même. Voici un exemple de code :

div {
    font-size: 16px;
    width: 2em;
    height: 2em;
}

Dans l'exemple de code ci-dessus, la largeur et la hauteur de l'élément div sont définies sur deux fois la taille de police de l'élément lui-même.

En plus des unités ci-dessus, il existe d'autres unités de longueur :

• vh (hauteur de la fenêtre) représente un pourcentage par rapport à la hauteur de la fenêtre.
• vw (largeur de la fenêtre) représente le pourcentage par rapport à la largeur de la fenêtre.
• pt (point) est l'unité d'impression, 1pt est approximativement égal à 1/72 de pouce.
• cm (centimètre) signifie centimètre, 1 cm est approximativement égal à 96px/2,54.
• mm (millimètre) signifie millimètre, 1 mm est approximativement égal à 96px/25,4.
• in (inch) signifie pouces, 1in est approximativement égal à 96px.

En bref, il est nécessaire de choisir l'unité de longueur appropriée dans différentes situations pour obtenir les meilleurs résultats.

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!