Heim >Web-Frontend >CSS-Tutorial >So stellen Sie die CSS-Breite auf 100 vw ein
In CSS können Sie den Stil „width:100vw;“ verwenden, um die Breite auf 100vw festzulegen, und das width-Attribut kann die Breite des Elements festlegen. vw ist eine Ansichtsfenstereinheit, die sich auf die Breite relativ zum Ansichtsfenster bezieht. 1 vw entspricht 1 % der Ansichtsfensterbreite. Beispielsweise beträgt die Breite des Browsers 1920 Pixel, also „1vw = 19,2 Pixel“.
Die Betriebsumgebung dieses Tutorials: Windows 7-System, CSS3-Version, Dell G3-Computer.
In CSS können Sie den Stil „width:100vw;
“ verwenden, um die Breite auf 100 vw festzulegen.
css width attribute
width attribute legt die Breite des Elements fest; es definiert die Breite des Inhaltsbereichs des Elements, und Auffüllung, Rahmen und Ränder können außerhalb des Inhaltsbereichs hinzugefügt werden.
Hinweis: Nicht ersetzte Inline-Elemente ignorieren dieses Attribut.
Attributwert:
[Empfohlenes Tutorial: CSS-Video-Tutorial ]
CSS-Ansichtsfenstereinheiten (Ansichtsfenstereinheiten)
Auf der PC-Seite bezieht sich das Ansichtsfenster auf die PC-Seite und bezieht sich auf It ist der sichtbare Bereich des Browsers;
Auf der mobilen Seite handelt es sich um 3 Ansichtsfenster: Layout-Ansichtsfenster (Layout-Ansichtsfenster), Visuelles Ansichtsfenster (visuelles Ansichtsfenster) und Ideales Ansichtsfenster (ideales Ansichtsfenster).
Das „Ansichtsfenster“ in der Ansichtsfenstereinheit bezieht sich auf den sichtbaren Bereich des Browsers auf der PC-Seite; auf der mobilen Seite bezieht es sich auf das Layout-Ansichtsfenster im Ansichtsfenster.
Gemäß der CSS3-Spezifikation umfassen die Ansichtsfenstereinheiten hauptsächlich die folgenden 4 Einheiten:
1.vw: Bezogen auf die Breite des Ansichtsfensters ist das Ansichtsfenster gleichmäßig in 100 vw-Einheiten unterteilt, und 1 vw entspricht 1 % der Breite des Ansichtsfensters.
2.vh: Relativ zur Breite des Ansichtsfensters ist das Ansichtsfenster in 100 vh-Einheiten unterteilt, und 1vh entspricht 1 % der Höhe des Ansichtsfensters.
3.vmin: Wählen Sie die kleinste zwischen vw und vh aus.
4.vmax: Wählen Sie den größten zwischen vw und vh aus. Die vollständigen Namen von
vw und vh
sind Viewport-Breite und Viewport-Höhe. Die Breite und Höhe des Fensters entsprechen 1 % der Bildschirmbreite und -höhe.
vh und vw: Höhe und Breite relativ zum Ansichtsfenster, nicht zum übergeordneten Element (CSS-Prozentsätze beziehen sich auf die Höhe und Breite des nächstgelegenen übergeordneten Elements, das es enthält). 1vh entspricht 1/100 der Höhe des Ansichtsfensters und 1vw entspricht 1/100 der Breite des Ansichtsfensters.
Zum Beispiel: Die Browserhöhe beträgt 950 Pixel, die Breite beträgt 1920 Pixel, 1 vh = 950 px/100 = 9,5 px, 1vw = 1920 px/100 = 19,2 px.
Der Unterschied zwischen vh/vw und %
Weitere Programmierkenntnisse finden Sie unter: Programmiervideo! !
Das obige ist der detaillierte Inhalt vonSo stellen Sie die CSS-Breite auf 100 vw ein. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!