Heim > Web-Frontend > CSS-Tutorial > Hauptteil

Was ist Dimension in CSS? (Codebeispiel)

青灯夜游
Freigeben: 2018-09-14 17:59:59
Original
2636 Leute haben es durchsucht

In diesem Kapitel erfahren Sie Was ist Dimension in CSS? (Codebeispiel) . Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird Ihnen hilfreich sein.

1. Einführung

Mit der CSS-Dimension-Eigenschaft können Sie die Höhe und Breite eines Elements steuern. Ebenso können Sie den Zeilenabstand vergrößern.

2. Dimension (Größe) Attributwert

Was ist Dimension in CSS? (Codebeispiel)

3

(1) Beispiel 1: Höhe verschiedener Elemente festlegen

img.normal
{
    height:auto;
}
img.big
{
    height:120px;
}
p.ex
{
    height:100px;
    width:100px;
}
Nach dem Login kopieren

(2) Beispiel 2: Höhe eines Elements mithilfe des Prozentwerts festlegen

html {height:100%;}
body {height:100%;}
img.normal {height:auto;}
img.big {height:50%;}
img.small {height:10%;}
Nach dem Login kopieren

(3) Beispiel 3: Verwenden Sie Pixelwerte, um die Breite des Elements festzulegen

img {width:200px;}
Nach dem Login kopieren

(4) Beispiel 4: Legen Sie die maximale Höhe des Elements fest

p{
    max-height:50px;
    background-color:yellow;
}
Nach dem Login kopieren

(5 ) Beispiel 5: Verwenden Sie Prozentwerte, um die maximale Breite des Elements

p{
    max-width:20%;
    background-color:yellow;
}
Nach dem Login kopieren

festzulegen. (6) Beispiel 6: Legen Sie die minimale Höhe des Elements fest

p{
    min-height:100px;
    background-color:yellow;
}
Nach dem Login kopieren

(7) Beispiel 7: Legen Sie die minimale Breite von fest Element

p{
    min-width:150px;
    background-color:yellow;
}
Nach dem Login kopieren
mit Pixelwert

Das obige ist der detaillierte Inhalt vonWas ist Dimension in CSS? (Codebeispiel). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
css
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!