Was sind die am häufigsten verwendeten CSS-Längeneinheiten?

Die am häufigsten verwendeten Längeneinheiten in CSS sind Pixel (px), Prozentsätze (%), rem, em, vh, vw, pt, cm, mm, in usw. Mit diesen Einheiten können Sie die Breite, Höhe, Rahmengröße, Schriftgröße usw. des Elements festlegen.

1. Die Pixeleinheit (px) ist eine der am häufigsten verwendeten Einheiten. Es handelt sich um eine feste Längeneinheit, die relativ zu den physischen Pixeln des elektronischen Bildschirms berechnet wird. Hier ist ein Codebeispiel:

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

Im obigen Codebeispiel wird die Breite des width 和 height 属性使用了像素单位来定义 div 元素的宽度和高度，font-size 属性使用像素单位来定义字体大小，border-Attributs ebenfalls in Pixeleinheiten angegeben.

2. Prozenteinheiten (%) werden relativ zur Größe des übergeordneten Elements berechnet. Hier ist ein Codebeispiel:

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

Im obigen Codebeispiel sind die Breite und Höhe des div-Elements auf 50 % der Abmessungen des übergeordneten Elements festgelegt.

3. rem-Einheiten werden relativ zur Schriftgröße des Stammelements (d. h. des HTML-Elements) berechnet. Hier ist ein Codebeispiel:

html {
    font-size: 16px;
}

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

Im obigen Codebeispiel ist die Schriftgröße des Stammelements auf 16 Pixel festgelegt, die Breite und Höhe des Div-Elements betragen das Zehnfache der Schriftgröße des Stammelements und die Schriftart Die Schriftgröße beträgt das 10-fache der 1,2-fachen Schriftgröße des Stammelements.

4. em-Einheiten werden relativ zur Schriftgröße des Elements selbst berechnet. Hier ist ein Codebeispiel:

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

Im obigen Codebeispiel sind Breite und Höhe des div-Elements auf das Doppelte der Schriftgröße des Elements selbst festgelegt.

Zusätzlich zu den oben genannten Einheiten gibt es noch einige andere Längeneinheiten:

• vh (Ansichtsfensterhöhe) stellt einen Prozentsatz relativ zur Ansichtsfensterhöhe dar.
• vw (Ansichtsfensterbreite) stellt den Prozentsatz relativ zur Ansichtsfensterbreite dar.
• pt (Punkt) ist die Druckeinheit, 1pt entspricht ungefähr 1/72 Zoll.
• cm (Zentimeter) bedeutet Zentimeter, 1 cm entspricht ungefähr 96 Pixel/2,54.
• mm (Millimeter) bedeutet Millimeter, 1 mm entspricht ungefähr 96px/25,4.
• in (Zoll) bedeutet Zoll, 1 Zoll entspricht ungefähr 96 Pixel.

Kurz gesagt ist es notwendig, in verschiedenen Situationen die passende Längeneinheit zu wählen, um die besten Ergebnisse zu erzielen.

Das obige ist der detaillierte Inhalt vonWas sind die am häufigsten verwendeten CSS-Längeneinheiten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!